Localize your game with bitmap fonts and cocos2d

It’s my first tutorial !

I will explain here how to localize your game, using bitmap fonts and cocos2d, with creating a menu with buttons and text in it.

During this tutorial we will also see how to make the HD and SD version, so it will work for the retina display too.

Let’s prepare our ressources:

1. The buttons

Take your button, in HD version: button-hd.png

and also the SD version of it.

To quickly convert my HD files, i’m using HD2x:

drop button-hd.png in HD2x and click ‘HD2x’, you will have your button.png

 

I’m also creating a selected version of the button, named buttonSel-hd.png and buttonSel.png, in green color.

 

2. The bitmap font

With cocos2d and CCLabelBMFont we can write bitmap font. We need the png texture and the atlas font file.

Using bmGlyph, you can easily create the bitmap font with nice effects:

I took here a cool font with some gradient effects in it, a stroke and a shadow… size of the font (HD) is 60.

When publishing, select the cocos2d export, the auto SD Level 2, so it will generate automatically 4 files:

HD, font size 60:
font-hd.png
font-hd.fnt

SD, font size 30 :
font.png
font.fnt

Now we have all our ressources, so let’s create our project !

3. Cocos2d project.

Under xcode (using here v4.3.1), File->New Project

and select a cocos2d template.

Edit the AppDelegate.m to enable the retina display mode, remove the comments here line 73:

if( ! [director enableRetinaDisplay:YES] )
 CCLOG(@"Retina Display Not supported");

Now import your ressources as shown bellow:

 

4. Creating the menu

Edit the HelloWorlLayer.m, in the super init function :

if( (self=[super init]))
{
CGSize wins = [[CCDirector sharedDirector] winSize];

//button Play
CCSprite *bt_play = [CCSprite spriteWithFile:@"button.png"];
CCSprite *bt_playSel = [CCSprite spriteWithFile:@"buttonSel.png"];
CCMenuItemImage *PlayMenu = [CCMenuItemImage itemFromNormalSprite:bt_play selectedSprite:bt_playSel target:self selector:@selector(onPlayMenu:)];
CCLabelBMFont *lplay = [CCLabelBMFont labelWithString:@"Play" fntFile:@"font.fnt"];
[PlayMenu addChild:lplay];
lplay.position = ccp(bt_play.contentSize.width/2,bt_play.contentSize.height/2);

//button Settings
CCSprite *bt_settings = [CCSprite spriteWithFile:@"button.png"];
CCSprite *bt_settingsSel = [CCSprite spriteWithFile:@"buttonSel.png"];
CCMenuItemImage *SettingsMenu = [CCMenuItemImage itemFromNormalSprite:bt_settings selectedSprite:bt_settingsSel target:self selector:@selector(onSettingsMenu:)];
CCLabelBMFont *lset = [CCLabelBMFont labelWithString:@"Settings" fntFile:@"font.fnt"];
[SettingsMenu addChild:lset];
lset.position = ccp(bt_settings.contentSize.width/2,bt_settings.contentSize.height/2);

//the menu
CCMenu *menu = [CCMenu menuWithItems:PlayMenu, SettingsMenu, nil];
menu.position = ccp(wins.width/2, wins.height/2);
[menu alignItemsVertically];
[self addChild:menu];
}

We created 1 menu with 2 buttons in it:

– the 2 CCMenuItemImage with the button and buttonSel, and the selector (what will be called when you click on it)

– the CCMenu with the 2 items, aligned vertically and centered on screen.

Under each Item, we attached our text: the CCLabelBMFont with our font and the text we want to write in it…

Here is the result:

 

5. Localizing

Now we have our buttons, we wrote in it, so let’s see how to localize it.

First, we need a Localizable.strings file in our ressources:

right click on your ressources folder under xcode, New File, select an iOS ressource, strings file, and name it Localizable.strings

Now edit your Localizable.strings and add your text, we are doing it for English.

"bt_menuPlay" = "Play";
"bt_menuSettings" = "Settings";

 

Go back to your HelloWorldLayer.m and change the 2 CCLabelBMFont in order to use these strings:

CCLabelBMFont *lplay = [CCLabelBMFont labelWithString:NSLocalizedString(@"bt_menuPlay", nil) fntFile:@"font.fnt"];
CCLabelBMFont *lset = [CCLabelBMFont labelWithString:NSLocalizedString(@"bt_menuSettings", nil) fntFile:@"font.fnt"];

 

6. Adding language

Now we need to add another language.

Left click on Localizable.strings in your ressource and Display the file inspector. You should see on the right, and place ‘Localization': click on the ‘+’. The first time it seems doing nothing, click again on your ressources on Localizable.strings and you should see now under Localization that the English has been created.

Let’s add the french version, click ‘+’ again … and select french.

In your ressource, you can now see the 2 versions: English and French. Edit the french version with your text…

"bt_menuPlay" = "Jouer";
"bt_menuSettings" = "Params.";

 

Let’s see the result!

To change language, you will need to go to the iPhone settings and change the phone language, you should now see the text depending on your Localizable.strings files.

 

As we did a retina version, you have nothing to do, except viewing the result in retina display

 

Note for iPad: you can use the same method to have it wokring with the new iPad.

if you want to see the -hd graphics on iPad, you can force cocos2d to use -hd version of the file,

exemple with a font:

BOOL isIPAD = (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad);
CCLabelBMFont *lplay;
 if (isIPAD)
 lplay = [CCLabelBMFont labelWithString:NSLocalizedString(@"bt_menuPlay", nil) fntFile:@"font-hd.fnt"];
 else
 lplay = [CCLabelBMFont labelWithString:NSLocalizedString(@"bt_menuPlay", nil) fntFile:@"font.fnt"];

Download the xcode project here:

TutorialSovapsLocalize

 

that’s all, hope you enjoyed it