2dx中使用自定义位图字体

开发日志系列(十三)

成品预览

Font

环境与工具

cocos2d-x 2.2.3,AngelCode,PhotoShop

在我参与的项目中,由于美术对战斗表现非常苛刻,飘血等飘字的样式否需要逐字自定义,例如上图中的Zzz,闪避,反击,等等,最初他们设想是把所有飘字做成各个散图,用飘图来代替最初的飘文字.这绝对不是一种好的方法.于是我想到了自定义位图字体.在 cocos2d-x源码中发现CCLabelBMFont对位图字体支持的非常不错.因为CCLabelBMFont中仅仅看某个字的矩阵范围,而这个矩阵里是什么 有什么 完全不会干涉.创建位图字体首先需要使用一款叫做AngelCode的工具.步骤如下:

AngelCode的使用

  • 新建一个文本文件,写入要做成位图的字,例如:反击 挡 连击 闪 睡(Zzz)
  • 保存为UTF8格式
  • AngelCode中Edit->Select chars form file
  • AngelCode中Options->Font Setting 设置size大小
  • AngelCode中Options->Font Setting 选择默认字体
  • AngelCode中Options->Export Options修改 间隙像素 建议 > 3,
  • AngelCode中Options->Export Options修改Texture寛高
  • AngelCode中Options->Export Options修改Bit深度为32
  • AngelCode中Options->Export Options修改File Format为Text
  • AngelCode中Options->Export Options修改Textures为png文件
  • AngelCode中Options->Save Bitmap font as生成位图字体

为适用cocostudio的自定义位图控件还需要改一下两个地方:

  • 打开输出的.fnt修改file="xxx_0.png"file="xxx.png"
  • 修改输出的.png文件名xxx_0.png 改为xxx.png

修改个别特殊字的矩阵

上图中我的字 其实是用了Zzz符号代替的,但是这个符号比睡字大根本放不下.怎么办呢?我们可以直接修改.fnt文件中字所在的矩阵范围.例如原来的是:

char id=30561 x=390   y=0     width=74    height=74    ....省略后面部分

74×74的寛高直接被我修改为:

char id=30561 x=390   y=0    width=112    height=94    ....省略后面部分

这样就解决了个别特殊字体过大的问题,当然 也可以在程序里把字体放大,但是美术们好像对放大的效果不满意.所以直接修改fnt数据应该是最好的方法了.

在cocos2dx中使用

std::string szString("睡睡");
std::string szFontName("FightFilyFont.fnt");
CCLabelBMFont::create( szString, szFontName, kCCLabelAutomaticWidth, kCCTextAlignmentCenter );

《2dx中使用自定义位图字体》有17个想法

  1. 对了,你们用sublime 开发,报错什么之类用什么看?我记得我之前用decade,跑一遍,感觉不好用

  2. @Rect
    问个问题,可以把air程序打包成sdk由原生的apk或ipa调用吗?
    抱歉放到这里,怕看不到。

    1. @lee, 没明白你的要表达的意思,把AIR写的APK打包到其他APK中 再调用安装?

      1. @Rect, 我基于air写了一个程序,其它apk可以调用我用air写的程序中的功能吗?
        最理想的当然是引用jar一样引入就可以使用。
        实在不行退一步可以打包到一起。
        不知道我有没有说明白。

  3. @Rect,多谢!!
    有没有开源实现,或介绍。
    ios平台也能实现吗? 再次感谢。

    1. @lee, ios可以通过URL调用吧,我不知道有没有开源实现,但是有很多应用都这样干,你去反编译一下陌陌和它任何一款旗下游戏就明白了.

发表评论

邮箱地址不会被公开。 必填项已用*标注