Cocos2d-x 3.0 final Terminator series tutorial 14-New Label-Cocos2d-x official documentation

Contents

1. New text Label class Label
2. Other text labels
3. Introduction to font preparation tools
4. Summary

Https://github.com/chukong/cocos-docs/blob/master/manual/framework/native/v3/text-label/zh.md

Welcome to submit PR.

In game development, text plays a very important role. The introduction of the game, the prompts in the game and the dialogue need to use the text, the Cocos2d-x to the text rendering provides a flexible mechanism, you can use the system text, you can also use custom rendering font. In addition, text labels can be used to initialize menus.

During development, the four most common text labels are Label, LabelAtlas, LabelTTF, and LabelBMFont. 3.0 of them especially advocate Lable instead of LabelTTF and LabelBMFont, because the Label is faster in rendering. The following describes their usage in detail.

New text Label class Label

In 3.0, you can use the Label class to create any Label in LabelTTF and LabelBMFont. Different from the two labels, the new Label class inherits from the SpriteBatchNode class, this greatly improves the rendering speed. The following code lists several methods to create a Label:

auto newLabel1 = Label::create("New Label", "Arial", 30);  auto newLabel2 = Label::createWithBMFont("bitmapFontTest.fnt", "New Label");  newLabel1->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));  newLabel2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y - 100));  addChild(newLabel1);  addChild(newLabel2);  TTFConfig ttfConfig;  ttfConfig.fontSize = 30;  ttfConfig.fontFilePath = "Paint Boy.ttf";  auto label2 = Label::createWithTTF(ttfConfig, "New Label");  label2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y + 100));  addChild(label2);

In the above example, we use the new label class to create a LabelTTF label and a LabelBMFont label:

• By default, the create method creates a LabelTTF tag. The parameter is the same as that used to create a LabelTTF tag.
• Create a LabelBMFont tag using the createWithBMFont method. The first parameter is the file name, and the second parameter is the content to be displayed.
• The createWithTTF method uses the. ttf file to create a LabelTTF tag. Note that TTFConfig must be configured first to set the font size.

Other text labels

After the new label class is introduced above, let's look at the previous label class. Although 3.0 uses the new label class, some previous label classes can still be used for backward compatibility.

Image text LabelAtlas

The LabelAtlas class uses images as text, which directly uses images to initialize text objects. This class supports two file types for initialization:

• PNG file
• Plist File

The following code initializes a Text object using two different files:

auto label1 = LabelAtlas::create("PNG Test", "tuffy_bold_italic-charmap.png", 48, 64, ' ');  label1->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));  addChild(label1);  auto label2 = LabelAtlas::create("Plist Test", "tuffy_bold_italic-charmap.plist");  label2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y - 100));  addChild(label2);

The following describes the five parameters of LabelAtlas: create:

• First parameter: the content to be displayed for the tag
• The second parameter is the image Resource Name.
• The third parameter: the width of each character. This parameter is set when you create an image. The character width in the code above is 48px, which is determined during plotting.
• Fourth parameter: the height of each character. Similarly, the height of each character in the graph we use is 64px.
• Fifth parameter: Start character, which helps to find the first character

System font LabelTTF

The LabelTTF class uses the built-in font. If the font name is not provided when the LabelTTF object is created or the name does not exist in the system, the default font of the engine is used to initialize the object.

The engine provides two methods to create LableTTF:

• Create using the create method of LabelTTF class
• Use the createWithTTF method of the Label class, but the Label class is created through the. ttf file.

The following code uses LabelTTF and Label to create a Label:

auto label1 = LabelTTF::create("Create with LabelTTF", "Arial", 30);  label1->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));  addChild(label1);  TTFConfig ttfConfig;  ttfConfig.fontSize = 30;  ttfConfig.fontFilePath = "Paint Boy.ttf";  auto label2 = Label::createWithTTF(ttfConfig, "Create with Label");  label2->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y - 100));  addChild(label2);

Font gallery LabelBMFont

The LabelBMFont class is a bitmap-based font gallery. It is an image that contains all the characters that you need to display on the screen together with coordinate data. It allows the characters to be cut out from the main graph.

Run the following code to create a LabelBMFont object:

auto label = LabelBMFont::create("BMFont Test", "bitmapFontTest.fnt");    label->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));    addChild(label);

Introduction to font preparation tools

The Cocos2d-x supports many bitmap fonts that use the fnt file format. The following describes how to create a font gallery with a Mac font Designer in Glyph Designer (Hiero and BMFont can be used in Windows ):

• Step 1: Start Glyph Designer, select File> New, and type the expected font set name in the upper-left search box ("Helvetica" is used here ")
• Step 2: Set the font size to 32. By default, Glyph Designer automatically adjusts the font gallery size to the minimum possible value to adapt to all possible images.
• Step 3: select the color in the Glyph Fill on the right.
• Step 4: Click the NEHE button in the extended Glyph. Enter the characters you need in this area.
• Step 5: Click Export to Export the file
• Step 6: select the exported file type

Demonstrate the entire process

Summary

In game development, LabelTTF is suitable when standard fonts do not need to be changed frequently. Use LabelBMFont to customize text or frequently change text content. But 3.0 of the new tag classes solve this problem for you. You don't have to consider that type of tag, just use the new tag class.

Another function of the text label class is to initialize the menu. The usage of the menu is not described in detail here. The following code uses the text label to initialize the menu:

auto label = LabelBMFont::create("BMFont Test", "bitmapFontTest.fnt");    auto menuItemLabel = MenuItemLabel::create(label);    auto menu = Menu::create(menuItemLabel, NULL);    menu->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height / 2 + origin.y));    addChild(menu);