如何在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];
}

最终效果如下图:

这里写图片描述

相关文章
|
3月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
79 0
|
前端开发
CSS font-weight 值对应(Regular、Normal、Medium、Light)
CSS font-weight 值对应(Regular、Normal、Medium、Light)
1917 0
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
276 0
Figma|Generate color palette
Figma|Generate color palette
112 0
关于 QWidget无法使用stylesheet设置自身backgound-color(背景色)和border-image(背景图片) 的解决方法
关于 QWidget无法使用stylesheet设置自身backgound-color(背景色)和border-image(背景图片) 的解决方法
关于 QWidget无法使用stylesheet设置自身backgound-color(背景色)和border-image(背景图片) 的解决方法
|
前端开发
kivy之label颜色修改
kivy的label控件修改需要通过canvas实现,canvas也是kivy控件自定义的主要手段之一
|
前端开发
CSS利用@font-face使用自定义字符和图标
昨天发的一个教程被一顿喷,说已经不用图片了,什么图标字体啦,好桑心~~,但也是事实,现在的前端图片越来越少了,相应替换的是css以及图标字体,所以去探测了几个网站,找了一下style.css 文件,看看具体的CSS内容,然后发现这是一个很有趣的问题。
1202 0
|
Web App开发 测试技术