Text Labels

Introduction

cocos2d supports both TTF (True Type Fonts) labels, and texture atlas labels.

Pros and Cons of TTF labels: ( CCLabelTTF )

• All the pros of TTF fonts: any size, kerning support, etc.
• Easy to use. No need to use an external editor.
• The creation/update is very slow since a new texture will be created, especially on Android.

Pros and Cons of texture atlas labels: ( CCLabelAtlas, CCLabelBMFont )

• The creation / update is very fast, since they don't create a new texture.
• Fonts can be customized (shadows, gradients, blur, etc)
• Depends on external editors: AngelCode / Hiero editor, GIMP / Photoshop
• Text can lose quality if resized

Label objects

Creating labels: Simple way

The easiest way to create a label is by using the CCLabelTTF object. Example:

1CCLabelTTF* ttf1 = CCLabelTTF::create("Hello World", "Helvetica", 12,
2                                          CCSizeMake(245, 32), kCCTextAlignmentCenter);

fontName is the TTF font name to be used. You can also use your own custom TTF file. You just need to add the .ttf file to the project.
If it fails to load the font it will use the UIFont class.
Important: The size of the OpenGL texture will be automatically calculated based on the font size and font name.

 

Creating labels: Complex way

You can also create textures using this API:

1CCLabelTTF* CCLabelTTF::create(const char *string, const char *fontName, float fontSize,
2                               const CCSize &dimensions, CCTextAlignment hAlignment, 
3                               CCVerticalTextAlignment vAlignment)

If you use this way, you must pass the dimension of OpenGL texture to be used. If the texture is not big enough, then only some parts of the label will be rendered.

 

Possible alignments:

• kCCTextAlignmentLeft (left alignment)
• kCCTextAlignmentCente (center alignment)
• kCCTextAlignmentRight (right alignment)

Like any object that implements the CCLabelProtocol protocol you can update it using the setString method. Example:

1label->setString("Hello World 2");

Important: Every time you call setString a NEW OpenGL texture will be created. This means that setString is as slow as creating a new CCLabel. So, DO NOT use CCLabel objects if you need to update them frequently. Consider using CCLabelAtlas or CCBitmapFontAtlas instead.

 

Color

You can change the color of your fonts by simply calling the color parameter like so:

1label.color = ccc3(0,0,0);
2//or
3label.color = ccc4(0,0,0,0);

ccc3 Example Colors:

 1* white - (255,255,255)
 2
 3* black - (0,0,0)
 4
 5* blue - (0,0,255)
 6
 7* green- (0,255,0)
 8
 9* red - (255,0,0)
10
11* Grey – (84,84,84)
12
13* Brown – (165,42,42)
14
15* Pink – (255,192,203)
16
17* Purple – (160,32,240)
18
19* Yellow – (255,255,0)
20
21* Gold – (255,215,0)

 

Alignment

If you want to modify the alignment you can use the anchorPoint property. Example:

1//left alignment
2label->setAnchorPoint(ccp(0,0.5f));
3
4// right alignment
5label->setAnchorPoint(ccp(1,0.5f));
6
7// center aligment (default)
8label->setAnchorPoint(ccp(0.5f,0.5f));

h3. Texture Atlas labels

 

There are 2 types of labels based on texture atlas:

• CCLabelBMFont
• CCLabelAtlas

CCLabelBMFont

Introduction

The CCLabelBMFont is the suggested way to create fast labels since:

• The bitmap (image) can be customized with the editors
• You can update/init the label without penalty
• It is very flexible. Each letter of the label can be treated like an CCSprite
• It has kerning support

The CCLabelBMFont label parses the Angel Code Font format to create a label. To create these kind of labels, you can use any of these editors:

http://www.n4te.com/hiero/hiero.jnlp (java version)
http://slick.cokeandcode.com/demos/hiero.jnlp (java version)
http://www.angelcode.com/products/bmfont/ (windows only)
http://glyphdesigner.71squared.com/ (Mac only)
http://www.bmglyph.com (Mac only)
http://tinyfont.com (Mac only)

Java editors vs. Windows editor:

The Windows editor is the official Angel Code editor
Java editors: run on Mac
Java editors: have additional features like shadow, gradient, blur

Creating a CCLabelBMFont

To create a CCLabelBMFont object you need to do:

1CCLabelBMFont *label =CCLabelBMFont::create(LongSentencesExample, "fonts/markerFelt.fnt", size.width/1.5, kCCTextAlignmentCenter);

Since the font is a fixed size you will need to carefully consider which font sizes you will need. Having a separate font for each size may be inefficient due to the amount of texture memory it takes. In this case it might make sense to scale down labels made with a suitable large font to achieve different sizes. Since the label is just a CCNode, you can do this with the scale properly.

 

Manipulating each character

Since CCLabelBMFont is a subclass of CCSpriteSheet you can manipulate each character as an CCSprite. The 1st character will be added with tag = 0, the 2nd character will be added with tag=1, and so on. Example:

1CCLabelBMFont *label =CCLabelBMFont::create("Bitmap Font Atlas" , "bitmapFontTest.fnt");
2CCSprite *char_B = label->getChildByTag(0); // character 'B'
3CCSprite *char_m = label->getChildByTag(3); // character 'm'

 

LabelAtlas

Introduction

CCLabelAtlas was the 1st fast label added into cocos2d. But it was superseded by CCBitmapFontAtlas. It is being maintained for backwards compatibility, but you should use CCBitmapFontAtlas instead.

Creating a LabelAtlas

1CCLabelAtlas* CCLabelAtlas::create(const char *string, const char *charMapFile, unsigned int itemWidth, int unsigned itemHeight, unsigned int startCharMap)

Example:

1CCLabelAtlas *label1 = CCLabelAtlas::create ("Hello World","tuffy_bold_italic-charmap.png",48,64 ,' ');

charMapFile is an image file that contains all the characters. Each character should be ordered according to its ASCII value and the

• image can't contain more than 256 characters.
• itemWidth is the width of the characters in pixels
• itemHeight is the height of the characters in pixels
• startCharMap is the first character of the map.
• Updating a LabelAtlas / BitmapFontAtlas

Like any object that you can update it using the setString method.

1label->setString("Hello World 2");

It is worth noting that updating a CCLabelAtlas or a CCBitmapFontAtlas has almost no penalty.

 

Alignment in LabelAtlas / BitmapFontAtlas

If you want to modify the alignment you can use the anchorPoint property. Example:

1//left alignment
2label->setAnchorPoint:(ccp(0, 0.5f));
3
4// right alignment
5label->setAnchorPoint( ccp(1, 0.5f));
6
7// center aligment (default)
8label->setAnchorPoint(ccp(0.5f, 0.5f));

 

CCLabelTTF vs. CCLabelAtlas

The main difference between CCLabelTTF and CCLabelAtlas is that the atlas version (like all the other atlas classes) uses one big texture with all the letters pre-rendered to draw a string. This means that the drawing is much faster, because if you draw 100 labels, the graphics processor doesn't have to read in 100 textures but just keep one texture in memory. But it also means that all the letters will be of a fixed size. If you want to get around the fixed-size limitation, use CCBitmapFontAtlas.

CCLabelTTF creates one texture for every label, whereas CCLabelAtlas renders the text on the fly, using the provided texture (containing all the characters), so using CCLabelAtlas results in lower memory consumption.

References

Labels and Fonts

 

come from:http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Text_Labels

转载于:https://www.cnblogs.com/Jzong/archive/2013/04/22/3035586.html