Cocos2dx game tutorial: use of Label

In creating the second scene, we not only see the creation of Menu, but also see the following creation methods?

//Checkpoint number
 auto levelTTF = Label::createWithCharMap("fonts/label/label_ball.png", 14, 20, '0');
 levelTTF->setString(StringUtils::format("%d", 1));
 levelTTF->setPosition(level->getContentSize() / 2);
 level->addChild(levelTTF);

Is it shown as the figure below?

In this section, we will mainly introduce how to create cocos2dx Label.

1, About Label

cocos2dx in 3.x, Label supports four ways of Label creation. It also adds Shadow, Outline and Glow effects. It also supports the setting of line spacing, text spacing and automatic line wrapping of text content.

In 3.x, the CCLabelTTF, CCLabelAtlas, and CCLabelBMFont in 2.x are discarded, and the brand-new font Label is replaced.
In fact, Label integrates the three font classes for unified management and rendering, which makes the way of creating font Label more unified and convenient.

As shown in the figure below, the following four creation methods are supported in 3.x, and the creation methods are described in detail below.

2, How to create a Label

1,createWithSystemFont
As the name implies, the font is created through the system font
Let's take a look at the function prototype

static Label* createWithSystemFont(const std::string& text, const std::string& font, float fontSize,
    	const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);

Usage mode

auto label = Label::createWithSystemFont("hello", "Arial", 24);
label ->setPosition(100, 100);
this->addChild(label );

Create a "hello" text using the "Arial" system font with a font size of 24
Set the label label to the position in the screen (100100)
Add label to the object referred by this

2,createWithTTF
Function prototype, there are two ways

static Label * createWithTTF(const std::string& text, const std::string& fontFilePath, float fontSize,
        const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
        TextVAlignment vAlignment = TextVAlignment::TOP);
        
static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, 
        TextHAlignment hAlignment = TextHAlignment::LEFT, int maxLineWidth = 0);

Using method, take the first one as an example, ttfConfig under the second construction, which is similar to the first one

auto label = Label::createWithTTF("hello", "fonts/arial.ttf", 24);
label ->setPosition(100, 100);
this->addChild(label );

3,createWithBMFont
Function prototype

static Label* createWithBMFont(const std::string& bmfontPath, const std::string& text,
        const TextHAlignment& hAlignment = TextHAlignment::LEFT, int maxLineWidth = 0,
        const Vec2& imageOffset = Vec2::ZERO);

usage method,

auto label = Label::createWithBMFont("font.fnt","hello");
label ->setPosition(100, 100);
this->addChild(label )

4,createWithCharMap
Function prototype, there are three ways

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);

(1) Use png to create. You are familiar with it. It is the creation method we used above

//Checkpoint number
 auto levelTTF = Label::createWithCharMap("fonts/label/label_ball.png", 14, 20, '0');
 levelTTF->setString(StringUtils::format("%d", 1));
 levelTTF->setPosition(level->getContentSize() / 2);
 level->addChild(levelTTF);

(2) Create with texture

Texture2D* texture = TextureCache::getInstance()->addImage("fonts/label/label_ball.png");
auto lable = Label::createWithCharMap(texture, 14, 20, '0');
lable->setString("1"); 
label ->setPosition(100, 100);
this->addChild(label )

(3) Create with plist

auto lable = Label::createWithCharMap("fonts/label_ball.plist");
lable->setString("1");
label ->setPosition(100, 100);
this->addChild(label )

plist here is a file format, which records the image names of characters used. The width, height and starting position of each character are the most common ones. You can try to use it in different ways.

Through the learning of this section, do you know something about Label? In the next section, let's load the game data, and the level will read and display from the file

34 original articles published, 15 praised, 40000 visitors+
Private letter follow

Posted on Tue, 17 Mar 2020 08:10:22 -0400 by fcaserio