Use tags in Cocos2d-x Lua

Use tags in Cocos2d-x Lua
In game scenarios, the text includes static text and dynamic text. Static text is shown in "COCOS2DX" in the game scenario, and "Hello World" in the game scenario 4-1 in the dynamic text ".
Static text is usually drawn on the background image by the artist using Photoshop. The advantage of this method is that the expression is rich, for example: the "COCOS", "2D", and "X" in the "COCOS2DX" text are designed in different styles, while dynamic text is not, and static text cannot be accessed through a program, the content cannot be modified dynamically.
Dynamic text is generally accessed through a program and needs to be dynamically modified. The Cocos2d-x Lua can be implemented through the label class.
The text in the scene below we focus on the Cocos2d-x Lua in the label class, Cocos2d-x Lua in the label class mainly has three kinds: LabelTTF, LabelAtlas and LabelBMFont. In addition, a new Label class Label was introduced after Cocos2d-x 3. x.
LabelTTF
LabelTTF uses fonts in the system and is the simplest label class. As shown in the LabelTTF class diagram, LabelTTF inherits the Node class and has the basic features of Node. The LabelProtocol interface is also implemented.



LabelTTF class diagram

If we want to display the Hello World text shown in the figure, we can use LabelTTF.

The main code of the Hello World text LabelTTF implemented by LabelTTF is as follows:

Function GameScene: createLayer () local layer = cc. layer: create () // create and initialize the label local label = cc. labelTTF: create (Hello World, Arial, 64) ① label: setPosition (cc. p (size. width/2, size. height-label: getContentSize (). height) layer: addChild (label, 1) local sprite = cc. sprite: create(HelloWorld.png) sprite: setPosition (cc. p (size. width/2, size. height/2) layer: addChild (sprite, 0) return layerend

The first line of the above Code is to create a LabelTTF object. The first parameter of the create function is the text to be displayed, the second parameter is the system font name, and the third parameter is the font size, in fact, the create FUNCTION omitted three parameters. The complete definition of the create FUNCTION is as follows:

Cc. labelTTF: create (text, fontName, fontSize, dimensions = cc. size (0, 0), -- the size of the area occupied on the screen, cc. size (0, 0) indicates that hAlignment = cc is displayed according to the font size. TEXT_ALIGNMENT_LEFT, -- horizontal alignment. The default value is vAlignment = cc. VERTICAL_TEXT_ALIGNMENT_TOP) -- vertical alignment. The default value is top alignment.

The last three parameters have default values. If this parameter is not specified, the default values are used.
LabelAtlas
LabelAtlas is an image set label, in which Atlas is intended to be an "Gallery" or "image set". The text displayed by this label is extracted from an image set. Therefore, using LabelAtlas requires additional loading of image set files. LabelAtlas is much faster than LabelTTF. Each character in LabelAtlas must have a fixed height and width.
As shown in the LabelAtlas class diagram, LabelAtlas indirectly inherits the Node class, which has the basic features of Node and directly inherits the AtlasNode. The LabelProtocol interface is also implemented.

LabelAtlas class diagram

If we want to display the Hello World text shown in the figure, we can use LabelAtlas.

The main code of the Hello World text LabelAtlas implemented by LabelAtlas is as follows:

function GameScene:createLayer()    local layer = cc.Layer:create()    local label = cc.LabelAtlas:_create(HelloWorld, fonts/tuffy_bold_italic-charmap.png, 48, 66, string.byte( ))①    label:setPosition(cc.p(size.width/2  - label:getContentSize().width / 2,                           size.height - label:getContentSize().height))    layer:addChild(label, 1)        local sprite = cc.Sprite:create(HelloWorld.png)        sprite:setPosition(cc.p(size.width/2, size.height/2))    layer:addChild(sprite, 0)    return layerend

Line ① Of the above Code creates a LabelAtlas object. The first parameter of the create function is the text to be displayed, the second parameter is the image set file (SEE), and the third parameter is the character height, the fourth parameter is the character width and the fifth parameter is the start character.

When using LabelAtlas for image set files, note that image set files must be placed in the Resources directory.
LabelBMFont
LabelBMFont is a bitmap font label. You need to add a font file: package an image set (.png) and a font coordinate file (. fnt ). LabelBMFont is much faster than LabelTTF. The width of each character in LabelBMFont is variable.
As shown in the LabelBMFont class diagram, LabelBMFont can indirectly inherit the Node class, which has the basic features of Node and implements the LabelProtocol interface.
LabelBMFont class diagram

If we want to display the Hello World text, we can use LabelBMFont.

The main code of the Hello World text LabelBMFont implemented by LabelBMFont is as follows:

function GameScene:createLayer()    local layer = cc.Layer:create()    local label = cc.LabelBMFont:create(HelloWorld, fonts/BMFont.fnt)    ①    label:setPosition(cc.p(size.width/2,                           size.height - label:getContentSize().height))       layer:addChild(label, 1)    local sprite = cc.Sprite:create(HelloWorld.png)        sprite:setPosition(cc.p(size.width/2, size.height/2))    layer:addChild(sprite, 0)    return layerend

The first line of the above Code is to create a LabelBMFont object. The first parameter of the create function is the text to be displayed, and the second parameter is the image set file. As shown in figure BMFont. fnt, there is also a font coordinate file BMFont. fnt.

The BMFont. fnt code of the image set file coordinate file is as follows:

