如何在SpriteBuilder中使用BM Font Label

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

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. ，即后面会多出一个点；这个先不用管，后面会说明处理办法。

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



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

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



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



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



你可以将该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];
}

最终效果如下图: