Hi everyone. It’s been forever since my last post and with good reason. I’ve been working non-stop on updating all of my apps in the Mac App store to support sandboxing as well as working on my first Mac game, more on that in another post.
This post is mainly for reference so that I don’t forget how to do this but I thought that maybe this would help out some of you as well.
So basically this applies to anyone who is wanting to use a font that is not part of the Mac OS X system fonts within your Mac game using Cocos2D.
For this tutorial, I’ve created a new project named Demo and have chosen the default Cocos2D Mac Template
If you’ll click on the HelloWorldLayer.m file, and review the init method. We will be changing the default font from Marker Felt to our own custom font that we will download.
To use a custom font here is what you’ll have to do:
- Click on your project and then click on your project target and then click on Build Phases
- At the bottom, find the Add Build Phase Button, click it and then click on Add Copy Files
- Click on the disclosure triangle to expose Copy Files
- Destination should be Resources and Subpath should be Fonts
- If you haven’t done so yet, please go ahead and download a font. I will be using Led 8×6
- When your download has completed, drag the font file into the Add files here box within the Copy Files Build Phase. Keep the defaults and click Finish
- You should have something similar to the below screen shot
You then need to add the
ATSApplicationFontsPath key to your
Info.plist file, with the name of the folder containing your font as its value:
Now we are all set to begin using our custom font within our project. Let’s go ahead and click back over to the HelloWorldLayer.m file.
- Within the init method replace @”Marker Felt” with @”Led 8×6″
Notice that we are not using the name of the file which is led_8x6.ttf but instead we are using the actual font name. The way you would go about knowing what the name of the font is, would be to double-click on the file and let it install, then look for it in Font Book.
Finally lets run the project. You should see your custom font now.
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
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.
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.
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.
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.
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];
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
We thought it would be a great idea to have an installer for the cocos2d game engine to make it quick and simple for everyone to install the latest stable cocos2d build. The cocos2d installer app is a native Mac OS X app that after installation allow you to, with a click of a button, download the latest stable build of the cocos2d game engine, install it and the Xcode templates to get you up and running and making games simple and quick.
You can download Cocos2d Installer by clicking on the link below:
cocos2d Installer (368.6 KiB, 974 hits)
As new cocos2d builds become available we will update the Cocos2d Installer app so that you can grab the latest version of cocos2d.
We were going to list this app for free on the Mac App Store but because of some of Apple’s guidelines, specifically file locations, we have had to remove it and host it here. If you find the app useful or can think of something else to add to it to make it more useful then feel free to leave a comment.