info face=AmericanTypewriter size=64 bold=0 italic=0 charset= unicode=0 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2common lineHeight=73 base=58 scaleW=512 scaleH=512 pages=1 packed=0page id=0 file=BMFont.pngchars count=95char id=124 x=2 y=2 width=9 height=68 xoffset=14 yoffset=9 xadvance=32 page=0 chnl=0 letter=|char id=41 x=13 y=2 width=28 height=63 xoffset=1 yoffset=11 xadvance=29 page=0 chnl=0 letter=)char id=40 x=43 y=2 width=28 height=63 xoffset=4 yoffset=11 xadvance=29 page=0 chnl=0 letter=(... ...char id=32 x=200 y=366 width=0 height=0 xoffset=16 yoffset=78 xadvance=16 page=0 chnl=0 letter=space

When using LabelBMFont, note that image set files and coordinate files must be placed in the Resources directory, with the same name. The image set and coordinate file can be made by the bitmap font tool, because the use of the bitmap font tool, please refer to the tool volume of this series of books ("Cocos2d-x practice: tool volume").
Cocos2d-x 3. x Label class Label
Cocos2d-x 3. A new Label class Label is introduced after x. By using FreeType [FreeType library, this Label is a completely free (Open Source), high-quality and portable font engine, it provides a unified interface to access multiple font format files. -- From Baidu encyclopedia http://baike.baidu.com/view/4579855.htm
] To make it have the same visual effect on different platforms. Because the cache proxy is faster, rendering will be faster. Label provides features such as stroke and shadow.
Shows the class diagram of the Label class.

To create a Label-Type Static create function, you can use the following methods:

Cc. label: createWithSystemFont (text, -- is the text font to be displayed, -- System fontSize, -- font size dimensions = cc. size (), -- can be omitted. Refer to LabelTTF to define vAlignment = cc. TEXT_ALIGNMENT_LEFT, -- can be omitted. Refer to LabelTTF to define vAlignment = cc. VERTICAL_TEXT_ALIGNMENT_TOP -- can be omitted, refer to LabelTTF definition) cc. label: createWithTTF (const std: string & text, fontFile, -- fontSize, dimensions = cc. size (0, 0), hAlignment = cc. TEXT_ALIGNMENT_LEFT, vAlignment = cc. VERTICAL_TEXT_ALIGNMENT_TOP) cc. label: createWithTTF (ttfConfig, -- font configuration information text, hAlignment = cc. TEXT_ALIGNMENT_LEFT, int maxLineWidth = 0 -- can be omitted, the maximum width of the label) cc. label: createWithBMFont (const std: string & bmfontFilePath, -- bitmap font file text, hAlignment = cc. TEXT_ALIGNMENT_LEFT, int maxLineWidth = 0, imageOffset = cc. p () -- can be omitted, offset in the bitmap)

CreateWithSystemFont is the system Font Tag object, createWithTTF is the TTF font tag object, and createWithBMFont is the bitmap Font Tag object.
CreateWithBMFont
Next we will introduce how to use them through an example. This is shown in the example.

The init function in HelloWorldScene. cpp is as follows:

Function GameScene: createLayer () local layer = cc. layer: create () local label1 = cc. label: createWithSystemFont (Hello World 1, Arial, 36) ① label1: setPosition (cc. p (size. width/2, size. height-100) layer: addChild (label1, 1) local label2 = cc. label: createWithTTF (Hello World 2, fonts/STLITI. ttf, 36) ② label2: setPosition (cc. p (size. width/2, size. height-200) layer: addChild (label2, 1) local label3 = cc. label: createWithBMFont (fonts/bitmapFontChinese. fnt, China) ③ label3: setPosition (cc. p (size. width/2, size. height-300) layer: addChild (label3, 1) local ttfConfig = {} ④ ttfConfig. fontFilePath = fonts/Marker Felt. ttf ttfConfig. fontSize = 32 local label4 = cc. label: createWithTTF (ttfConfig, Hello World4) ⑤ label4: setPosition (cc. p (size. width/2, size. height-400) layer: addChild (label4, 1) ttfConfig. outlineSize = 4 ⑥ local label5 = cc. label: createWithTTF (ttfConfig, Hello World5) 7label5: setPosition (cc. p (size. width/2, size. height-500) label5: enableShadow (cc. c4b (255,255,255,128), cc. size (4,-4) label5: setColor (cc. c3b (255, 0, 0) layer: addChild (label5, 1) return layerend

In the above Code, line ① creates a Label object through the createWithSystemFont function, and line ② Code creates a TTF font tag object through createWithTTF, the Code in line ③ is createWithBMFont, which is used to create a bitmap Font Tag object.
The Code in line ④ local ttfConfig = {} declares a TTFConfig variable. The TTFConfig attributes are as follows:

FontFilePath -- fontSize of the font file path, -- font size glyphs = cc. GLYPHCOLLECTION_DYNAMIC, -- mglyphs of the font library type -- outlineSize of the Custom font library -- distanceFieldEnabled of the Font Field

Line ⑤ code cc. Label: createWithTTF (ttfConfig, Hello World4) is to create the TTF font Label by specifying TTFConfig. Line 6 code ttfConfig. outlineSize = 4 sets the stroke field of TTFConfig. Line 7 Code cc. Label: createWithTTF (ttfConfig, Hello World5) is to recreate the TTF font Label.

Label5: enableShadow (cc. c4b (255,255,255,128), cc. size (4,-4) is used to set the label shadow. The first line of code label5: setColor (cc. c3b (255, 0, 0) is to set the color of the tag.