cocos2dx基础篇(6)——字体标签CCLabel

Cocos2d-x 2019-05-18

From: http://www.jb51.cc/article/p-fdmvdxhh-wx.html

【唠叨】

cclabelTTF、cclabelAtlas、cclabelBMFont。

cocos2dx提供了三种文字字体的显示：cclabelTTF（一般字体）、cclabelAtlas（自定义字体）、cclabelBMFont（自定义字体）。接下来给大家讲讲这三种字体的使用方法。


【Demo下载】

http://down.51cto.com/data/1863986


【3.x】

请移步：http://www.jb51.cc/article/p-zgqiddzs-wx.html



【cclabelTTF】

cclabelTTF是最简单且使用最方便的字体类，可以使用.ttf格式的字体。其父类为CCSprite，所以也继承了CCSprite所有的操作，故也可以将其当做CCSprite来用。

cclabelTTF每次调用 setString（即改变文字）的时候，一个新的OpenGL纹理将会被创建。这意味着setString和创建一个新的标签一样慢。所以，当你需要频繁的更新显示的文字内容的时候，尽可能不去使用该对象，而是使用cclabelAtlas或者是cclabelBMFont。


1、常用操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
//
class CC_DLLcclabelTTF: public CCSprite, cclabelProtocol
{
/**
* 创建cclabelTTF的三种方法
*/
//create(要显示的字符串,字体名称.ttf,字体大小);
ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,字体大小,尺寸大小CCSize,水平对其方式)
ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,水平对其方式,垂直对齐方式)
static cclabelTTF*create( const char *string,monospace!important; font-weight:normal!important; font-style:normal!important; font-size:1em!important; min-height:inherit!important; color:black!important">*fontName, float fontSize);
fontSize,153)!important">const CCSize&dimensions,CCTextAlignmenthAlignment);
ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,CCTextAlignmenthAlignment,CCVerticalTextAlignmentvAlignment);
/**
* 属性设置
* setString,
* setHorizontalAlignment,setVerticalAlignment,
* setDimensions,setFontSize,setFontName
*/
//显示的字符串内容
void setString( *label);
*getString( );
//水平对齐方式CCTextAlignment::
//kCCTextAlignmentLeft左对齐
//kCCTextAlignmentCenter居中，默认方式
//kCCTextAlignmentRight右对齐
setHorizontalAlignment(CCTextAlignmentalignment);
CCTextAlignmentgetHorizontalAlignment();
//垂直对齐方式CCVerticalTextAlignment::
//kCCVerticalTextAlignmentBottom底部
//kCCVerticalTextAlignmentCenter中心
//kCCVerticalTextAlignmentTop顶部，默认方式
setVerticalAlignment(CCVerticalTextAlignmentverticalAlignment);
CCVerticalTextAlignmentgetVerticalAlignment();
//尺寸大小
setDimensions( CCSize&dim);
CCSizegetDimensions();
//字体大小
setFontSize( fontSize);
getFontSize();
//字体类型名如Arial,宋体等
setFontName( *fontName);
*getFontName();
/**
* 继承自CCSprite常用函数
* 更多操作见：http://shahdza.blog.51cto.com/2410787/1539567
*/
setColor(ccColor3B); //设置颜色
setPosition(CCPoint); //设置位置
setRotation( ); //旋转角度,角度制0~360
setopacity( //设置透明度
setScale( //放缩
setFlipX( //左右翻转
}
//

2、代码举例

34
bool HelloWorld::init()
if (!cclayer::init()) return false ;
//获取可视区域尺寸大小
CCSizemysize=CCDirector::sharedDirector()->getVisibleSize();
//获取可视区域的原点位置
CCPointorigin=CCDirector::sharedDirector()->getVisibleOrigin();
//屏幕正中心位置
CCPointmidPos=ccp(mysize.width/2,mysize.height/2);
//创建cclabelTTF的三种方法
cclabelTTF*lb1=cclabelTTF::create( "aaaaaaaa" , "arial" ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,20);
cclabelTTF*lb2=cclabelTTF::create( "bbbbbbbb" "宋体" ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,40,CCSizeMake(50,100),CCTextAlignment::kCCTextAlignmentCenter);
cclabelTTF*lb3=cclabelTTF::create( "cccccc" "黑体" ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,CCSizeMake(480,320),CCTextAlignment::kCCTextAlignmentRight,CCVerticalTextAlignment::kCCVerticalTextAlignmentBottom);
//设置位置,屏幕中心
lb1->setPosition(midPos);
lb2->setPosition(midPos);
lb3->setPosition(midPos);
//添加到HelloWorld层中
this ->addChild(lb1);
->addChild(lb2);
->addChild(lb3);
//其他操作
lb1->setColor(ccc3(255,0)); //设置颜色ccc3
lb1->setRotation(60.0f); //旋转
lb2->setColor(cocos2d::ccBLUE); //设置颜色ccBLUE
lb3->setString( "helloworld!" //设置文字内容
}
3、运行结果


4、分析与总结

（1）lb2由于设置了其尺寸大小为CCSizeMake(50,100)，所以只显示了一部分的内容。

（2）lb3的对齐方式为右下角显示。

（3）cclabelTTF的锚点为（0.5,0.5）。



【cclabelAtlas】

cclabelAtlas一般常用来显示数字信息，如分数、排名等。因为只是数字所以也犯不上使用cclabelBMFont加载那么大的文字图像，所以使用这个比较合适。而资源一般来自一张.png图片，或.plist文件。不过它也可以用来显示其他字符，如英文字符。

当然cclabelAtlas继承于CCNode类，故可以使用父类的一些函数，如：放缩、旋转等操作。

并且图片中每个字符的大小必须是固定的，若要改变字体大小，只能通过放缩来实现。

例如如下图数字图片资源：


1、常用操作

21
CC_DLLcclabelAtlas: CCAtlasNode,0)!important">* 创建cclabelAtlas字体方法
//create(要显示的数字串,数字资源图片png,每个数字的宽,每个数字的高,图片第一个是什么数字)
//从图片中从左到右，一块一块截取。从数字startCharMap开始一一对应。
//第一块小图片对应数字startCharMap；第二块小图片对应数字startCharMap+1；第三块对应startCharMap+2……以此类推。
//注意：startCharMap为ASCII码，即数字'0'为48。
cclabelAtlas*create( *charMapFile,unsigned int itemWidth,monospace!important; font-weight:normal!important; font-style:normal!important; font-size:1em!important; min-height:inherit!important; color:black!important">itemHeight,monospace!important; font-weight:normal!important; font-style:normal!important; font-size:1em!important; min-height:inherit!important; color:black!important">startCharMap);
/**
* 设置字符串内容
* 注意：内容的文字必须是资源图片中存在的才可以！！！
*/
*label);
);
};
//

