最终效果图:
cocos2d v3中Label只有2种:
一、CCLabelTTF
注意事项:
CCLabelTTF,可以随时setString,改变文字,
但是:非常耗性能,
因为,它会为每一个新的string,创建一个新的纹理,进行渲染,
因此,不能频繁地改变文字的内容;
只有显示固定的文字时,才建议使用CCLabelTTF
二、CCLabelBMFont
使用注意事项:
BMFont是专门为了频繁更换label内容而生,
因为,每一个字符如a、b、1都是一个sprite,
都对应着一个图片/纹理,
因此会以占用更多的内存为代价,
从而提高了渲染的效率(因为一个sprite对应的纹理只需渲染一次)
另外一个好处是:
由于每一个字符都是一个精灵,所以可以runAction
这里面用到的fnt可以使用【Glyph Designer软件】生成
BMFont不能设置大小size,但是可以通过设置scale缩放
并且,BMFont不能设置高度,仅能设置宽度
//
// LabelScene.m
// 31_cocos2D入门
//
// Created by beyond on 14-9-26.
// Copyright (c) 2014年 com.beyond. All rights reserved.
// 演示3种Label的场景
#import "LabelScene.h"
@interface LabelScene()
{
CCLabelTTF *_labelTTF;
CCLabelBMFont *_bmFont;
// CCLabelAtlas *_atlas;
}
@end
@implementation LabelScene
#pragma mark - 覆盖父类方法
-(id)init
{
if (self=[super init]) {
// 1、场景Node 允许交互
self.userInteractionEnabled = YES;
}
return self;
}
// 直接覆写,即:不用创建一个sprite In Center
- (void)addSpriteInCenter{}
// 实现父类的方法,添加一个按钮到屏幕上
- (void)addShowBtns
{
// 1.使用CCLabelTTF
[self addBtn:@"【CCLabelTTF】" position:ccp(0, 0) target:self sel:@selector(labelTTFClicked)];
// 2.使用CCLabelBMFont
[self addBtn:@"【CCLabelBMFont】" position:ccp(0, 0.1) target:self sel:@selector(labelBMFontClicked)];
// 3.让BMFont的每一个字符精灵,产生Action
[self addBtn:@"【BMFont字符精灵动画】" position:ccp(0, 0.2) target:self sel:@selector(labelBMFont_SpriteActionClicked)];
}
// 1.使用CCLabelTTF
- (void)labelTTFClicked
{
_bmFont.string = @"";
_bmFont = nil;
// CCLabelTTF,可以随时setString,改变文字,但是:非常耗性能,因为,它会为每一个新的string,创建一个新的纹理,进行渲染,因此,不能频繁地改变文字的内容;只有固定的文字才建议使用CCLabelTTF
CGSize dimension = self.contentSize;
_labelTTF = [CCLabelTTF labelWithString:@"Hello Beyond" fontName:@"Marker Felt" fontSize:67 dimensions:dimension];
_labelTTF.horizontalAlignment = CCTextAlignmentCenter;
_labelTTF.verticalAlignment = CCVerticalTextAlignmentCenter;
_labelTTF.position = ccp(self.contentSize.width/2,self.contentSize.height/2);
// 添加到场景中
[self addChild:_labelTTF];
}
// 2.使用CCLabelBMFont
- (void)labelBMFontClicked
{
_labelTTF.string = @"";
_labelTTF = nil;
// BMFont是专门为了频繁更换label内容而生,因为,每一个字符如a、b、1等都是一个sprite,都对应着一个图片/纹理,因此会以占用更多的内存为代价,从而提高了渲染的效率(因为一个sprite对应的纹理只需渲染一次)
// 另外一个好处是,由于每一个字符都是一个精灵,所以可以runAction
// 这里面的fnt可以使用 【Glyph Designer 】生成
// BMFont不能设置大小size,但是可以通过设置scale缩放
// BMFont不能设置高度,仅能设置宽度
_bmFont = [CCLabelBMFont labelWithString:@"Hello Beyond" fntFile:@"Marion.fnt" width:400 alignment:CCTextAlignmentCenter];
_bmFont.position = ccp(self.contentSize.width/2,self.contentSize.height/2);
// _bmFont.scale = 1;
// 添加到场景中
[self addChild:_bmFont];
}
// 3.演示labelBMFont的每一个字符精灵的动画
- (void)labelBMFont_SpriteActionClicked
{
_bmFont.string = @"";
_bmFont = nil;
_labelTTF.string = @"";
_labelTTF = nil;
// 1.先创建一个BMFont
CCLabelBMFont *bmfont = [CCLabelBMFont labelWithString:@"Hello Beyond" fntFile:@"Marion.fnt" width:350 alignment:CCTextAlignmentCenter];
bmfont.position = ccp(self.contentSize.width/2,self.contentSize.height/2);
// _bmFont.scale = 1;
// 添加到场景中
[self addChild:bmfont];
// BMFont 另外一个好处是,由于每一个字符都是一个精灵,所以可以runAction
// 2. 取出 BMFont 第0个字符精灵
CCSprite *firstCharSprite = [bmfont.children objectAtIndex:0];
CCActionJumpBy *jump = [CCActionJumpBy actionWithDuration:0.5 position:CGPointZero height:40 jumps:2];
// 延时
CCActionDelay *delay = [CCActionDelay actionWithDuration:1];
// 先跳后,延时1秒
CCActionSequence *sequence = [CCActionSequence actionOne:jump two:delay];
// 让第0个字符精灵永远执行动作
[firstCharSprite runAction:[CCActionRepeatForever actionWithAction:sequence]];
// 3.取出 BMFont 第6个字符精灵
CCSprite *sixCharSprite = [bmfont.children objectAtIndex:6];
// 让第6个字符精灵永远执行动作
[sixCharSprite runAction:[CCActionRepeatForever actionWithAction:[CCActionRotateBy actionWithDuration:3 angle:360]]];
}
#pragma mark - 时钟方法
- (void)update:(CCTime)delta
{
if (_labelTTF != nil) {
[self showLabelTTF];
} else if(_bmFont != nil){
[self showBMFont];
}
}
#pragma mark - 自定义方法
- (void)showLabelTTF
{
// 随机数字+字母
_labelTTF.string = [NSString stringWithFormat:@"%f %c", CCRANDOM_MINUS1_1() * 1000, 'a' + (int)(CCRANDOM_0_1() * 26)];
}
- (void)showBMFont
{
// 随机数字+字母
_bmFont.string = [NSString stringWithFormat:@"%f %c", CCRANDOM_MINUS1_1() * 1000, 'a' + (int)(CCRANDOM_0_1() * 26)];
}
/*
// 虽然Atalas已不再使用,但是其特点还是介绍一下
// Atalas 使用的是plist文件,同时,它要求图片里面每一个char要有相同的宽度和高度,并且按ascii顺序排列 ,因为Atalas就是根据ascii值到Plist中去截取对应位置的对应size的图片,作为文字使用
// Atalas适合于 像高速显示少数的几个数字,如左下角的帧率,这样的文字(字符)
*/
@end
CCLabelBMFont需要用到的软件:
Glyph Designer (类似的工具还有Hiero)
glyph n.象形文字,象形符号
软件默认打开界面:
使用了抗锯齿、径向填充(Gradient Fill Glyph)
实心填充(solid fill)
一般情况下:
会先用小字号(如64)生成一个非视网膜屏幕下的图片,如a.png
再用大字号(如128)生成视网膜屏幕下的图片,如a-hd.png
视网膜屏幕下用的a-hd.png,字号大小是上面的2倍,为128
点击【Export】,生成cocos2d使用的fnt文件
此时,在Documents路径下会生成2个文件
.fnt和.png
其中.fnt就是对图片的描述文件,描述每一个字符char在图片中的位置等信息
用文件编辑器打开.fnt,可以看到该文件描述的File是"Marion.png"
在cocos2d v3中,Atlas已经不再使用,这仍简单介绍一下
Atlas 使用的是plist文件,
它要求图片里面每一个char要有相同的宽度和高度,并且按ascii顺序排列 ,
因为Atlas就是根据ascii值到Plist中去截取对应位置的对应size的图片,作为文字使用
Atlas适合于 像高速地动态地显示少数的几个数字,如左下角的帧率(只有0~9),这样的文字(字符)