From: http://shahdza.blog.51cto.com/2410787/1541002
【唠叨】
CCLabelTTF、CCLabelAtlas、CCLabelBMFont。
cocos2dx提供了三种文字字体的显示:CCLabelTTF(一般字体)、CCLabelAtlas(自定义字体)、CCLabelBMFont(自定义字体)。接下来给大家讲讲这三种字体的使用方法。
【Demo下载】
http://down.51cto.com/data/1863986
【3.x】
请移步:http://shahdza.blog.51cto.com/2410787/1560612
【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_DLL CCLabelTTF :
public
CCSprite,
public
CCLabelProtocol
{
/**
* 创建CCLabelTTF的三种方法
*/
//create(要显示的字符串,字体名称.ttf,字体大小);
//create(要显示的字符串,字体名称.ttf,字体大小,尺寸大小CCSize,水平对其方式)
//create(要显示的字符串,字体名称.ttf,字体大小,尺寸大小CCSize,水平对其方式,垂直对齐方式)
static
CCLabelTTF* create(
const
char
*string,
const
char
*fontName,
float
fontSize);
static
CCLabelTTF* create(
const
char
*string,
const
char
*fontName,
float
fontSize,
const
CCSize& dimensions, CCTextAlignment hAlignment);
static
CCLabelTTF* create(
const
char
*string,
const
char
*fontName,
float
fontSize,
const
CCSize& dimensions, CCTextAlignment hAlignment, CCVerticalTextAlignment vAlignment);
/**
* 属性设置
* setString ,
* setHorizontalAlignment , setVerticalAlignment ,
* setDimensions , setFontSize , setFontName
*/
//显示的字符串内容
void
setString(
const
char
*label);
const
char
* getString(
void
);
//水平对齐方式CCTextAlignment::
//kCCTextAlignmentLeft 左对齐
//kCCTextAlignmentCenter 居中,默认方式
//kCCTextAlignmentRight 右对齐
void
setHorizontalAlignment(CCTextAlignment alignment);
CCTextAlignment getHorizontalAlignment();
//垂直对齐方式CCVerticalTextAlignment::
//kCCVerticalTextAlignmentBottom 底部
//kCCVerticalTextAlignmentCenter 中心
//kCCVerticalTextAlignmentTop 顶部,默认方式
void
setVerticalAlignment(CCVerticalTextAlignment verticalAlignment);
CCVerticalTextAlignment getVerticalAlignment();
//尺寸大小
void
setDimensions(
const
CCSize &dim);
CCSize getDimensions();
//字体大小
void
setFontSize(
float
fontSize);
float
getFontSize();
//字体类型名 如Arial,宋体等
void
setFontName(
const
char
*fontName);
const
char
* getFontName();
/**
* 继承自CCSprite常用函数
* 更多操作见:http://shahdza.blog.51cto.com/2410787/1539567
*/
setColor(ccColor3B);
//设置颜色
setPosition(CCPoint);
//设置位置
setRotation(
float
);
//旋转角度,角度制0~360
setOpacity(
float
);
//设置透明度
setScale(
float
);
//放缩
setFlipX(
float
);
//左右翻转
}
//
|
2、代码举例
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
|
//
bool
HelloWorld::init()
{
if
( !CCLayer::init() )
return
false
;
//获取可视区域尺寸大小
CCSize mysize = CCDirector::sharedDirector()->getVisibleSize();
//获取可视区域的原点位置
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
//屏幕正中心位置
CCPoint midPos = ccp(mysize.width/2, mysize.height/2);
//创建CCLabelTTF的三种方法
CCLabelTTF* lb1 = CCLabelTTF::create(
"aaaaaaaa"
,
"arial"
, 20);
CCLabelTTF* lb2 = CCLabelTTF::create(
"bbbbbbbb"
,
"宋体"
, 40, CCSizeMake(50,100), CCTextAlignment::kCCTextAlignmentCenter);
CCLabelTTF* lb3 = CCLabelTTF::create(
"cccccc"
,
"黑体"
, 40, CCSizeMake(480,320), CCTextAlignment::kCCTextAlignmentRight, CCVerticalTextAlignment::kCCVerticalTextAlignmentBottom);
//设置位置,屏幕中心
lb1->setPosition( midPos );
lb2->setPosition( midPos );
lb3->setPosition( midPos );
//添加到HelloWorld层中
this
->addChild(lb1);
this
->addChild(lb2);
this
->addChild(lb3);
//其他操作
lb1->setColor( ccc3(255, 0, 0) );
//设置颜色ccc3
lb1->setRotation(60.0f);
//旋转
lb2->setColor( cocos2d::ccBLUE );
//设置颜色ccBLUE
lb3->setString(
"hello world!"
);
//设置文字内容
}
//
|
3、运行结果
4、分析与总结
(1)lb2由于设置了其尺寸大小为CCSizeMake(50,100),所以只显示了一部分的内容。
(2)lb3的对齐方式为右下角显示。
(3)CCLabelTTF的锚点为(0.5,0.5)。
【CCLabelAtlas】
CCLabelAtlas一般常用来显示数字信息,如分数、排名等。因为只是数字所以也犯不上使用CCLabelBMFont加载那么大的文字图像,所以使用这个比较合适。而资源一般来自一张.png图片,或.plist文件。不过它也可以用来显示其他字符,如英文字符。
当然CCLabelAtlas继承于CCNode类,故可以使用父类的一些函数,如:放缩、旋转等操作。
并且图片中每个字符的大小必须是固定的,若要改变字体大小,只能通过放缩来实现。
例如如下图数字图片资源:
1、常用操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//
class
CC_DLL CCLabelAtlas :
public
CCAtlasNode,
public
CCLabelProtocol
{
/**
* 创建CCLabelAtlas字体方法
*/
//create(要显示的数字串,数字资源图片png,每个数字的宽,每个数字的高,图片第一个是什么数字)
//从图片中从左到右,一块一块截取。从数字startCharMap开始一一对应。
//第一块小图片对应数字startCharMap;第二块小图片对应数字startCharMap+1;第三块对应startCharMap+2 …… 以此类推。
//注意:startCharMap为ASCII码,即数字'0'为48。
static
CCLabelAtlas * create(
const
char
*string,
const
char
*charMapFile, unsigned
int
itemWidth, unsigned
int
itemHeight, unsigned
int
startCharMap);
/**
* 设置字符串内容
* 注意:内容的文字必须是资源图片中存在的才可以!!!
*/
void
setString(
const
char
*label);
const
char
* getString(
void
);
};
//
|
2、代码举例
1
2
3
4
5
6
7
8
9
10
|
//
//创建CCLabelTTF的方法
CCLabelAtlas* lb4 = CCLabelAtlas::create(
"20140815"
,
"fonts/digit.png"
, 20, 20,
'0'
);
//设置位置
lb4->setPosition(midPos);
//添加到HelloWorld层中
this
->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、常用操作
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
|
//
class
CC_DLL CCLabelBMFont :
public
CCSpriteBatchNode,
public
CCLabelProtocol,
public
CCRGBAProtocol
{
/**
* 创建CCLabelBMFont方法
*/
//create(要显示的字符串,字体资源名称.fnt)
static
CCLabelBMFont * create(
const
char
*str,
const
char
*fntFile);
/**
* 属性设置
* setFntFile , setString ,
* setAnchorPoint , setAlignment , setWidth ,
* setScale , setColor , setOpacity
*/
//设置字体资源名称.fnt
void
setFntFile(
const
char
* fntFile);
const
char
* getFntFile();
//设置内容
virtual
void
setString(
const
char
*newString);
virtual
const
char
* getString(
void
);
//设置锚点
virtual
void
setAnchorPoint(
const
CCPoint& var);
//水平对齐方式CCTextAlignment::
//kCCTextAlignmentLeft 左对齐
//kCCTextAlignmentCenter 居中
//kCCTextAlignmentRight 右对齐
virtual
void
setAlignment(CCTextAlignment alignment);
//设置宽度? 可是我用了好像都不知道是什么效果...
virtual
void
setWidth(
float
width);
//放缩
virtual
void
setScale(
float
scale);
virtual
void
setScaleX(
float
scaleX);
virtual
void
setScaleY(
float
scaleY);
//设置颜色
virtual
void
setColor(
const
ccColor3B& color);
virtual
const
ccColor3B& getColor(
void
);
//透明度0~255,其中255为不透明
virtual
void
setOpacity(GLubyte opacity);
};
//
|
2、代码举例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//
//创建两个CCLabelBMFont字体
CCLabelBMFont* lb5 = CCLabelBMFont::create(
"hello"
,
"fonts/bitmapFontTest.fnt"
);
CCLabelBMFont* lb6 = CCLabelBMFont::create(
"world"
,
"fonts/bitmapFontTest.fnt"
);
//设置位置
lb5->setPosition( midPos );
lb6->setPosition( midPos - ccp(0,100) );
//添加到Layer层中
this
->addChild(lb5);
this
->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));
//设置为绿色
lb5_c2->setScale(2.0f);
//放大
//
|
3、运行结果
4、分析与总结
(1)CCLabelBMFont的每个字符都是一个单独的CCSprite精灵,可以对每个字符单独进行设置。
(2)CCLabelBMFont的使用功能是CCLabel中最丰富最灵活的一个。
(3)锚点为(0.5,0.5)。