疯狂ios之cocos2d中的文本

博文视点 发布于 2014/04/16 09:18
阅读 268
收藏 0
iOS

在游戏当中,经常需要添加标签和文本,对此cocos2d提供了强大的文本渲染功能。cocos2d支持所有内置的iOS字体以及一些TrueType字体。

cocos2d中,文本渲染功能通常由两个类实现:CCLabelTTFCCLabelBMFont。下面我们来详细说明这两个类在实际项目当中如何使用。

†† 13.12.1  CCLabelTTF

CCLabelTTF类继承自CCSprite,因为其渲染速度相对较慢,所以通常用于显示一些静态的标签和纯文本。CCLabelTTF类的常用方法如下。

+(id)labelWithString:(NSString*)string fontName:(NSString*)name fontSize:(CGFloat)size该方法根据字体名称和字体大小初始化一个新的标签对象,CCLabelTTF对象将使用CCTexture2D类从文本创建一个纹理图。

-(id)initWithString:(NSString*)string fontName:(NSString*)name fontSize:(CGFloat)size该方法根据字体名称和字体大小初始化一个新的标签对象,CCLabelTTF对象将使用CCTexture2D类从文本创建一个纹理图。该方法与前一个方法功能大致相似,只不过该方法是实例方法,需要用CCLabelTTF对象调用。

-(void) setString:(NSString*)str:该方法设置CCLabelTTF对象的文本内容。

接下来我们通过示例演示在项目中如何使用CCLabelTTF类。实现代码如下。

程序清单:codes/13/13.12/LabelTTFTest/LabelTTFTest/HelloWorldLayer.m

-(id) init

{

    if( (self=[super init]) ) {

        CGSize winSize = [[CCDirector sharedDirector] winSize];

        // 使用特定的文本内容、字体名称和字体大小3个参数创建并初始化一个新的标签对象

        CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World"

            fontName:@"Marker Felt" fontSize:64];

        label.position = ccp(winSize.width/2,winSize.height/2);

        [self addChild:label];

        // iOS支持的所有字体

        NSArray *fontFamilyNames = [UIFont familyNames];

        for (NSString *familyName in fontFamilyNames) {

            NSArray *names = [UIFont fontNamesForFamilyName:familyName];

            CCLOG(@"%@ = %@",familyName,names);

        }

    }

    return self;

}

 

单击“Run”按钮执行LabelTTFTest项目,模拟器屏幕正中显示HelloWorld标签,控制台输出如图13.50所示。

上面代码首先使用特定的文本内容、字体名称和字体大小3个参数创建并初始化了一个新的标签对象,然后设置了标签在屏幕中的位置并添加为当前层的子节点,最后从UIFont类中查询出iOS中的所有可用字体并打印在控制台中。

13.12.2  CCLabelBMFont

使用CCLabelTTF类显示静态的标签文本很方便,但是渲染速度相对较慢,并且缺乏灵活性,为此,cocos2d提供了CCLabelAtlas类和CCLabelBMFont类来替代CCLabelTTF类。由于CCLabelAtlas类相对于CCLabelBMFont类来说过于复杂,所以在实际开发中通常建议使用CCLabelBMFont类。CCLabelBMFont类和CCLabelTTF类的区别如下。

CCLabelBMFont类的渲染速度要比CCLabelTTF类快很多。

CCLabelBMFont类来自于图片文件,并且有很多第三方编辑器支持,非常灵活。

CCLabelBMFont类支持不同宽度的字符。

所以,如果在项目开发中只是需要使用标准的iOS字体,并且不需要经常修改标签的文本内容,那么使用CCLabelTTF类就可以满足。但有些时候如果需要使用定制的字体,而且需要每一帧都更改文本的内容,这时就建议使用CCLabelBMFont类。

CCLabelBMFont类继承自CCSpriteBatchNode,并实现了CCLabelProtocolCCRGBAProtocol两个协议。因为继承自CCSpriteBatchNode,所以文本中的每一个字符会被作为一个独立的CCSprite精灵对象看待,每个字符的大小、着色、透明度和旋转角度等属性都可以被修改。CCLabelBMFont类还可以被当作菜单项的一部分。CCLabelBMFont类有如下两个特有的属性。

opacity:透明度,变量类型是Glubyte

color:颜色,变量类型是ccColor3B(使用RGB数值表示的色彩)。

