Create a Game – Jelly Smash Tutorial part 3: Bitmap Fonts

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

Heya there,

Today I’m gonna talk about bitmap fonts (or how to display text with Stage3D and ND2Dx). This is a good opportunity to add some kind of useful information in our game Jelly Smash. We will need to show the current score as well as how much points each smashed bug have earned us. And last but not least, in the case of having smashed more than one bug in a shot, show a tremendous “COMBO!” message on the screen to congratulate our players.

As you will see in the preview at the bottom of this article, we have already some kind of a working concept here. There are still a couple of things I need to explain but today will only be about bitmap fonts. The actual game logic will be explained in the next tutorial.

A preview and the complete source can be found at the end of this page.

What is a bitmap font ?

This is a bitmap font with a couple of characters in it. Note the styling effect directly applied onto it.

This is a bitmap font.

Unlike a TrueType font, where all characters are vectorized (meaning a bunch of vectors (points and curved lines) defining the forms of each characters), a bitmap font, as its name implies, is a font where all characters are stored in a bitmap, as pixels.

There are pros and cons for each of those types:

  • a bitmap font can’t be scaled as well as vector fonts.
  • The ratio size/characters of a bitmap font is really bad compared to vector fonts. The more characters you need, the bigger the texture will be and thus the more memory it will require.
  • The good news is that a bitmap font is cheaper to draw and you can actually have really nice looking fonts without having to apply filters and effects on it at runtime.

You can also look at a bitmap font as a texture atlas.

What do you need to use a bitmap font ?

  1. A texture containing all the characters that you need.
  2. A xml file containing all the data for each character in the texture.

How to create a bitmap font ?

A few software out there will help you with this, the one I tried are :

  • Littera: this is the one I’m using, it’s free, online (ha Flash :)) and does the minimum required and more.
  • Bitmap Font Generator: slightly less intuitive than Littera but seems to have more options. You need to install it. I tried it for a few seconds and came back to Littera (not saying it’s a bad tool, just that Littera makes it quicker to get the job done). Bitmap Font Generator is actually the tool developed by Andreas Jönsson, the guy behind the quite popular data structure for bitmap font definition.
  • Glyph Designer: for mac users… Seems nice but I’ll explain why, to my opinion, Littera (and Photoshop or similar) is just the tool you need.
  • ShoeBox: a Air based app that does a couple of nice things and one of them is bitmap fonts.

Well, as you can probably guess, my favorite is Littera. It provides you with a simple and elegant interface, easy to understand, is accessible directly online and allows you to use your own font by uploading it to the tool. Filters can be applied to the font, they do a good job if you need something simple but I prefer to export my font in a solid color and on a transparent background with a custom padding (to have a little space for the effects) and apply all the effects I need via Photoshop. The quality is much better and the possibilities are much more numerous.

How can I use it with ND2Dx ?

Simple, first we need to use the BitmapFont2DStyleManager class. It’s a singleton, meaning there can only be one instance of this class, and the way a singleton is accessed in ND2Dx is through it’s static getInstance() function. That singleton is a Manager and thus manages our bitmap fonts, or more precisely their styles. Once we have an instance (shown below in the code snippet), we can call the createStyle() function and give it a Texture2D (the actual bitmap that contains all the font’s characters) and a XML (containing all the data about the bitmap font) like so:

// get our unique instance of BitmapFont2DStyleManager via its static getInstance() function
public var bitmapFont2DStyleManager:BitmapFont2DStyleManager = BitmapFont2DStyleManager.getInstance();

// and create a style using our manager
style = bitmapFont2DStyleManager.createStyle("font name", texture2D, xml_data);

This function returns a BitmapFont2DStyle object that contains everything needed in order to display your bitmap font. You can see it as a style that you can apply after on the object that will be in charge of rendering our text.
Having to pass a Texture2D object instead of a BitmapData allows us to put our bitmap font inside of a texture atlas. This way we are not obliged to have it as a separate texture (and maybe help us saving a couple of state changes)

Now we need something to render our font: BitmapFont2D extends Node2D (like Sprite2D) and contains all the code to render our font based on a style that we just created (BitmapFont2DStyle) and a couple more formatting options like alignment and line height. Here is how to use it:

// get unique instance of our style manager
var bitmapFont2DStyleManager:BitmapFont2DStyleManager = BitmapFont2DStyleManager.getInstance();

// create a new BitmapFont2D and assign a style retrieved via getStyleByName() of our style manager instance (this returns a BitmapFont2DStyle object, a bitmap font style)
var bitmapFont2D:BitmapFont2D = new BitmapFont2D(bitmapFont2DStyleManager.getStyleByName("style name"));

// set the text
bitmapFont2D.setText("hello there");

// and its alignment (it uses TextFormatAlign from the flash package)
bitmapFont2D.textAlign = TextFormatAlign.JUSTIFY;

The result

Now the we know how to show text on screen, let’s see how it looks like. Use your mouse to make Toby move. Press and hold the right button of your mouse to make Toby gain momentum, release to make him jump. Don’t wait too long and avoid being touched by the bugs.

Get Adobe Flash player

The complete source

box_zipJellySmash Game Tutorial part.3 For Flash Stage3D and ND2Dx

Hope you like it.

See you in next tutorial.

0 Flares Twitter 0 Facebook 0 Google+ 0 Pin It Share 0 Email -- Filament.io 0 Flares ×

3 Comments

  1. Serhii

    The tutorial is for the part 2.

  2. Serhii

    Sorry, i meaned the source code is for the tutorial 2.

  3. u’re right, changed it, it’s now the source code for part. 3 🙂

Leave a Comment

*