2、代码举例

10
//创建cclabelTTF的方法
cclabelAtlas*lb4=cclabelAtlas::create( "20140815" "fonts/digit.png" '0' );
//设置位置
lb4->setPosition(midPos);
//添加到HelloWorld层中
->addChild(lb4);
3、运行结果

4、分析与总结

（1）cclabelAtlas使用的图片资源的每块字符的大小必须是固定的，不然会出错。

（2）cclabelAtlas常常用来显示数字信息，如分数、排名等。但也可以用来显示英文字母。

（3）要改变字体大小，只能通过setScale进行放缩。

（4）锚点为（0,0）。



【cclabelBMFont】

cclabelBMFont文字是最快速最自由的字体类。

cclabelBMFont的父类是CCSpriteBatchNode，特色就是以占用更多内存为代价加快标签的更新，这与其他任何CCSprite类相似。cclabelBMFont相当于每次改变只改变了图片坐标，而cclabelTTF要重新渲染。

这个类使用之前，需要添加好字体文件，包括一个图片文件（*.png）和一个字体坐标文件（*.fnt），这两个文件名称必须一样。可以下载一个fnt编辑工具来自定义字体。

值得注意的是：它的每个字母或符号都是单独的一个CCSprite精灵，可以使用getChildByTag(i)来获取第i个位置上的字符，来对每个字符单独设置属性、动作等。

这个类没办法指定字体的字号，但可以用Scale属性进行缩放来调整大小。


1、常用操作

49
CC_DLLcclabelBMFont: CCSpriteBatchNode,monospace!important; font-weight:normal!important; font-style:normal!important; font-size:1em!important; min-height:inherit!important; color:black!important">cclabelProtocol,monospace!important; font-weight:normal!important; font-style:normal!important; font-size:1em!important; min-height:inherit!important; color:black!important">CCRGBAProtocol
* 创建cclabelBMFont方法
ottom:auto!important; float:none!important; left:auto!important; line-height:1.1em!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; text-align:left!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,字体资源名称.fnt)
cclabelBMFont*create( *str,monospace!important; font-weight:normal!important; font-style:normal!important; font-size:1em!important; min-height:inherit!important; color:black!important">*fntFile);
/**
* 属性设置
* setFntFile,setString,
* setAnchorPoint,setAlignment,setWidth,
* setScale,setColor,setopacity
*/
//设置字体资源名称.fnt
setFntFile( *fntFile);
*getFntFile();
//设置内容
virtual *newString);
//设置锚点
setAnchorPoint( CCPoint&var);
//水平对齐方式CCTextAlignment::
//kCCTextAlignmentLeft 左对齐
//kCCTextAlignmentCenter 居中
//kCCTextAlignmentRight 右对齐
setAlignment(CCTextAlignmentalignment);
//设置宽度?可是我用了好像都不知道是什么效果...
setWidth( width);
//放缩
scale);
setScaleX( scaleX);
setScaleY( scaleY);
//设置颜色
setColor( ccColor3B&color);
ccColor3B&getColor( );
//透明度0~255，其中255为不透明
setopacity(glubyteopacity);
};
2、代码举例

23
//创建两个cclabelBMFont字体
cclabelBMFont*lb5=cclabelBMFont::create( "hello" "fonts/bitmapFontTest.fnt" cclabelBMFont*lb6=cclabelBMFont::create( "world" );
//设置位置
lb5->setPosition(midPos);
lb6->setPosition(midPos-ccp(0,100));
//添加到Layer层中
->addChild(lb5);
->addChild(lb6);
//属性设置
lb5->setColor(ccRED); //设置字体颜色为红色
lb6->setString( "abc" //设置内容
//获取某个位置的字母,像精灵一样使用
CCSprite*lb5_c1=(CCSprite*)lb5->getChildByTag(0); //获取第0个字母h
CCSprite*lb5_c2=(CCSprite*)lb5->getChildByTag(3); //获取第3个字母l
lb5_c1->setColor(ccc3(0,255,0)!important">//设置为绿色
lb5_c2->setScale(2.0f); //放大
4、分析与总结

（1）cclabelBMFont的每个字符都是一个单独的CCSprite精灵，可以对每个字符单独进行设置。

（2）cclabelBMFont的使用功能是cclabel中最丰富最灵活的一个。

（3）锚点为（0.5,0.5）。

相关文章

如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点：杭州滨江邮箱：appdevzw@1...
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动！！！进入正题。下载资源1：从C...
Cocos2d-x 2 0 在Windows平台下的使用
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏，以及最近《...
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了，这里尝试...