那么CCLabelBMFont类如何使用呢?因为CCLabelBMFont类继承自CCSpriteBatchNode,并且来自于图片文件,所以其实它的作用就相当于精灵表单,而其中的每一个字符则相当于精灵表单中的单个精灵对象。字符是以图片形式存储的,因此必须使用字体图集。字体图集其实就是一张大的图片,其中包含了所有要显示的字符,以及描述字符在字体图集中位置的坐标数据,字体图集可以理解成前面学习过的精灵表单。当字符是以图片形式存储时,也无法直接修改它的大小,如果在游戏当中需要使用多种大小不同的字符,我们必须为每一种大小创建一个单独的字体图集。

cocos2d中使用FNT文件保存位图字体,cocos2d本身并没有提供创建字体图集的工具,但是有很多第三方工具可以创建字体图集。cocos2d官方推荐以下几种创建字体图集的工具。

q Ø Glyph Designer:该软件为收费的商业软件,下载地址为http://glyphdesigner. 71squared.com

q Ø Slick2D Hiero Bitmap Font Generator:该软件为Java开发的免费软件,下载地址为http://slick.cokeandcode.com/demos/hiero.jnlp

q Ø Hiero:该软件为Java开发的免费软件,使用简单,下载地址为http://www.n4te.com/ hiero/hiero.jnlp

本书使用Hiero软件创建字体图集,它的作用类似于前面创建纹理图集的Zwoptex

1. 下载Hiero工具

打开浏览器,在地址栏输入:http://www.n4te.com/hiero/hiero.jnlp,下载Hiero工具。


打开Hiero后,主界面显示如图13.51所示。

2. 创建字体图集

在主界面左上方“Font”字体列表框中选择字体,如“Arial Rounded MT Bold”。选择后上方中间位置的“Sample Text”列表框中会显示相对应的字体样本。

在上方右侧的“Effects”列表框中可以设置颜色、轮廓、阴影等。

在下方的“Rendering”区域,切换到“Glyph cache”,将“Page width”和“Page height”设置为256,使用最小的2的次方的图像包含所有需要的文本字符。Hiero将创建一个256*256的字体图集,如图13.52所示。

 单击左上角的“File”,选择“Save BMFont files”,将文件命名为“my.fnt”。Hiero将同时创建一个FNT文件和一个PNG文件(FNT文件就类似于使用Zwoptex创建的plist文件)。

以上就是使用Hiero制作字体图集的具体方法。接下来将演示如何使用CCLabelBMFont类在游戏开发中使用字体图集。

3. 字体图集示例

首先创建一个LabelBMFontTest项目,选择“Resources”组并单击右键,选择“Add Files toLabelBMFontTest’”,将刚才生成的my.fntmy.png添加到Resoures组当中。接下来,在init方法里面添加一段代码,使用LabelBMFontTest操作字体图集。实现代码如下。

程序清单:codes/13/13.12/LabelBMFontTest/LabelBMFontTest/HelloWorldLayer.m

-(id) init

{

    if( (self=[super init]) ) {

        CGSize winSize = [[CCDirector sharedDirector] winSize];

        // 创建一个标签,使用my.fnt字体图集

        CCLabelBMFont *label = [CCLabelBMFont

            labelWithString:@"Hello BMFont" fntFile:@"my.fnt"];

        label.position = ccp(winSize.width/2,winSize.height/2);

        [self addChild:label];

        // CCScaleBy动作,2秒后放大2

        id scaleBy = [CCScaleBy actionWithDuration:2.0f scale:2];

        [label runAction:scaleBy];

    }

    return self;

}

 

单击“Run”按钮执行LabelBMFontTest项目,模拟器显示如图13.53所示。

上面代码首先用CCLabelBMFont的类方法创建了一个标签,并使用了刚刚在Hiero中生成的my.fnt字体图集,然后将标签设置在屏幕正中。接下来让标签执行一个动作,2秒之后放大到原来的2倍。通过观察发现,标签放大后,字体边缘会出现锯齿,为什么会出现这种现象呢?因为CCLabelBMFont是纹理图,纹理图类似于位图,位图在放大时会出现模糊或者失真现象。所以,在开发中使用CCLabelBMFont时,不要把缩放比例设置得过大,如果字体标签需要缩放,对于不同大小的字符,需要设置不同的字体图集。




加载中
返回顶部
顶部