[置顶] cocos2dX UI控件之CCLabelBMFont与CCLabelAtlas

嘿嘿, 我又回来了, 今天我们来看看UI控件里面的CCLabelBMFont与CCLabelAtlas 为什么有了CCLabelTTF之后我们还有学习这两个呢, 上节课我们不是说了嘛, 效率问题, 当然, 还有一个肯定就是美观了啊, CCLabelTTF只能使用系统字体哦, 好了, 现在我们正式开始进入CCLabelBMFont与CCLabelAtlas的学习

用法:

CCLabelBMFont::create("想要显示的字符串", ".fnt的字符解析文件");

CCLabelAtlas::create("要显示的字符串", "图片文字", 单个字符的宽度, 单个字符的高度, '第一个字符');

既然是要用图片创建, 那我们肯定得找图片啊

最后一张图片我们用在CCLabelAtlas

前面三个文件我们用在CCLabelBMFont, 当然那个plist文件我们可以不使用的, 但是是一起生成的所以我就一起复制过来了(我用的红孩儿工具箱生成的, 很不错的软件, 还是免费的哦)

我们继续来看用法:

CCLabelBMFont* pLabel = CCLabelBMFont::create("hello, world", "testfont.fnt");	//创建CCLabelBMFont
	pLabel->setPosition( ccp( visibleSize.width / 2, 50));
	this->addChild( pLabel);

	CCLabelAtlas* pLabel2 = CCLabelAtlas::create("12345", "testFont2.png", 25, 27, '1');	//创建CCLabelAtlas
	pLabel2->setPosition( ccp( visibleSize.width / 2, 100));
	this->addChild( pLabel2);

我们来看看显示的效果:

(额, 由于字体是黑色的, 所以我加了张背景, 不要在意这些细节)

首先我们来看CCLabelBMFont, 使用它我们需要两个文件, 一个是.fnt的解析文件, 一个是.png对应的图片文件, 我们可以打开.fnt文件看一下

我们可以看见.fnt里面使用了刚刚那张.png的文件, 而且定义了每个字符对应的位置信息, 但是就因为这样, 所以我们不能指定字体的大小, 但是我们可以把它当成一个精灵(CCSprite), 用scale来缩放, CCLabelBMFont的用法是不是很简单呢? 我们再来看看CCLabelAtlas, 这个相对于CCLabelbMFont要复杂一点, 但也只是相对而已.

先解释一下参数, 当然, 第一个和第二个我就不解释了, 大家都明白的( 旁白: 废话还是这么多), 我们来看后面三个分别指定单个字符的宽高和图片的第一个字符的ASCII码, 首先, 传入的图片被分成了指定宽高的小图( 嗯, 话说应该是这样吧) , 我们最后一个参数指定了开始字符的ASCII码, 在图片里面字符都是按照ASCII码排列的, 所以我们指定了宽高的小图就能很轻易的取出

刚刚我们说了因为这两个的本质是图片, 所以不能设置字号, 我们就只能把它当做CCSprite, 我们也看看是怎么做的, 就当先预热一下CCSprite部分了

CCSprite* fontSprite = (CCSprite*)pLabel->getChildByTag( 0);			//取出第一个字符
	CCActionInterval* scale = CCScaleTo::create( 2, 1.5f);					//设置在1.5秒的时间里放大2倍
	CCActionInterval* rotate = CCRotateBy::create( 1.5, 30);				//设置在1.5秒的时间里面旋转30度
	CCSequence* seq = CCSequence::create(scale, rotate, NULL);				//插入到动画序列
	fontSprite->runAction( seq);											//开始动画

效果:

这段代码看不明白也没关系, 我们后面会详细讲解的, 写这段代码就是为了让大家看第一句, 如何将一个字符取出, 然后进行操作, 字符的存储和数组是一样的, 也是从0开始的, 要注意这一点, 嗯, 今天就先做到这里吧, 顺便吐槽一句:从今天开始, 每天都要加班啊, 真心悲催啊