Shulou(Shulou.com)06/02 Report--

This article shows you how to understand the new font tag Label in cocos2dx, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

[nagging]

In 3.x, the three font classes of LabelTTF, LabelAtlas and LabelBMFont in 2.x were abandoned and replaced by a brand new font label Label.

In fact, Label is the integration of the three font classes, unified management and rendering, which makes the way to create font tags Label more unified and convenient.

To learn the new tag class Label in 3.x, if you do not understand the three font classes in 2.x, it is recommended to take a look at the usage of those three classes, and then learn this section for a better understanding.

[this section]

In 3.x, Label supports four ways of label creation. And added shadow Shadow, outline Outline, luminous Glow effect support. It also supports the settings of line spacing, text spacing and automatic line wrapping of text content.

Create system native font API: createWithSystemFont

> create TTF: createWithTTF (formerly LabelTTF)

> create CharMap: createWithCharMap (formerly LabelAtlas)

> create BMFont: createWithBMFont (formerly LabelBMFont)

Properties and methods of Label

> text effect rendering: Shadow, Outline, Glow

> alignment: TextHAlignment, TextVAlignment

The size of Label

Automatic line wrapping

> Line spacing, text spacing

Setting a character individually

For picture resources, please look in the official sample cpp-tests given by cocos2dx.

[createWithSystemFont]

Create an API for system native fonts.

It is created as follows:

/ / static Label* createWithSystemFont (const std::string& text, / / string content const std::string& font, / / font (font name, or font file) float fontSize / / font size const Size& dimensions = Size::ZERO, / / size of label TextHAlignment hAlignment = TextHAlignment::LEFT, / / horizontal alignment is not set by default, left alignment is default:: LEFT TextVAlignment vAlignment = TextVAlignment::TOP / / vertical alignment, default top:: TOP) / /

Examples of use:

/ / use the system's font name "Arial" to create Label* lb1 = Label::createWithSystemFont ("123abc", "Arial", 24); / /

[createWithTTF]

There are two ways to create a TTF:

> method 1: similar to the creation of LabelTTF in 2.x, but the fontFile used must be a font file.

> method 2: create it through the configuration information data structure TTFConfig of TTF.

1. Method 1: similar to the creation of System Font

Note: the difference is that fontFile must be a font file (such as "* .ttf"), that is, it does not support creation using system font names.

/ / static Label* createWithTTF (const std::string& text, const std::string& fontFile, / / must be a font file (e.g. "* .ttf") float fontSize, const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT, TextVAlignment vAlignment = TextVAlignment::TOP); / /

2. Method 2: create through TTFConfig configuration

2.1By TTFConfig configuration

/ / typedef struct _ ttfConfig {std::string fontFilePath; / / font file path, such as "fonts/Arial.ttf" int fontSize; / / font size, character set used by default "12" GlyphCollection glyphs; / /, default "DYNAMIC" const char * customGlyphs; bool distanceFieldEnabled / / whether to make the font compact. Default is false int outlineSize. / / font outline size Default "0" / / constructor _ ttfConfig (const char* filePath = "", int size = 12, const GlyphCollection& glyphCollection = GlyphCollection::DYNAMIC, const char* customGlyphCollection = nullptr Bool useDistanceField = false, int outline = 0) } TTFConfig;//

Use TTFConfig to create TTF

/ / static Label* createWithTTF (const TTFConfig& ttfConfig, / / TTFConfig configure const std::string& text, / / string content TextHAlignment alignment = TextHAlignment::LEFT, int maxLineWidth = 0 / / maximum text line width, 0 means not set. Can be used for automatic line wrapping only); / /

Examples of use:

/ / TTFConfig ttfConfig; ttfConfig.fontFilePath = "fonts/Marker Felt.ttf"; / / must be configured with ttfConfig.fontSize = 12; ttfConfig.distanceFieldEnabled = false; ttfConfig.outlineSize = 0; ttfConfig.glyphs = GlyphCollection::DYNAMIC; ttfConfig.customGlyphs = nullptr; / / use TTFConfig configuration to create TTF Label* lb3 = Label::createWithTTF (ttfConfig, "123abc"); / /

[createWithCharMap]

