Adding text using CCLabel

In this section, we will take a look at how to add text to a scene. In Cocos2d, there are two ways in which we can add text: the CCLabelTTF way and the CCLabelBMFont way. We will look at CCLabelBMFont later in the book when we cover Glyph Designer in Chapter 9, Game Tools. For now, we will consider what CCLabels are and how they work.

Getting ready

CCLabelsTTF uses system fonts that are already present on our Mac system. So, additional work is required here. We will just call the name of the font, the text we want to display, and the size of the font, and we are good to go!

Note

Note that there may be cases where the font is installed on your system and it still isn't displayed in the game. This is because Cocos2d includes only some of the system fonts. If you want to add a system font that is not in the list, you need to add it yourself.

How to do it…

Right after adding the background image, we will add the following code:

CCLabelTTF *mainmenuLabel = 
  [CCLabelTTF labelWithString:@"Main Menu" 
  fontName:@"AmericanTypewriter-Bold"
  fontSize: 36.0f];

mainmenuLabel.position = 
  CGPointMake(winSize.width/2,
  winSize.height * 0.8);
[self addChild:mainmenuLabel];

Here, we will create a new variable called mainmenuLabel of the CCLabelTTF type and call the labelWithString function, in which we will pass the text we want to display, the name of the font, and then the size of the font.

We will then place it at the center widthwise and at 80% of the height from the bottom of the screen so that it appears at the top of the scene.

Finally, we will add mainmenuLabel to the scene.

Here, we will use AmericanTypeWriter-Bold as the font. The complete list of fonts can be found in the FontListTTF.plist file located in SpriteBuilder.app at /Applications/SpriteBuilder.app/Contents/Resources/FontListTTF.plist in our applications folder.

How it works…

CCLabelTTF works in a very similar way to a sprite; you can change its position, rotation, and scale.

There's more…

You can also add a shadow and outline to the font text. Add the following code right after adding the font to the scene:

//adding shadow
mainmenuLabel.shadowColor = 
  [CCColor colorWithRed:0.0 green:0.0 blue:1.0];
mainmenuLabel.shadowOffset = ccp(1.0, 1.0);

//adding outline 
mainmenuLabel.outlineColor = 
  [CCColor colorWithRed:1.0 green:0.0 blue:0.0];

mainmenuLabel.outlineWidth = 2.0;

The shadow color property adds a color to the shadow; here, we will make the shadow blue in color. We also need to offset the shadow because it will get hidden behind the main text otherwise.

In the same way, the outline color property specifies the color and the outlineWidth property specifies how thick you want the outline to be. The outlineWidth property has a default value of 1.0f.