Cocos2dx学习笔记《15》—— New Label

Cocos2dx学习笔记《15》—— New Label

【环境: Win7 64位 + Visual Studio 2012 + Cocos2d-x-3.3rc0】

Label文本标签,主要用于文字的显示,在cocos2dx的2.x版本中主要提供了 LabelTTF、LabelBMFont、LabelAtlas 三个类显示,而在3.x的版本中,将这三类融合为Label,进行统一的管理与渲染。


一. Label创建方式

1. create
1 static Label* create();

默认创建方式,不传递任何参数,创建完成后需要调用相关函数设置显示内容及属性,一般不用此方法。

2. createWithSystemFont
1 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);

通过平台依赖代码来调用原生API

Eg:

1 //使用系统的字体名称 "Arial" 来创建
2 Label* testLabel = Label::createWithSystemFont("Test:SystemFont", "Arial", 24);

3. createWithTTF——通过TTF方式来创建

它将字符串里的每个字符存储到缓存里,提高了创建字体的速度。两种创建方式:

3.1) 传递FontFile字体文件来创建

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

3.2) 通过TTFConfig配置来创建

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

Eg:

1 TTFConfig ttfConfig("fonts/msyh.ttf", 24, GlyphCollection::CUSTOM, "Test:TTFConfig");
2 auto testLabel= Label::createWithTTF(ttfConfig, "Test:TTFConfig");
4. createWithBMFont

通过此方式创建时,需要添加好字体文件,包含一个图片文件(.png)和一个字体坐标文件(.fnt)。可以通过fnt编辑器来自定义字体。

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

需要注意的是该方法无法指定设置字体大小,但可以通过setScale缩放方式来调整大小。

1 Label* testLabel = Label::createWithBMFont("fonts/arial-unicode-26.fnt", "Test:BMFont");

5. createWithCharMap  

类似与2.x版本的CCLabelAtlas,通常用于数字。 提供了三种创建方式:

5.1) 使用.png创建

1 static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);

Eg:

1 /create 字符图片.png,每个字符宽,高,起始字符
2 Label* testLabel = Label::createWithCharMap("fonts/digit.png", 20, 20, '0');
3 testLabel ->setString("123456"); //设置字符串内容

5.2) 使用Texture2D创建

1 static Label * createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);

Eg:

1 //创建图片纹理Texture2D
2 Texture2D* texture = TextureCache::getInstance()->addImage("fonts/digit.png");
3  
4 Label* testLabel = Label::createWithCharMap(texture, 20, 20, '0');
5 testLabel ->setString("123456"); //设置字符串内容

5.3) 使用.plist创建

1 static Label * createWithCharMap(const std::string& plistFile);

Eg:

1 //plist
2 Label* testLabel = Label::createWithCharMap("fonts/digit.plist");
3 testLabel ->setString("123456");

二. Label属性、方法 

1 class CC_DLL Label : public SpriteBatchNode, public LabelProtocol

Label继承于SrpiteBatchNode(用于加快字体的渲染速度)、LabelProtocol(用于设置Label的字符串内容)。

基本的属性方法可直接查看头文件即可,这里主要列举几个特效:

1. 对齐方式

TextHAlignment——水平对齐

TextHAlignment:LEFT 左对齐    TextHAlignment:CENTER居中对齐    TextHAlignment:RIGHT右对齐

TextVAlignment——垂直对齐

TextVAlignment:TOP 顶部对齐    TextVAlignment:CENTER居中对齐    TextVAlignment:BOTTOM 底部对齐

设置方法:(1). Label创建时传参设置;(2)调用setAlignment()方法设置。

(注:仅在设置了Label的尺寸大小setDimensions(width, height),大于显示的字符串内容的尺寸大小的时候才会起作用)

2. 文字间距

文字行间距:setLineHeight();

文字间间距:setAdditionalKerning();

3. 文字渲染

(1). Shadow阴影;(2). Outline轮廓,仅支持TTF;(3). Glow发光,仅支持TTF

(注:Outline与Glow效果无法同时使用)

4. 自动换行

方法:1)调用setLineBreakWithoutSpace(true)设置支持自动换行功能;2)通过setMaxLineWidth(maxLineWidth)或setDimensions(width, heigth)来控制自动换行。

5. 单独设置某个字符

在3.x版本中,用TTF、CharMap、BMFont创建的文字标签,其字符串内部的每个字符实际上都是都是一个Sprite精灵对象,可以对其进行单独的设置。比如精灵缩放、执行动作等等。(注:不支持SystemFont)

方法:1)label->getStringLength()获取字符串内容的总长度;2)label->getLetter(i)获取第i个位置上的字符。


三. 问题补充说明

1. 中文无法显示或乱码的问题?

解决方案:1. 编码转换,GBK转换为UFT或者从XML文件读取数据;2. 检查字体文件是否支持。(多数情况都是由编码问题引起的)

0
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值