Three ways to add display text labelttf, labelbmfont, and labelatlas to the cocos2d-x

There are three classes in the cocos2d-x that can add text in layers or in the genie:

• Labelttf
• Labelbmfont
• Labelatlas

Labelttf directly supports the use of the TTF font and supports all Chinese characters, but the efficiency is slightly lower. Labelbmfont is suitable for displaying specific texts. It increases the efficiency by generating text images in advance, but it cannot support all Chinese characters. Labelatlas is more suitable for you if there are not many characters in combination but the encoding of the text is continuous, such as numbers or English characters.

Labelttf

Labelttf: TTF (TrueType font) is a Font Specification. It is a font file format jointly launched by Apple and Microsoft. With the popularity of windows, it has become the most commonly used font file representation.

When using in Windows Phone, we need to save the font file under the resources \ fonts folder, ensure that the Cocos2d-x can find the font. Next, we will consider using the font consolas in the program to display a string.

In the system folder C: \ WINDOWS \ fonts, find the consolas font and copy it.

Copy to the resources \ fonts folder.

Note:

In andiord and iOS, the font is used by the font name instead of the font file name in the code. However, in Windows Phone, font names are used instead of actual font names.

The font file name we copied above is actually consola. TTF. To use this font later, you need to change the name of the font file to consolas. TTF. Or the font name should use consola.

In the code, you can use the font to create tags as follows.

LabelTTF *label = LabelTTF::create("exp:+1234567", "Consolas", 40);label->setPosition(visibleSize.width / 2, visibleSize.height / 2);addChild(label);

You can also use ttfconfig to reuse the font configuration information. You do not need to specify the font name and size each time.

TTFConfig ttfConfig("fonts/Consolas.ttf", 24);auto labelHello = Label::createWithTTF(ttfConfig, "Hello, TTFConfig");labelHello->setPosition(visibleSize.width / 2, visibleSize.height / 2);labelHello->setString("Reset String");addChild(labelHello);

How is text displayed on the UI? In fact, the label needs to extract the font from the font, create the image texture through the font, and then display it. If the font size is relatively large, such as the Chinese font size, we do not use all the text in the font size, a few MB font file will be a waste of space, and every time the texture is regenerated, it will be a waste of resources. We can consider not to use a font file, but directly prepare a text image and display it directly on the UI.

Labelbmfont

Every time labelttf calls setstring (that is, changing the text), a new OpenGL texture will be created .. This means that setstring is as slow as creating a new tag. Therefore, when you need to update them frequently, try not to use tag objects. Labelatlas or labelbmfont can help us achieve this effect.

First, we use a tool to help us extract fonts from the font files and generate the images we need. This tool is called bitmap font generator and can be downloaded directly.

Now there are two versions. We can use the latest v1.14 beta for processing. Install it first.

 

 

 

 

Start up

Set the font. We use to support Chinese characters.

In the displayed dialog box, select for specific settings.

Then, open notepad, create a text file, write the text you want to use, note that in the SAVE use you want to select the Utf-8 format.

Then, select chars Form file from the edit menu of Bitmap font generator to select the text file you just created, you will see in bitmap font generator that your text has been selected.

Now you can export the image.

View the Export Dialog Box.

This attribute is very important when padding is used to specify the size of the text surrounding the text and make the style later, we need to reserve space for special effects such as stroke and glow. For example, I expect to add a 2px border for my style and then add a 2px projection effect in the lower right corner, so I set the padding: 2px 4px 4px 2px

Bitdepth, which must be 32 bits; otherwise there is no transparent layer

Presets: Specifies the preset color channel settings for font initialization, that is, the initial color settings of the font. We recommend that you use white text to set it to white text with Alpha, that is, the transparent background of the white text.

Font descript: Specifies the font description file. It can be in text or XML format, that is, fnt.

Textures, texture image format, decisive PNG.

Finally, export the image file.

Finally, you can use it.

First, create a plist file in XML format in the resource to define the string we want to display. We saved the file directly under the resources directory named string. xml.

<? XML version = "1.0" encoding = "UTF-8"?> <Plist version = "1.0"> <dict> <key> name </key> <string> hello, Microsoft </string> </dict> </plist>

Copy the two font files we just generated to this directory.

CCDictionary *strings = CCDictionary::createWithContentsOfFile("string.xml");const char *charchinese = ((CCString*)strings->objectForKey("name"))->getCString();LabelBMFont *label = LabelBMFont::create(charchinese, "helloFont.fnt");label->setPosition(visibleSize.width / 2, visibleSize.height / 2);addChild(label);

After running the program, we can see the output and display the same text. We only need a 3.43 K image file.

If it cannot be used, check whether cc_font_label_support in ccconfig. H is enable.

Cclabelbmfont is equivalent to changing only the image coordinates each time, and the cclabelttf must be re-rendered. before using this class, you need to add a font file, including an image file (**. PNG) and a font coordinate file (**. fnt ). There is a ready-made in the example project of the cocos2d-x, You can first take it to practice, find out when the two files are the same name, but the extension is different.

The font size cannot be specified, but the scale attribute can be used to adjust the font size. That's when it's Sprite.

Labelatlas

If you have created a project using a cocos2d-x Project template, you have seen its effect, that is, the number of frame rates in the lower left corner. Because the frame rate keeps changing, it is too inefficient to use cclabelttf because it is only a number, so it is not recommended to use cclabelbmfont to load such a large text image. Therefore, this method is suitable.

For example, if we want to display 10 numbers ranging from 0 to 9, we can create these 10 numbers in an image. Each number has the same width and height. Save it in the resource. Do not forget to set replication.

 

More importantly, the ten numbers should be arranged in ASCII order, we need to set the ASCII encoding of the first character, so that the Cocos2d-x can directly calculate the corresponding graphics of different characters.

Cclabelatlas * dicecount = cclabelatlas: labelwithstring ("1:", "nums_font.png", 14, 21, '0 ');

The first parameter: The displayed content: 1x. You may wonder why it is 1x, because the PNG image used must be continuous, because the program internally recommends continuous scall codes. The ":" of the last digit of 9, so the ":" should be used to implement X first.

Second parameter: image name

Third parameter: the width of each number

Fourth parameter: the height of each number

Each five digits: Start character

LabelAtlas* diceCount = CCLabelAtlas::create("100:", "nums_font.png", 14, 21, ‘0‘);diceCount->setPosition(Point(visibleSize.width - 150, visibleSize.height / 2 - 50));addChild(diceCount);

 

Appendix:

Unity3d bmfont uses custom image fonts (no font files required)

 

Three ways to add display text labelttf, labelbmfont, and labelatlas to the cocos2d-x