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.
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!
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.
CCLabelTTF
works in a very similar way to a sprite; you can change its position, rotation, and scale.
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
.
3.12.136.119