游戏开发中所有的文字信息的显示都会用到字体标签Label,比如玩家名字的显示、道具信息、公告栏通知等等。这篇博客就对Cocos2d-x的字体标签的使用做一下介绍。
Cocos3.0版本后废弃了之前的CCLabelTTF、CCLabelBMFont、CCLabelAtlas三个字体类,将其合并为一个字体标签类Label类。
Label类一共有4种方式创建字体标签,我们看一下这4种create方法:
下面我们依次来讲下每种字体创建和使用:
一.createWithSystemFont
即使用cocos引擎的系统字库,创建字体标签,所有文本信息理论上都可以用它来做。
举例:
新建一个cocos工程,在HelloWorldScene.cpp的init()方法中添加一下代码:
//创建系统字体库的Label //参数:1.文本 2.字体库 3.字体大小 auto _systemLabel = Label::createWithSystemFont("systemLabel","Arail",30); this->addChild(_systemLabel);
运行效果:
另外,我们还可以改变文本内容和字体颜色:
//改变显示文本 _systemLabel->setString("changeSystemLabel"); //设置字体颜色 _systemLabel->setColor(Color3B(0,0,255));运行效果:
二.createWithTTF
即使用TTF字体库创建Label,创建时需要一个.ttf文件字体库。
在使用TTF字体库前我们需要将.ttf字体库文件添加到工程的可搜索路径下,比如Resources/res路径下。
举例:
//通过TTF字库创建Label auto _labelTTF = Label::createWithTTF("LabelTTF", "JDQT.TTF", 30); this->addChild(_labelTTF);
运行效果:
三.createWithBMFont
BMFont即使用用户自己编辑的字体库。其好处就是可通过图片编辑软件进行二次编辑效果,做出你想要的而文本样式,常用来做一些艺术字。使用该方法创建Label需要2个文件,一个是保存字体的.png文件,一个是保存字体信息的.fnt文件,字体库的这两个文件是通过一些软件做出来的;
举例:
auto _bmfont = Label::createWithBMFont("HWCY.fnt","BMFont"); this->addChild(_bmfont);
运行效果:
四.createWithCharMap
在3.0版本之前为CCLabelAtlas,主要用来显示0~9的数字,可以使用图片编辑软件二次编辑效果,做一些很炫的数字。
通过CharMap创建Label又可细分为3种方式,分别为:
1.直接使用.png图片创建
该方法直接使用一张.png图片即可。
举例:
我自己做了一张图digit.png,大小为850*100像素:
//通过一张图片直接创建charMap //参数:1.字符图片2.3.每个字符宽,高4.起始字符 auto _charMap = Label::createWithCharMap(“digit.png", 85, 100, '0'); //设置字符串内容 _charMap->setString("1234567");
2.使用Texture2D创建
此方法与前一方法基本相同,只不过通过图片先创建了一个纹理贴图,然后通过纹理贴图创建出charMap。
举例:
//先创建一个纹理贴图 Texture2D* texture = TextureCache::getInstance()->addImage(“digit.png"); //通过纹理贴图创建charMap //参数:1.纹理贴图2.3.每个字符宽,高4.起始字符 auto _charMap = Label::createWithCharMap(texture, 85, 100, '0'); _charMap->setString("1234567");
3.使用.plist创建
此方法创建charMap需要一张图片和一个.plist文件,图片资源、每个字符宽、高以及起始字符都需要在.plist文件中进行配置。
举例:
我们先看下digit.plist配置文件的内容:
<pre name="code" class="cpp"><?xml version="1.0" encoding="utf-8"?> <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>version</key> <!-- plist版本 --> <integer>1</integer> <key>textureFilename</key> <!-- 字符图片资源: digit.png --> <string>digit.png</string> <key>itemWidth</key> <!-- 每个字符的宽: 85 --> <integer>85</integer> <key>itemHeight</key> <!-- 每个字符的高: 100 --> <integer>100</integer> <key>firstChar</key> <!-- 起始字符 : '0' --> <integer>48</integer> </dict> </plist>可以看到配置文件里定义了每个字符的宽、高、起始字符等相关属性。
那么我们就可通过.plist文件创建字体Label:
auto _charMap= Label::createWithCharMap("digit.plist"); _charMap->setString("1234567");
以上3种方式,无论哪一种,都需要知道字符的宽和高,要么写在配置文件中,要么作为API参数传入。
3种方式运行效果都是一样的,如下:
五.Label文字的渲染特效:
Label文字有如下3种渲染特效
我们分别看一下效果:
1.阴影效果:
</pre><pre name="code" class="cpp">
//通过TTF字库创建Label auto _labelTTF = Label::createWithTTF("LabelTTF", "JDQT.TTF", 30); this->addChild(_labelTTF); //阴影效果 //参数:1.颜色 2.偏移量(上、右方向) 3.模糊半径 //_labelTTF->enableShadow(Color4B(0, 0, 255, 255), Size(3, 3), true);
运行效果:
2.描边效果:
//通过TTF字库创建Label auto _labelTTF = Label::createWithTTF("LabelTTF", "JDQT.TTF", 30); this->addChild(_labelTTF); //描边效果 //参数:1.颜色 2.宽度 _labelTTF->enableOutline(Color4B(0,0,255,255),4);
运行效果:
注意第二个参数可传入描边大小,大小不能为0,否则就看不到描边效果了。
3.发光效果:
//通过TTF字库创建Label auto _labelTTF = Label::createWithTTF("LabelTTF", "JDQT.TTF", 30); this->addChild(_labelTTF); //发光效果 _labelTTF->enableGlow(Color4B(0,0,255,255));
运行效果:
另外,如果想取消以上所有效果,可执行如下代码:
_labelTTF->disableEffect( );
最后,还有几点在使用Label文字标签时需要我们注意:
1.发光效果和描边效果只能存在一种,另外一种会被遮挡住,因为两者都是在字体外围进行操作;另外,描边效果和发光效果只能针对通过createWithTTF()方法创建出来的Label,其他方法创建出来的Label是不能添加这两种效果的;
2.在使用文本时要提前知道字体库支不支持你所使用的文字,如果字体库中没有你setString的文字默认是不显示的;
3.当我们使用自己字体库时,无论是.ttf格式的还是.fnt格式的,字体库文件名最好都是英文,避免汉字的文件名,比如“华文彩云.ttf”这样的,因为cocos引擎是识别不出汉字文件名的,我之前就犯过这样的低级错误导致字体显示不出来。
以上。