cocos-creator使用记录20_创建数字字体和图片字体


1.官方创建艺术数字字体
http://docs.cocos.com/creator/manual/zh/asset-workflow/label-atlas.html
需要准备一张按从0到9的顺序排列的png图片,且每个数字的宽度是相同的。
然后按照官方教程创建一个类似 LabelAtlas.labelatlas 的资源。 
设置Raw Texture File、Item Width、Item Height、Start Char。
完成后需要点击 属性检查器 右上角的绿色的打勾按钮来保存设置。
新建一个 Label 组件,然后把新建好的艺术数字资源拖到 Label 组件的 Font 属性即可。

2.使用Bmfont创建字体图片
下载Bmfont工具
http://www.angelcode.com/products/bmfont/

2.1.使用Bmfont创建自定义字符集
(1)Options/Font Settings
Font 从列表中选择一种字体。若是非系统字体,在win7上,可以将字体拖到系统的字库文件夹中。
Add font file 不要使用此项选择字体,实际使用时出现过无法识别字体的问题。
size 设置你需要的字体大小。
Charset 字体编码默认为Unicode。
(2)Options/Export Settings
Width和Height的值,尽量选小,只要能够容纳我们需要用到的所有字就可以了。可通过预览查看。
Bit depth选32位
Presets选择white text with alpha,我们就是要生成一个白色字体透明背景的字体图片,
   在cocos-creator中可以通过设置节点的颜色来赋予图片字体颜色。
Font descriptor选择Text
Texture选择png

到这里,导出图片字体的配置就设置完了,可以点击Options/Save configuration as,保存配置。
但要注意,似乎每次重新打开Bmfont,其Options/Export Settings下的Presets的值会恢复默认,
因此每次都要选择white text with alpha。 

(3)导入要生成字体图片的文本
先新建一个txt文件,在其中输入我们要制作的字,另存为unicode。
在导入前要先Edit/clear all chars in font。
然后Edit/Select chars from file就可以直接选中新建的txt文件。
最后Options/Save bitmap font as就可以导出一个png和一个fnt。

注意:Bmfont引用的文件的路径不能包含中文。
  选择的图片若是被压缩过,会识别不了。可以在生成字体图片后再压缩。

2.2.创建数字0-9的字体
运行后选择Open Image Manager
点击Image,选择import Image,选择图片后出现对话框
id  图片路径
48  D:\num\0.png
49  D:\num\1.png
50  D:\num\2.png
51  D:\num\3.png
52  D:\num\4.png
53  D:\num\5.png
54  D:\num\6.png
55  D:\num\7.png
56  D:\num\8.png
57  D:\num\9.png

其中id填写鼠标移动到要显示的数字上面时右下角的左边数字,即Unicode编码。
在options->font setttings设置需要的字体、大小。
在export options中根据实际显示的图片大小设置生成的纹理图片大小,
设置图片格式为png,文字信息格式为text,Bit depth选32,颜色通道RGB会
自动选one。
按ctrl +s ,或者选择save bitmap font as生成的文件。
结果会包含一个fnt和一个png。

使用此方法生成数字字体,有一个比较灵活的地方在可以随意增加数字运算符,比如
表示时间时,可以增加 冒号,表示算数运算时,可以增加 加减乘除。

展开阅读全文

没有更多推荐了,返回首页