GameDev – Using Littera with Phaser

Littera, dudes.

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 what?

Now that you know what is does, let’s learn how to use it!

Pick a font from your computer
littera_select_font

Select which glyphs you’ll be using in your project

littera_incl_glyphs
It’s pretty safe to keep the default glyphs, don’t worry too much about it for now.

Select the color(s) (you can have gradients!)
littera_fill_color

 

Add different optional effects:

Stroke littera_stroke

Glowlittera_glow

Shadowlittera_shadow

Bevellittera_bevel

Distance fieldlittera_distance_field

Add an optional background colorlittera_background_color

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.littera_settings

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.

Moving on…

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:\Windows\system32\, why would you ever do that?) and you’re allllmmmoost ready!

The actual Phaser part of this tutorial

//-- In your Phaser game state

this.preload = function() {
    
    // ...
	game.load.bitmapFont("FontName", "path/to/FontName.png", "path/to/FontName.fnt")
	// ...
	
};

this.create = function() {
    
    // ...
    var label = game.add.bitmapText(x, y, "FontName", "Your text goes here", size);
    // ...
    
}

Ain’t that awesome? And easy? And peasy?

Wrapping up

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.

Next up:

Awesome management of textfields with Tiled. Prepare to have your pants blown away.