cocos js LabelBMFont Bitmap Font Generator


在每个项目开发中几乎都会用到数字,比如战斗结算会有数字的加减,而且往往还伴随着很多特效动画,为了使数字变动更有代入感,一般数字都会给精心设计好的图片资源。那这样程序应该如何实现呢?

一般想的是创建很多的sprite,比如:数字12345,那么就会创建5个sprite然后拼接起来,这样做呢既丢失了很多性能,而且拼接起来的数字不容易扩展出一系列复杂动画,很有局限性。

所以工具Bitmap Font Generator帮我们解决了这问题,如何使用,让我们一步步开始吧!。。。

准备工作:
0到9共十张图片资源:如图0:


通过 Bitmap Font Generator 把我们上面准备好的多个数字图片打包成两个文件,一个.png文件和一个.fnt文件,这两个文件就是程序中所需要的。

首先,下载位图字体生成工具Bitmap Font Generator(貌似仅有windows版)并安装:http://www.angelcode.com/products/bmfont/

在安装目录下找到C:\Program Files (x86)\AngelCode\BMFont\bmfont.exe 双击运行。
打开界面如下图1:

首先去掉界面右侧的 Latin + Latin Supplement选项,使右侧一个都不选中。界面会变成下图:

1.选中左侧界面中 0 1 2 3 4 5 6 7 8 9 数字使之显示浅灰选中状态如图:
2.选择坐上角 Edit 按钮下的 Open Image Manager,会弹出一个小窗,如下图:
3.点击 Image按钮,选择 Import Image..
选择我们已准备好的数字图片0.png,确定后会弹出下图:

如何查看Id:把鼠标滑到一开始就打开的主界面0数字上,在主界面右下角会看到 48:30,前者48就是对应的Id,如图:

点击ok,0.png就添加完成如下图:

依次把1-9都添加完,最后效果如图:


细心的朋友可能注意到主界面0-9的数字方框右下角多了个蓝点,说明已添加:
到此可以关闭Image Manager。
4.点击 Options按钮,选择 Font settings,在弹出的设置框中我们只需要设置两项,字体(就是提前准备好的0-9那十张图所用字体,美术提供)以及大小, 如图:
5.点击 Options按钮,选择 Export options,在弹出的设置框中我们也只需要修改两项,如图:
6.点击 Options按钮,选择 Save bitmap font as... 导出到桌面,命名:BitmapFont.fnt
这时桌面上会有两个文件:1.BitmapFont.fnt 2.BitmapFont_0.png,同时把俩个文件考入工程中。
使用代码如下:
[javascript] view plain copy print ?
  1. varnumber=newcc.LabelBMFont("0123456789","res/BitmapFont.fnt");
  2. this.addChild(number);
  3. number.x=cc.winSize.width/2;
  4. number.y=cc.winSize.height/2;

效果图:

相关文章

    本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
    Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《...
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...