如何在SpriteBuilder中使用BM Font Label

时间:2024-01-07 19:13:08

开始不知道,还真有点小繁琐。

mac系统上创建BM Font的工具有不少,我主要用hiero和GlyphDesigner;前者是java写的,后者是mac原生的,功能都差不多。

还有一个类似的工具bmGlyph。

首先根据不同平台解决方案建立不同的字体尺寸,建议大小如下表:

Table 11-2. Bitmap font scaling for each resources folder

Absolute (iPad screen is 512x384)
UI Scale (iPad screen is 1024x768)
resources-phone
25% (i.e., Font size: 12)
50% (i.e., Font size: 24)
resources-phonehd
50% (i.e., Font size: 24)
100% (i.e., Font size: 48)
resources-tablet
50% (i.e., Font size: 24)
50% (i.e., Font size: 24)
resources-tablethd
100% (i.e., Font size: 48)
100% (i.e., Font size: 48) 

创建完毕后导出为.fnt和.png两个文件,比如1.fnt和1.png

在SpriteBuilder中创建一个Fonts文件夹,然后根据上面创建的字体文件名在Fonts中建立1.bmfont文件夹然后在其中依次建立4个子文件夹:

resources-phone, resources-phonehd, resources-tablet, and resources-tablethd,然后按照不同的平台放入不同尺寸的字体文件(1.fnt和1.png)。

为了示例,我只是将1.fnt和1.png拷贝4次放到4个文件夹中,实际项目中需要修改尺寸以对应不同平台。

注意你建立的1.bmfont后,该文件夹名字会自动变为1.bmfont. ,即后面会多出一个点;这个先不用管,后面会说明处理办法。

这时的文件夹类似如下布局:

如何在SpriteBuilder中使用BM Font Label

只不过图中的字体名称为gd。

在SpriteBuilder中File View视图中鼠标右键点击1.bmfont.文件夹选择Show in Finder,在打开的Finder窗口中将1.bmfont.改为1.bmfont。再回到File View视图中,发现字体图标发生了变化:

如何在SpriteBuilder中使用BM Font Label

接下来,在场景中拖入一个Label BM-Font控件:

如何在SpriteBuilder中使用BM Font Label

将其Font file属性设置为1.bmfont:

如何在SpriteBuilder中使用BM Font Label

你可以将该Label链接到一个变量,然后就可以在Xcode中代码引用了。

我添加了一段倒计时代码,从10到0,然后切换game over场景:

-(void)updateCountDownLabel:(CCTime)dt{
    _countdownSecs += dt;
    if (_countdownSecs >= _totalSecs) {
        CCScene *gameoverScene = [CCBReader loadAsScene:@"Gameover"];
        [[CCDirector sharedDirector] replaceScene:gameoverScene];
    }

    float tmp = _totalSecs - _countdownSecs;
    int sec = tmp * 100 / 100;
    int msec = (int)(tmp*100)%100;
    NSString *str = [NSString stringWithFormat:@"%2d %2d",sec,msec];
    //[_countDownLabel setString:str];
    [_countDownLabelBMF setString:str];
}

-(void)update:(CCTime)delta{
    [self updateCountDownLabel:delta];
}

最终效果如下图:

如何在SpriteBuilder中使用BM Font Label