qq_tracker_code_advanced_default

Have you ever wanted a professional looking font for your iPhone / iPod Touch / iPad or Mac game but weren’t sure how to go about it? Maybe you are just lacking the artistic talent? One way to get around this is using photoshop and just making textures of the text you want to use. If you go this route then you’ll be stuck with static text and you’ll need to have a separate texture for each variation of your text, not to mention the learning curve that comes with Photoshop.

With Glyph Designed, you can forget everything I just mentioned above. Glyph Designer is a development tool that was designed by Mike & Tom of 71squared.com, a development blog for the Mac and iOS platform. With Glyph designer you can easily choose from your pre-installed fonts and modify them to your hearts content to make them fit perfectly with your game’s theme.

In this post I am going to cover some of Glyph Designer’s features and also provide a short tutorial on how to use Glyph Designer to make custom Glyph textures that you can then import into your cocos2d game project and use for your in-game text.

If you want to follow along go ahead and download Glyph Designer from here http://glyphdesigner.71squared.com

Glyph Designer Layout:

Selecting a Font to use:

You’ll notice that in the above screen shot, looking at the left most side of the application you’ll see a font browser that has a list of all the fonts that are currently installed on your Mac. You can scroll through this list and select the font you want to use. When you click on a font you’ll notice that it shows up in the preview window. At the bottom left of the app there 2 basic font settings that allow you to adjust the currently selected font. Using these 2 settings, you can change the size and type of the font, and by type I mean; Regular, Bold, Italic, Condensed, etc… whichever the selected font supports.

Editing The Selected Font:

On the right most side of the app you will notice a lot of settings that can be modified. Most of these settings are pretty self explanatory, I will however cover them anyways. The settings that can modified are as follows:

  • Texture Atlas ( Width, Height, Color, Spacing, Auto Size )
  • Glyph Fill ( Fill Glyph, Fill Type)
  • Glyph Outline (Outline, Width, Fill Type, Color )
  • Glyph Shadow (Shadow, Type, Lightsource, Blur Radius, Color)
  • Included Glyphs

I will now cover each of these in more Detail

Texture Atlas:

The Texture Atlas Settings define the properties of the exported texture. If you are not familiar with the term Texture Atlas, think Sprite Sheet, more on that later. You can set the width and height of of the Texture Atlas. I recommend going with the smallest multiple of 2 that you can get away with, meaning: 32 x 32, 64 x64, 128 x 128, etc…

For the Color setting I just set the Opacity to 0 so it doesn’t matter what the background color is, the choice is yours on this one.

You can leave the spacing at a default of 2. Another option to setting the width and height is to check the Auto Size check box which tells Glyph Designer that you want it to determine the best size of the Texture Atlas.

Glyph Fill:

The first option in Glyph Fill is a check box called Fill Glyph. If you want your Glyph to have a fill color, then you should select this checkbox otherwise you can skip over Glyph Fill. For Fill type you have 2 options. You can chose to fill using a gradient or fill using a solid color; gradients are great and look nice but will give you problems if you want to use RGBA4444 unless you set your dithering properly. Maybe Mike or Tom can add a feature that allows you to apply filters when exporting, maybe the ability to choose from RGBA4444 and RGBA8888 as well as some dithering filters. What do you think guys?

With that being said, if you pick gradient then you can pick your start and end colors as well as the angle of the gradient. These are totally up to you and you should go with what you think looks best.

Glyph Outline:

The first option you have here is a checkbox to enable or disable an outline for your Glyph. All of the options here are pretty self explanatory. Choose if you want an outline and then set the width, the fill type, which can be a solid fill type or a gradient fill type and then set your color. The same applies to Glyph Outline with gradients as for Glyph Fill.

Glyph Shadow:

Again, just as with Glyph Fill and Glyph Outline, the first option you have here is to either turn Shadow On or Off by checking or unchecking the Shadow Box. You have quite a few options here for the Glyph Shadow setting. First lets talk about the different Shadow types that you can use.

  • Outer Shadow – This type of shadow will add a shadow to the Outside of your Glyph
  • Inner Thin Shadow – This type of shadow will add a shadow to the Inside of your Glyph. If you want to use an inner shadow, I recommend using this one on fonts that are not very thick.
  • Inner Thick Shadow – This type of shadow will add a shadow to the Inside of your Glyph. If you have a thick font you can get away with using this shadow with good results, you could also use the thin shadow for your thicker fonts for a less shadowy effect.

After you’ve decided on the type of shadow to use we need to look at the Light Source. For the most part the default location of the Light Source should be fine, but if you need your shadow somewhere else then you can drag the light source to a different location, you can also move the light source via its x and y values for more accurate control.

The Blur Radius for the shadow specifies how blurred your shadow should be; in my opinion the default value here should do for most. Last but not least we have the shadow color.. No your shadow does not have to be black, this is your choice, don’t be afraid to be creative.

Included Glyphs:

Not too much to say about the Included Glyphs section. This part of the app specifies which letters, numbers, symbols you want to have in your Texture Atlas. You can edit this to include only the ones you know you’ll use to save some space. For instance if you know you will only use numbers or if you’ll only be using upper case or lower case characters.

Export The Texture Atlas:

Now all that’s left to do before we can use our new Glyph is to export the Texture Atlas, to do this just click on the Export button at the top right corner of Glyph Designer. From the dialog that pops up, just pick a location and specify a name for the Texture Atlas and click on Save.

In the next section I will go over the basics for using our Texture Atlas with Cocos2d by showing some sample code. You’ll be amazed at how easy this is.

Using Glyph Designer Exported Texture Atlas With Cocos2d:

If you’ve exported your glyph from Glyph Designer, you should have 2 resulting files with the name you’ve specified. Both of these files need to be copied to your Xcode Project.

Start a new Xcode Project and choose the cocos2d template.

Place the 2 files that Glyph Designer generated into your Resources folder within your Xcode Project.

After you’ve added the glyph files to your resources folder, select your HelloWorldScene.m file and find the init method. Replace the following code:

CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World" fontName:@"Marker Felt" fontSize:64];

with

CCLabelBMFont *label = [CCLabelBMFont labelWithString:@"Hello World" fntFile:@"test.fnt"];

That’s all you have to do to use the glyphs with cocos2d… See, I told you it was easy.

Thank’s to Mike & Tom, we now have a full featured tool that allows us to easily create awesome looking in-game text. Please support Glyph Designer, it will soon be available on the Mac App Store but you can get it now from the Glyph Designer site at http://glyphdesigner.71squared.com