The use of CharMap is the same as that of LabelAtlas in 2.x, and is generally used to display numbers. However, it can also be used to display other characters, such as English characters.

Font file resources typically come from a .png image, or a .plist file.

Note: the size of each character in the picture must be fixed. If you want to change the font size, you can only achieve it through setScale scaling.

There are three ways to create a CharMap:

Using .png pictures to create

Creating using texture Texture2D

Create using .plist

Intercept piece by piece from left to right in the picture. Start with the character startCharMap and correspond one to one.

The first small picture corresponds to the character startCharMap;, the second small picture corresponds to the character startCharMap+1;, and the third corresponds to startCharMap+2. and so on.

Note: startCharMap is ASCII code, that is, the number'0' is 48.

/ charMapFile: character resources picture png / / itemWidth: width of each character / / itemHeight: height of each character / / startCharMap: what is the first character in the picture static Label* createWithCharMap (const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap); static Label* createWithCharMap (Texture2D* texture, int itemWidth, int itemHeight, int startCharMap) Static Label* createWithCharMap (const std::string& plistFile); / /

0. Character picture resources

Digit.png:200*20 (20-20 for each number).

1. Create using .png

/ create character picture .png, each character width, height, starting character Label* lb4 = Label::createWithCharMap ("fonts/digit.png", 20,20,'0'); lb4- > setString ("123456"); / / set string content / /

2. Create using Texture2D

The method of use is actually similar to .png.

/ create image texture Texture2D Texture2D* texture = TextureCache::getInstance ()-> addImage ("fonts/digit.png"); Label* lb5 = Label::createWithCharMap (texture, 20,20,'0'); lb5- > setString ("123456"); / / set string content / /

3. Create using .plist

In digit.plist, you need to configure: the character picture resource used. PNG, the width and height of each character, and the starting character.

As follows:

/ / version 1 textureFilename digit.png itemWidth 20 itemHeight 20 firstChar 48 / /

How to create a CharMap using plist:

/ configuration information of plist, as shown above: Label* lb6 = Label::createWithCharMap ("fonts/digit.plist"); lb6- > setString ("123456"); / /

[createWithBMFont]

The use of BMFont is the same as LabelBMFont in 2.x.

Before using this class, you need to add a font file, including an image file (* .png) and a font coordinate file (* .fnt), both of which must have the same name. You can download a fnt editing tool to customize fonts.

It is worth noting that:

> in 2.x, you can use getChildByTag (I) to get the first character and set its properties, actions, and so on separately.

> in 3.x, getLetter (I) is used instead of getChildByTag (I).

This class also has no way to specify the font size, which needs to be scaled and resized with setScale.

/ / static Label* createWithBMFont (const std::string& bmfontFilePath, / / font file. Font const std::string& text, / / content const TextHAlignment& alignment = TextHAlignment::LEFT, int maxLineWidth = 0, const Vec2& p_w_picpathOffset = Vec2::ZERO / / the coordinates of the upper left corner of the character image. Generally do not set this parameter, because the coordinates have been configured in .font); / /

Examples of use:

/ Label* lb7 = Label::createWithBMFont ("bitmapFontTest.fnt", "123abc", TextHAlignment::LEFT); / /

[properties and methods of Label]

Label inherits from:

> SpriteBatchNode: used to speed up the rendering of fonts.

> LabelProtocol: used to set the string content of Label.

The main functions are as follows:

