cocos2d-x实战 C++卷 学习笔记--第4章 使用标签

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了cocos2d-x实战 C++卷 学习笔记--第4章 使用标签相关的知识,希望对你有一定的参考价值。

前言:

介绍cocos2d-x中 标签类。

cocos2d-x中 标签类 主要有三种:LabelTTF, LabelAtlas, 和 LabelBMFont。此外,在Cocos2d-x 3.x之后推出了 新的标签类 Label。

LabelTTF 标签类

LabelTTF是使用系统中的字体,它是最简单的标签类。

create 静态函数完整定义:(此处只介绍一种常用的 create 静态方法)

1 static LabelTTF * create(const std::string& string, 
2       const std::string& fontName, 
3       float fontSize,
4       const Size& dimensions = Size::ZERO, 
5       TextHAlignment hAlignment = TextHAlignment::CENTER,
6       TextVAlignment vAlignment = TextVAlignment::TOP);

create函数的第1个参数是要显示的文字,第2个参数是系统字体名,第3个参数是字体的大小。后面省略了三个参数。

示例:

1     /////////// 4.2.1  LabelTTF
2     LabelTTF* labelOne = LabelTTF::create("LabelTTF Label.", "Arial", 24);
3     labelOne->setPosition(Point(origin.x + visibleSize.width / 2,     //// 字体居中显示
4         origin.y + visibleSize.height - labelOne->getContentSize().height));
5     this->addChild(labelOne, 2);

LabelAtlas 标签类

LabelAtlas 是图片集标签,其中的 Atlas 本意是“地图集”、“图片集”,这种标签显示的文字是从一个图片集中取出的,因此使用LabelAtlas需要额外加载图片集文件。

LabelAtlas 比 LabelTTF快很多。

LabelAtlas 中的每个字符必须有固定的高度和宽度。

create 静态函数完整定义:

1     static LabelAtlas* create(const std::string& string, 
2         const std::string& charMapFile, 
3         int itemWidth, 
4         int itemHeight, 
5         int startCharMap);

create 函数的第1个参数是要显示的文字,第2个参数是图片集文件,第3个参数是字符宽度,第4个参数是字符高度,第5个参数是开始字符。

示例:

1     ///////////// 4.2.2  LabelAtlas 
2     //创建 并初始化标签
3     auto labelTwo = LabelAtlas::create("LabelAtlas Label.", "Demo2/tuffy_bold_italic-charmap.png", 48, 66,  );
4     labelTwo->setPosition(Point(origin.x + visibleSize.width / 2 - labelTwo->getContentSize().width/2,  //// 字体居中显示 
5         origin.y + visibleSize.height - labelTwo->getContentSize().height * 2));
6 //    labelTwo->setAnchorPoint(ccp(0.5, 0.5));
7     this->addChild(labelTwo, 2);

注意:在 LabelAtlas 创建在字体中,anchorPoint默认好像是ccp(0,0) 的。你可以创建 LabelAtlas 字体 验证验证。

LabelBMFont 标签类

LabelBMFont是位图字体标签,需要添加字体文件:包括一个图片集(.png)和一个字符坐标文件(.fnt)。

LabelBMFont 比 LabelTTF 快很多。

LabelBMFont 中的每个字符的宽度是可变的。

create 静态函数完整定义:

1     static LabelBMFont * create(const std::string& str, 
2         const std::string& fntFile, 
3         float width = 0, 
4         TextHAlignment alignment = TextHAlignment::LEFT, 
5         const Point& imageOffset = Point::ZERO);

create 函数第1个参数是要显示的文字,第2个参数是图片集文件(.fnt)。

示例:

1     ///// 4.2.3   LabelBMFont
2     auto labelThree = LabelBMFont::create("hello LabelBMFont", "Demo3/BMFont.fnt");
3     labelThree->setPosition(Point(origin.x + visibleSize.width / 2 , 
4         origin.y + visibleSize.height - labelThree->getContentSize().height * 3));
5     this->addChild(labelThree, 2);

Cocos2d-x 3.x 标签类 Label

cocos2d-x 3.x 后推出了新的标签类Label,这种标签通过使用 FreeType 来使它在不同的平台上有相同的视觉效果。由于使用更快的缓存代理,它的渲染也将更加快速。Label 提供了描边和阴影等特性。

1     static Label* createWithSystemFont(const std::string& text,   /// 要显示的文字
2         const std::string& font,       /// 系统字体名
3         float fontSize,                /// 字体的大小
4         const Size& dimensions = Size::ZERO,  /// 在屏幕上占用区域的大小,可以省略
5         TextHAlignment hAlignment = TextHAlignment::LEFT,  /// 文字横向对齐方式,可以省略
6         TextVAlignment vAlignment = TextVAlignment::TOP);  /// 文字纵向对齐方式 ,可以省略

