This is one of those innocent looking webapps that blow my mind by their usefulness and ease of use (ease of usefulness?)
It all started when I needed a better font than Arial for my retro/pixel/end-of-80’s Roguelike game. At first I thought there would be a way to package the font with the game, CSS @font-face style, and be done with it, but this is different, since I’m using Phaser and displaying bitmap fonts.
It seems like the most popular option is to use webfonts in Phaser, but I really wanted to package the fonts and make the game playable offline.
I finally stumbled upon Littera, and my quality of life significantly increased.
So what does Littera do?
It’s pretty simple: it creates a spritesheet of selected glyphs (characters, for the uninitiated), but this spritesheet might have all the glyphs mixed around and in an unordered disposition, so it also gives you the metadata in a .fnt file, which is basically a .xml, to tell whatever you’ll feed your spritesheet to that “this is where each glyph is“.
Wrap-up: Littera outputs an image + xml.
Now that you know what is does, let’s learn how to use it!
Select which glyphs you’ll be using in your project
Add different optional effects:
Happy with the result? You can now go to the top bar and select the padding between glyphs, how you want your data (xml, txt, fnt, etc…), the name (this is important for later), and the packing method.
Don’t forget to give it a good name, like hud_font or gothic_font, and not something like asdfqwertd. You’ll thank me later. For now, we’ll use the superbly original FontName as the name of our font.
But most importantly…
…you should just play around and grok the stuff by yourself. Nothing beats hands-on experience. If you don’t have time for that, then, just… just trust me.
I’m totes trustworthy.
Alright! You’ve played around, you are satisfied with your font, now what? Press that export button, homie!
Start exporting, then download your font’s zip file. The zip contains the aforementioned image and xml. You don’t need the zip, only the content. Just extract them somewhere logical, such as your game’s assets folder, (NOT C:Windowssystem32, why would you ever do that?) and you’re allllmmmoost ready!
The actual Phaser part of this tutorial
[snippet id=”158″ title=”Littera – Using the bitmap font in Phaser” height=”0″ line_numbers=”true”]
Ain’t that awesome? And easy? And peasy?
So today we converted a font into a bitmap font, we modeled it until we were happy, and then we downloaded it and used it in our game. Cool, isn’t it?
If you liked using Littera, don’t forget to donate. The button is in the lower right corner of the website.
Awesome management of textfields with Tiled. Prepare to have your pants blown away.