/ / class CC_DLL Label: public SpriteBatchNode Public LabelProtocol {/ * font settings *-setSystemFontName: font (font name, font file) *-setSystemFontSize: font size *-setString: string content *-setTextColor: text content color * * / / sets the font of SystemFont type (font name, Font file) / / set the font size of System Font type / / Please do not use it for other Label types! (TTF, CharMap, BMFont) virtual void setSystemFontName (const std::string& systemFont); virtual void setSystemFontSize (float fontSize); virtual const std::string& getSystemFontName () const {return _ systemFont;} virtual float getSystemFontSize () const {return _ systemFontSize } / / change the string contents and render again / / Note: if you do not set TTF/BMFont/CharMap for Label, it will incur a lot of overhead virtual void setString (const std::string& text) override; virtual const std::string& getString () const override {return _ originalUTF8String } / / sets text color, only supports TTF and System Font / / Note: distinguish the color of Node node / / Node:: setColor: Color3B / / Label::setTextColor: Color4B virtual void setTextColor (const Color4B& color); const Color4B& getTextColor () const {return _ textColor } / * get a character of Label *-getLetter *-does not support System Font * * / / does not support System Font virtual Sprite* getLetter (int lettetIndex) / * text rendering effect *-Shadow: shadow *-Outline: outline, only TTF *-Glow: luminous, only TTF * * / / Shadow Shadow (shadow color, offset from Label) is supported Ambiguity) / / Note: blurRadius does not implement virtual void enableShadow in 3. 2 (const Color4B& shadowColor = Color4B::BLACK,const Size & offset = Size, int blurRadius = 0) / / Contour Outline, only supports TTF (outline color, outline weight) virtual void enableOutline (const Color4B& outlineColor,int outlineSize =-1); / / Glow Glow, only supports TTF virtual void enableGlow (const Color4B& glowColor); / / Unshadows / contours / Glow rendering effects virtual void disableEffect () / * alignment * > TextHAlignment: horizontal alignment *-TextHAlignment:LEFT: left alignment *-TextHAlignment:CENTER: Center alignment, default *-TextHAlignment:RIGHT: right alignment * > TextVAlignment: vertical alignment *-TextVAlignment::TOP: top Default *-TextVAlignment::CENTER: Center *-TextVAlignment::BOTTOM: bottom * * / set alignment void setAlignment (TextHAlignment hAlignment) {setAlignment (hAlignment,_vAlignment) } void setAlignment (TextHAlignment hAlignment,TextVAlignment vAlignment); TextHAlignment getTextAlignment () const {return _ hAlignment;} / / set horizontal alignment void setHorizontalAlignment (TextHAlignment hAlignment) {setAlignment (hAlignment,_vAlignment);} TextHAlignment getHorizontalAlignment () const {return _ hAlignment;} / / set vertical alignment void setVerticalAlignment (TextVAlignment vAlignment) {setAlignment (_ hAlignment,vAlignment);} TextVAlignment getVerticalAlignment () const {return _ vAlignment } / * Label size *-setLineBreakWithoutSpace: enable automatic line wrapping *-setMaxLineWidth: maximum line width of text content *-setWidth: Label size, width *-setHeight: Label size High *-setDimensions: Label size * * / / whether to enable automatic line wrapping void setLineBreakWithoutSpace (bool breakWithoutSpace) / / maximum line width, if the content exceeds MaxLineWidth, the line will be wrapped automatically / / prerequisite: it works only when width==0. / / > width = = 0; / / > setMaxLineWidth (lineWidth); / / > setLineBreakWithoutSpace (true); / / its effect is similar to that below. / / > setWidth (lineWidth); / / > setLineBreakWithoutSpace (true); / / just width==0, you cannot set the alignment of the text. Void setMaxLineWidth (unsigned int maxLineWidth); unsigned int getMaxLineWidth () {return _ maxLineWidth;} / / set the size of Label / / can be understood as the text box size of Label / / when the content exceeds width when setLineBreakWithoutSpace (true), the content will automatically wrap / / and the content supports text alignment / / Note: set the size, using setDimensions, not setContentSize! Void setWidth (unsigned int width) {setDimensions (width,_labelHeight);} void setHeight (unsigned int height) {setDimensions (_ labelWidth,height);} void setDimensions (unsigned int width,unsigned int height); unsigned int getWidth () const {return _ labelWidth;} unsigned int getHeight () const {return _ labelHeight;} const Size& getDimensions () const {return _ labelDimensions } / * * v3.2 added *-setLineHeight: set line spacing *-setAdditionalKerning: set text spacing *-getStringLength: string content length * / / set line spacing, does not support system font void setLineHeight (float height); float getLineHeight () const / / sets text spacing, does not support system font void setAdditionalKerning (float space); float getAdditionalKerning () const; / / gets the string content length of Label int getStringLength () const / * method for overriding the Node parent class *-setBlendFunc: mixed mode *-setScale: scaling font size *-addChild: adding child nodes *-getDescription: displaying the description of Label * * / / setting the color mixing mode virtual void setBlendFunc (const BlendFunc & blendFunc) override / / scale font size (generally used for CharMap, BMFont) virtual void setScale (float scale) override; virtual void setScaleX (float scaleX) override; virtual void setScaleY (float scaleY) override; virtual float getScaleX () const override; virtual float getScaleY () const override; / / add child node virtual void addChild (Node * child, int zOrder=0, int tag=0) override; virtual void sortAllChildren () override / / Label describes virtual std::string getDescription () const override;}; / /