createWithSystemFont 示例:

通过 createWithSystemFont 函数创建 Label 对象

1     auto label1 = Label::createWithSystemFont("Hello Label1", "Arial", 36);
2     label1->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - label1->getContentSize().height));
3     this->addChild(label1, 3);

 

 

1     static Label * createWithTTF(const std::string& text,
2         const std::string& fontFile,   /// 字体文件
3         float fontSize,
4         const Size& dimensions = Size::ZERO,
5         TextHAlignment hAlignment = TextHAlignment::LEFT,
6         TextVAlignment vAlignment = TextVAlignment::TOP);

createWithTTF 示例:

通过 createWithTTF 创建 TTF 字体标签对象

1     auto label2 = Label::createWithTTF("Hello Label2", "fonts/Marker Felt.ttf", 36);
2     label2->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 100));
3     this->addChild(label2, 3);

 

 

1     static Label* createWithTTF(const TTFConfig& ttfConfig,
2         const std::string& text,
3         TextHAlignment alignment = TextHAlignment::LEFT,
4         int maxLineWidth = 0);

createWithTTF 示例:

通过 指定的 TTFConfig 创建 TTF 字体标签对象

 1     TTFConfig ttfConfig("fonts/Marker Felt.ttf", 36, GlyphCollection::DYNAMIC);
 2     auto label3 = Label::createWithTTF(ttfConfig, "Hello Label3");
 3     label3->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 150));
 4     this->addChild(label3, 3);
 5     ttfConfig.outlineSize = 4;
 6     auto label4 = Label::createWithTTF(ttfConfig, "hello Label4");
 7     label4->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 200));
 8     label4->enableShadow(Color4B(255, 255, 255, 128), Size(4, -4));
 9     label4->setColor(Color3B::RED);
10     this->addChild(label4, 3);

 

 

1     static Label* createWithBMFont(const std::string& bmfontFilePath, 
2         const std::string& text,
3         const TextHAlignment& alignment = TextHAlignment::LEFT, 
4         int maxLineWidth = 0,
5         const Point& imageOffset = Point::ZERO);

示例:

通过 createWithBMFont 创建位图字体标签对象

1     auto label5 = Label::createWithBMFont("Demo3/BMFont.fnt", "Hello Label5");
2     label5->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 250));
3     this->addChild(label5, 3);

 

补充说明:

Size visibleSize = Director::getInstance()->getVisibleSize();
Point origin = Director::getInstance()->getVisibleOrigin();

 

标签中文乱码问题:

 1     auto testLabel1 = LabelTTF::create("中国1", "Arial", 30);
 2     testLabel1->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 50));
 3     this->addChild(testLabel1, 4);
 4 
 5     auto testLabel2 = LabelBMFont::create("中国2", "bitmapFontChinese.fnt");
 6     testLabel2->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 100));
 7     this->addChild(testLabel2, 4);
 8 
 9     auto testLabel3 = Label::createWithBMFont("bitmapFontChinese.fnt", "中国3");
10     testLabel3->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 150));
11     this->addChild(testLabel3, 4);
12 
13     TTFConfig ttfConfig("STLITI.ttf", 36, GlyphCollection::DYNAMIC);
14     auto testLabel4 = Label::createWithTTF(ttfConfig, "晚上好!", TextHAlignment::CENTER, visibleSize.width);
15     testLabel4->setPosition(Point(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - 200));
16     this->addChild(testLabel4, 4);

在windows中文环境下使用Visual Studio创建的源程序文件是采用 GBK 编码。

解决方法:

方法1:在Visual Studio工具中选择【文件】-->【高级保存】,选择【Unicode(UTF-8无签名) - 代码页 65001】,单击确定按钮保存。

方法2:用记事本打开文件,另存为 UTF-8 。

 

以上是关于cocos2d-x实战 C++卷 学习笔记--第4章 使用标签的主要内容,如果未能解决你的问题,请参考以下文章

cocos2d-x实战 C++卷 学习笔记--第5章 精灵

cocos2d-x实战 C++卷 学习笔记--第7章 动作特效

cocos2d-x实战 C++卷 学习笔记--第6章 场景与层

《Cocos2d-x实战:C++》学习笔记——基础概念

《Cocos2d-x实战:C++》学习笔记——基础概念

《Cocos2d-x游戏开发实战精解》学习笔记3--在Cocos2d-x中播放声音