In Glyph Designer, click on Export at the top and navigate to the Resources/Published-iOS folder in your project directory (see the following screenshot). This is where you'll export the font for use with Cocos2d. Notice that because this is the largest font, meant for Retina-sized iPads, the suffix after the filename is -ipadhd. If you weren't designing for iPad, your largest filename suffix would be -hd.

Once you've exported the largest phone, go ahead and adjust the settings for each tier you need. For example, since we're exporting -ipadhd at the 60-point font, we'd also want to make 30-point and 15-point sizes for smaller devices. In addition to reducing the font size, we can also modify the stroke and shadow settings to give relatively the same look for all sizes.

So overall, if you call your font bmFont, you should have the following files (each .fnt file will also have a .png file with it), with the largest font size being 60:

When using the file extension method, as long as you export your files to the Published-iOS folder, the Xcode project remains set up in a way that includes your fonts in the project. In this way, you don't need to worry about copying anything. That being said, let's begin displaying labels with this new font we just created.

If you chose to go with directories, it's not as simple as just dragging the font files into SpriteBuilder (at the time of writing this book). Instead, you must create four folders within the Published-iOS folder of your project directory:

In Glyph Designer, click on Export at the top and navigate to the Published-iOS/resources-tablethd folder in your project directory (see the following screenshot). This is where you'll export the font for use with Cocos2d. The name of the file here is going to be the name of the font.

Once the tablethd version has been exported, do the same export but modify the font size and any other settings you wish to modify. For example, since we're exporting the tablethd size at 60-point font, we'd also want to create 30-point and 15-point sizes for smaller devices. In addition to reducing the font size, we can also modify the stroke and shadow settings to give relatively the same look for all sizes.

So overall, if you call your font bmFont, you should have the following files (each .fnt file will also have a .png file with it), with the largest font size being 60:

When using the directory method, if you've exported the font files to the folders mentioned previously, the Xcode project will be set up in such a way that it will automatically include these files, so you don't need to worry about copying anything. That being said, let's begin to display labels with this new font we just created.

Bring up Xcode and open MainScene.h. You're going to add these variables below the line that says CGSize winSize. Again, if you've followed the preceding TTF tutorial, you can delete or comment out the variables we created in that tutorial, as we will be using the same variable names here. We're stating the variable with lbl again so that we can easily identify it as a label:

@interface MainScene : CCNode
{
  CGSize winSize;
//the labels used for displaying the game info
//this line now uses CCLabelBMFont instead of CCLabelTTFFont
CCLabelBMFont *lblTurnsSurvived, *lblUnitsKilled, *lblTotalScore;
}

Then open MainScene.m and add these lines of code below the code for the background layer to display the labels. If you had chosen to export your font with a different name, you must change the fntFile parameter to match whatever you chose:

CCLabelBMFont *lblTurnsSurvivedDesc = [CCLabelBMFont labelWithString:@"Turns Survived:" fntFile:@"bmFont.fnt"];
lblTurnsSurvivedDesc.position = ccp(winSize.width * 0.125, winSize.height * 0.8);
[self addChild:lblTurnsSurvivedDesc];
    
lblTurnsSurvived = [CCLabelBMFont labelWithString:@"0" fntFile:@"bmFont.fnt"];
lblTurnsSurvived.position = ccp(winSize.width * 0.125, winSize.height * 0.75);
[self addChild:lblTurnsSurvived];
    
CCLabelBMFont *lblUnitsKilledDesc = [CCLabelBMFont labelWithString:@"Units Killed:" fntFile:@"bmFont.fnt"];
lblUnitsKilledDesc.position = ccp(winSize.width * 0.125, winSize.height * 0.6);
[self addChild:lblUnitsKilledDesc];
    
lblUnitsKilled = [CCLabelBMFont labelWithString:@"0" fntFile:@"bmFont.fnt"];
lblUnitsKilled.position = ccp(winSize.width * 0.125, winSize.height * 0.55);
[self addChild:lblUnitsKilled];
    
CCLabelBMFont *lblTotalScoreDesc = [CCLabelBMFont labelWithString:@"Total Score:" fntFile:@"bmFont.fnt"];
lblTotalScoreDesc.position = ccp(winSize.width * 0.125, winSize.height * 0.4);
[self addChild:lblTotalScoreDesc];
    
lblTotalScore = [CCLabelBMFont labelWithString:@"1" fntFile:@"bmFont.fnt"];
lblTotalScore.position = ccp(winSize.width * 0.125, winSize.height * 0.35);
[self addChild:lblTotalScore];

With these lines added, you should be able to run the game and see some fancy-looking labels on the left side of the screen, as shown here (this was run on an iPhone 5):

It's not much of a game if it's just displaying text, so let's add some buttons. But first, we must go over how to create sprite sheets using TexturePacker.

If you decide not to use TexturePacker, read the Not using TexturePacker – A brief how-to section and feel free to skip over the section about using sprite sheets with TexturePacker. If that's the case, you should also be using the directory method of file reading, as there's almost no benefit of file extensions except when using a program that automatically maintains them, such as TexturePacker.