COCOS学习笔记--4种Label文字标签及其渲染特性

游戏开发中所有的文字信息的显示都会用到字体标签Label,比如玩家名字的显示、道具信息、公告栏通知等等。这篇博客就对Cocos2d-x的字体标签的使用做一下介绍。

Cocos3.0版本后废弃了之前的CCLabelTTF、CCLabelBMFont、CCLabelAtlas三个字体类,将其合并为一个字体标签类Label类。


Label类一共有4种方式创建字体标签,我们看一下这4种create方法:

  • Label* createWithSystemFont( );
  • Label* createWithTTF( );
  • Label* createWithBMFont( );
  • Label* createWithCharMap( );

 

下面我们依次来讲下每种字体创建和使用:

一.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种方式运行效果都是一样的,如下:

 COCOS学习笔记--4种Label文字标签及其渲染特性_第1张图片

 

 

五.Label文字的渲染特效:

Label文字有如下3种渲染特效

  • 阴影效果Shadow
  • 描边效果Outline,仅支持TTF
  • 发光效果Glow,仅支持TTF


我们分别看一下效果:

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引擎是识别不出汉字文件名的,我之前就犯过这样的低级错误导致字体显示不出来。

 

 




 以上。

 

 

 

你可能感兴趣的:(label,cocos2d-x,ttf,bmfont,CharMap)