[text rendering effect]

Three rendering effects are supported:

> Shadow: shadow

> Outline: outline. Only TTF is supported.

> Glow: luminous. Only TTF is supported.

Note: only one of the two effects, Outline and Glow, works. That is, they cannot be used together.

Examples of use:

/ / Label* lb = Label::createWithTTF ("123abc", "fonts/Marker Felt.ttf", 50); lb- > setPosition (visibleSize / 2); this- > addChild (lb); lb- > enableShadow (Color4B::GREEN, Size (10,10)); / / Shadow lb- > enableOutline (Color4B::RED, 3); / / outline / lb- > enableGlow (Color4B::GREEN) / / Glow / / cancel shadows, contours, glow effects / / lb- > disableEffect (); / /

As shown in the figure:

[alignment]

> TextHAlignment: horizontal alignment

-TextHAlignment:LEFT: align to the left

-TextHAlignment:CENTER: Center alignment, default

-TextHAlignment:RIGHT: align right

> TextVAlignment: vertical alignment

-TextVAlignment::TOP: top, default

-TextVAlignment::CENTER: Center

-TextVAlignment::BOTTOM: bottom

It works only if the Label size setDimensions (width,height) is set, which is larger than the size of the displayed string contents.

An example of alignment is shown in the following pictures:

The alignment is:

> TextHAlignment:LEFT

> TextVAlignment::TOP

[automatic line wrapping]

In 3.x, there are two ways to wrap lines automatically. (of course, you can also use the transfer character'\ n' in C++ to wrap the line manually)

> use lb- > setLineBreakWithoutSpace (true) to support automatic line wrapping.

> 1. Use setMaxLineWidth (maxLineWidth) to control automatic line wrapping.

> 2. Use setDimensions (width, height) to control automatic line wrapping.

1. Make use of setMaxLineWidth

Sets the maximum width of each line of displayed text.

Note: this method is effective only if Label width = = 0.

How to use it:

/ / lb- > setLineBreakWithoutSpace (true); lb- > setMaxLineWidth (120); / / maximum width 120max /

As shown in the figure:

2. Make use of setDimensions

How to use it:

/ / lb- > setLineBreakWithoutSpace (true); lb- > setWidth (80); / / set Label size width 80 lb- > setMaxLineWidth (120); / / if Label width is set, this is invalid / /

As shown in the figure:

[text spacing]

The adjustment of spacing did not occur until after v3.2. You can set the line spacing and text spacing of text content.

Note: System Font is not supported.

> setLineHeight: set line spacing

> setAdditionalKerning: set extra text spacing

Examples of use:

/ lb- > setLineHeight (80); lb- > setAdditionalKerning (10); / /

Illustration:

[set a character separately]

Students who have studied LabelBMFont in 2.x should know what this is all about, right?

In 3.x, each character of the string content of a text label created using TTF, CharMap, and BMFont is a Sprite wizard image, which can be set separately. Such as elves zooming out, performing actions, etc.

Note: System Font is not supported.

> lb- > getStringLength (): gets the total length of the string content

> lb- > getLetter (I): get the character in the first position

Examples of use:

/ / Label* lb = Label::createWithTTF ("123abc", "fonts/Marker Felt.ttf", 50); lb- > setPosition (visibleSize / 2); this- > addChild (lb); / / get the total string length, length = 6 CCLOG ("% d", lb- > getStringLength ()); / / get the first character Sprite* letter1 = lb- > getLetter (1) Letter1- > setColor (Color3B::GREEN); / / set color letter1- > setScale (2.0f); / / scale / / get the fourth character Sprite* letter4 = lb- > getLetter (4); letter4- > setColor (Color3B::RED); / / set color letter4- > runAction (RepeatForever::create (1.0f, 90)); / / perform rotation / /

As shown in the figure:

The above is how to understand the new font tag Label in cocos2dx. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.