Search the Community

Hi everyone. I wanted to see if there was a good tool for creating bitmap fonts for games. One that can get an image created in Photoshop or Illustrator of a custom stylized font character set and create a sprite based bitmap font. I've used Shoebox for a long time, but it hasn't been updated for a few years and it's made in Adobe Air. Is there a more modern and better alternative that doesn't rely on Adobe Air? I've seen other tools that takes windows fonts and let's you create limited styling on them, but that's not what I'm looking for. Any help would be appreciated.

I'm looking at switching away from CreateJS, but I've got one snag I need to resolve before I can feel comfortable making the switch. I build my JS applications using Webpack, and one of the features I take advantage of is asset bundling. Webpack will bundle things like images or text files into JS files that can optionally be asynchronously fetched. Depending on my target platform, I can either release an all-in-one JS file, or I can release a main file with bundles that can be loaded asynchronously when needed (such as when loading the level they're used in). What this means is that my app already has data urls for images and raw text or parsed DOM data for things like XML files. I don't need PIXI to make requests for these, but I do need PIXI to use that data. This leaves me with two questions: CreateJS will let me create Image objects from data urls. Is PIXI able to accept data urls when creating Textures or when making fromImage calls? CreateJS exposes a BitmapFont object. I can pass a png and fnt pair and get back an assembled bitmap font. I don't see an equivalent in PIXI. It looks like the only way to load a font is using PIXIs loader, but that doesn't work for me because my font assets are already in the browser. I don't need PIXI to make an XHR request to fetch the files. I just need it to accept the data I've already loaded and create the font. Is there a way to do this? Thanks.

I made a bitmap font with litera using the same parameters as with other fonts before but this font in particular is not showing. The difference that I see is that the fnt file includes a lot of lines for kerning and I never saw that for other fonts. Do you know what can be the problem with this font? Thanks! Cloudy.zip project.ltr

Hi All I have characters in png file format (they are created in illustrator) and I wanna make bitmap font from them. I can create sprite sheet using texture packer but I need to create xml file for bitmap font. I am just wondering if there is a tool available to get png file and generates xml file that is supported by Phaser. I can do it manually but it is alot of work, I thought there might be some tools out there to automate some of the work for me. Thanks

Hi there! I have a problem with bitmap fonts. I want create custom bitmap font via "literra" and adjust several filters by Phaser. But I don't know what is propper way to use filters in phaser. I need something like that at result I could add filters instantly in literra, but filters apply for separate symbols only and looks terrible Two strokes and drop shadow. Is it possible to do that in Phaser? Maybe I shouldn't use bitmap fonts and phaser have other hack?

Where does phaser parse the XML document that contain the text location for the bitmap font sprite-sheet image? Where does it use this information to render the sprite font to the screen from the image? I tried to follow it, and as far as I can tell it use a native implantation to parse the XML URL or XML string, than it store it. Where does it retrieve this parse XML document and than extract the data needed to locate the correct text sprite from the image, than render it to the screen aka canvas? I might edit this later...

I actually create an image with embedded text like this: GroupFactory.prototype.createImgFromImgAndText = function (type, text) { var dataImg = this.game.cache.getFrame(type), bmd; bmd = this.game.make.bitmapData(dataImg.width, dataImg.height); bmd.load(type); if (text === undefined) { return bmd; } bmd.ctx.fillStyle = "#000000"; bmd.ctx.font = '25px san-serif'; bmd.ctx.fillText(text, 10, 50); return bmd; }; How can I do this with a retro font ? This hasn't worked GroupFactory.prototype.createImgFromImgAndText = function (type, text) { var dataImg = this.game.cache.getFrame(type), bmd; bmd = this.game.make.bitmapData(dataImg.width, dataImg.height); bmd.load(type); if (text === undefined) { return bmd; } bmd.ctx.fillStyle = "#000000"; bmd.ctx.font = this.game.add.retroFont('myfont', 60, 60, ",!?abcdefghijklmnopqrstuvwxyz.", 5, 0, 0, 0, 0); bmd.ctx.fillText(text, 10, 50); return bmd; };

Hi fellow devs! I'd like to share with you an app I've been working on for the past couple months. http://www.glyphite.com I present...Glyphite! A fast, clean, and affordable Bitmap font builder. Glyphite runs entirely in your browser so you never have to download an app. Choose from a (soon-to-be) massive selection of Photoshop-quality presets and tweak shadows, strokes, and fills to your heart's desire. When you're done, you can export in the standard BMFont format with more formats coming soon. Glyphite caters to every member of your team, from designers to developers to marketers. We've streamlined the experience so that creating stunning text effects is as easy as clicking a button or tweaking settings in Photoshop. It's now ready to be taken for a spin...by you! We've launched in beta right now, but all of the core font-producing functionality is present. The app performs best in Chrome and Safari, but full support for Firefox is next in the pipeline. Take a look (free to try!) and let us know what you think. We're building this tool for you and we would love to know how you use it and what you'd like to see in the future. www.glyphite.com

When I use bitmap font titleTxt = this.add.bitmapText(this.world.centerX-270,this.world.centerY-50,'eightbitwonder','Touch to Start!',44); It worked perfectly on Mozilla Firefox but it is not working on Google Chrome but when I replace that line of code with this tileTxt = this.add.text(300,300,'Touch to Start!'); it worked on both browser! I don't much experince with phaser so please help me to solve this or suggest an alternative way for using fonts!