cocos cocoscreator 字体怎么导入bmfont字体资源

05:22:33 UTC
游戏内用到很多种fnt字体,每个字体纹理都不大,一张张放着浪费,所以想办法做二次合图,节省内存.
项目的所有字体纹理合集用 2048尺寸差不多刚刚好
第一个办法直接简单
所有字体拷贝到一个fonts目录下,设置自动图集配置AutoPac,构建运行,运行不报错,但是所有的字体显示都错乱了。
第二个办法
构建以后,写个脚本,把jsb-default/res/raw-assets/fonts/resources/fonts 目录的png全部合成一张图(fnt文件会被creator序列化成json文件,文件名也改的不认识),然后去res/import目录(从1800+json文件内容里搜索)搜索匹配对应的fnt原始文件内容,修改,保存。运行报错,然后又去修改对应的SpriteFrame json文件,运行,继续报错,前后检查几遍,发现貌似得修改settting.jsc,只得放弃,抓狂!
第三个办法,跟第二个办法原理类似,只不过这个是构建前操作。
写了脚本 1. TP把所有fnt对应的png合成一张纹理 fonts.png
fonts.plist2. 解析plist,修改fnt文件内容:修改file、scaleW/scaleH以及每个字符的x/y偏移值,保存新的fnt3.去掉之前生成的fnt同文件名png图,只用一张fonts.png运行以后在浏览器和creator编辑器上一切显示如预期效果。字体显示都正常。但运行真机(PC模拟器),发现全部只显示一种字图,空格丢失。 检查fnt修改记录,也没发现明显问题, wtf!
官方有空检查下这个问题吧,移动、浏览器总是有点什么差异,这难道是2dx的包袱?
吐槽一点,搞creator,稍微抄点小道就翻车。
[假装有一张老罗打自己脸的动图.gif]
05:26:55 UTC
能否给个测试例子? 之前的版本是有问题,目前 1.5.2 应该已经修复。
如果你的版本有这个问题,可以参考这个 PR 解决一下。
changed 1 files
with 1 additions
and 1 deletions.
07:33:55 UTC
多谢子龙回复,根据这个PR的修改提示,问题得到了解决,非常感谢!
另外这个PR严格来说不太准确,建议把 ATLAS_MAP_KEY_BUFFER 这个宏的值也改下,ios上文件资源路径非常长,加上spriteFrame的指针,很容易就超过255(Xcode调试)我的工程设成512就能完美运行,显示效果也一致。
ATLAS_MAP_KEY_BUFFER 512
希望能在1.6的正式版上修复(就一行改动),我们老大考虑准备1.6发布后升级。
07:40:24 UTC
路径过长的问题,512 严格来说也不太准确,这里的 texture path 其实不用完整的路径,我回头再提供一个 PR。主题 : Studio_TextBMFont 字体换行方法
级别: 新手上路
UID: 407082
可可豆: 151 CB
威望: 144 点
在线时间: 76(时)
发自: Web Page
来源于&&分类
Studio_TextBMFont 字体换行方法&&&
Studio_TextBMFont 字体换行方法   studio的这个FNT字体却实是很坑爹的,没有换行的方法,在项目中非常的不方便,为了在项目中,更好的利用没办法只有写个方法来用了 废话不多说直接上代码、 .h  std::string InsertEnter(int lenNum ,std::string str_);  .cpp std::string InsertEnter(int lenNum(需要换行的字数,备注1个中文字占3个字节,换行的话就需要加一个“\n”,1个“\n”也是占3个字符),std::string str_) {       int  strLen = strlen(str_);       //求出字符串的长度       if(lenNum & strLen)       {          return str_;      }        for(itn i = 0; strLen/lenNum*3; ++i)      {         str_.insert(lenNum * 3(一个字符所占的字节数) *(i + 1) + (i + 1) * 3,&\n&(一个“\n”所占的字节数));      }         return str_; } 
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版基于Cocos Studio和BMfont的艺术字体制作
我们在制作游戏的过程中经常要使用各式各样的艺术字体,这些字体让我们的游戏看起来更加美观更加的萌。但是很多的新手都不知道这些字体是如何做出来的,这篇文章主要介绍的是基于Cocos2d-x它的配套UI制作工具Cocos Studio的艺术字体使用。字体的制作工具使用的是BMfont()。首先我们制作我们想要的艺术字体(如果你有美工妹子的话,这应该轮不到你)然后我们的目标是让这些图片变成这样子:第一步我们打开BMfont:<p style="margin-top: 10 margin-bottom: 10 padding: 0 line-height: 1.8; color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, STheiti, Arial, Tahoma,cocos2d-x 中添加显示文字的三种方式 LabelTTF 、LabelBMFont 和 LabelAtlas - 冠军 - 博客园
随笔 - 321
评论 - 2047
在 cocos2d-x 中有三个类可以在层或精灵中添加文字:
LabelBMFont
LabelAtlas
LabelTTF 直接支持使用 TTF 字库,可以支持全部的中文,但是效率稍低。LabelBMFont 适合显示特定的文字,通过预先将文字生成图片,提高了效率,但是不能支持全部中文。如果使用的文字不多,组合多,但是文字的编码是连续的,比如数字,或者英文字符,那么 LabelAtlas 更加适合你。
先说 LabelTTF , TTF(TrueType Font) 是一种字库规范,是 Apple 公司和 Microsoft 公司共同推出的字体文件格式,随着windows的流行,已经变成最常用的一种字体文件表示方式。
在 Windows Phone 中使用的时候,我们需要把字库文件保存在 Resources\fonts 文件夹下面,保证 Cocos2d-x 能够找到字体。下面我们考虑在程序中使用字体 Consolas 显示一个字符串。
在系统文件夹&C:\Windows\Fonts 中找到 Consolas 字体,选中之后,进行复制。
复制到我们 Resources\fonts 文件夹中。
特别说明:
在 Andiord 和 iOS 中,代码中通过字体的名称,而不是字体文件的名称来使用字体。但是,在 Windows Phone 中,却不使用真实的字体名称,而是使用字体文件的名称来使用字体。
我们在前面复制过来的字体文件名称实际上是 consola.ttf,为了在后面使用这种字体,你需要将字体文件的名称改为 consolas.ttf 。或者字体名称使用 Consola 。
代码中可以如下使用字体来创建标签。
LabelTTF *label = LabelTTF::create("exp:+1234567", "Consolas", 40);
label-&setPosition(visibleSize.width / 2, visibleSize.height / 2);
addChild(label);
或者使用 TTFConfig ,好处是可以重复使用字体的配置信息,不用每次都指定字体名称和尺寸。
TTFConfig ttfConfig("fonts/Consolas.ttf", 24);
auto labelHello = Label::createWithTTF(ttfConfig, "Hello, TTFConfig");
labelHello-&setPosition(visibleSize.width / 2, visibleSize.height / 2);
labelHello-&setString("Reset String");
addChild(labelHello);
文字是如何显示在 UI 上的呢?实际上 Label 需要从字库中抽取字形,通过字形创建图片纹理,然后才能显示出来。如果字库比较大,比如说中文字库,我们没有使用字库中所有的文字,那么一个几 M 的字库文件就很浪费空间了,每次的重新生成纹理就更加浪费资源。我们可以考虑不使用字体文件,而直接准备好文字的图片直接显示在 UI 上。
LabelBMFont
LabelTTF 每次调用 setString (即改变文字)的时候,一个新的 OpenGL 纹理将会被创建.。这意味着setString 和创建一个新的标签一样慢。 所以,当你需要频繁的更新它们的时候,尽可能的不用去使用标签对象。 LabelAtlas 或者 LabelBMFont 可以帮助我们实现这种效果。
首先,我们使用一个工具来帮助我们从字库文件中抽取字形,生成我们需要的图片,这个工具称为&,可以直接下载到。
现在有两个版本,我们直接使用最新的 v1.14 beta 来处理。先安装一下。
下面启动起来
进行字体设定,我们使用微软雅黑来支持一下中文。
在弹出的对话框中选择微软雅黑,进行具体的设置。
然后,打开记事本,创建一个文本文件,写入你希望使用的文字,注意,在保存的使用要选择 Utf-8 格式。
然后,在 Bitmap font generator 的 Edit 菜单中,通过 Select chars form file 来选择你刚刚创建的文本文件,成功之后,你会在 Bitmap font generator 中看到你使用的文字已经被选中了。
现在,可以导出图片了。
看导出的对话框。
Padding,文字的内边框,或者理解为文字的周边留空要多大 做后期样式时这个属性很重要,需要预留空间来给描边、发光等特效使用 比如我预计我的样式要加一个2px的边框,然后加一个右下角2px的投影效果,所以我设定了padding:2px 4px 4px 2px
BitDepth,必须32位,否则没有透明层
Presets,字体初始化的预设的颜色通道设定,也就是说字体的初始颜色设定是什么样的,建议都用白色字,可以直接设定为White text with alpha,即白色字透明底。
Font descript,字体描述文件,可以使用text或者xml 也就是fnt文件格式
Textures,纹理图片格式,果断png。
最后,导出图片文件。
终于可以使用一下了。
首先,在资源中创建一个 xml 格式的 plist 文件,在其中定义我们希望显示的字符串。我们将这个文件直接保存在 Resources 的目录之下,名为 string.xml.
&?xml version="1.0" encoding="utf-8" ?&
&plist version="1.0"&
&key&name&/key&
&string&你好,Microsoft 雅黑&/string&
将我们刚刚生成的两个字体文件也复制到这个目录下。
CCDictionary *strings = CCDictionary::createWithContentsOfFile("string.xml");
const char *charchinese = ((CCString*)strings-&objectForKey("name"))-&getCString();
LabelBMFont *label = LabelBMFont::create(charchinese, "helloFont.fnt");
label-&setPosition(visibleSize.width / 2, visibleSize.height / 2);
addChild(label);
运行程序,就可以看到我们输出了,显示同样的文字,我们仅仅需要一张 3.43k 的图片文件就可以了。
如果无法使用,可以查看一下ccConfig.h中的CC_FONT_LABEL_SUPPORT是否enable了。
CCLabelBMFont CCLabelBMFont 相当于每次改变只改变了图片坐标,而CCLabelTTF要重新渲染.这个类使用之前,需要添加好字体文件,包括一个图片文件 (**.png) 和一个 字体坐标文件 (**.fnt)。 在 cocos2d-x的示例项目中有现成的,可以先拿过来练习一下,找的时候注意两个文件的 名称是相同的,只是扩展名不同。
这个没办法指定字体的字号,但可以用 scale 属性进行缩放来调整大小。就当它是sprite。
LabelAtlas&
如果你用cocos2d-x项目模板创建过项目,那么你已经看过它的效果了,就是左下角显示帧率的数字。 因为帧率一直在变,使用CCLabelTTF的话效率太低,因为只是数字所以也犯不上使用 CCLabelBMFont 加载那么大的文字图像,所以使用这个比较合适。
比如说,我们准备显示 0-9 十个数字,我们可以在一张图片中制作好这十个数字。每个数字都有相同的宽度和高度。将它保存在资源中。别忘了设置复制。
比较重要的是,这十个数字要按照 ASCII 顺序排列,我们要设置第一个字符的 ASCII 编码,这样,Cocos2d-x 就可以直接计算出不同字符对应的图形了。
CCLabelAtlas* diceCount=CCLabelAtlas::labelWithString("1:", "nums_font.png", 14, 21, '0');
第一个参数:显示的内容:1x,你也许会奇怪为什么是1x,因为使用的png图必须是连续的,因为程序内部是议连续的scall码识别的。9的后一位的&:&,所以先实现x就得用&:&代替。
第二个参数:图片的名字
第三个参数:每一个数字的宽
第四个参数:每一个数字的高
每五个数字:开始字符
LabelAtlas* diceCount = CCLabelAtlas::create("100:", "nums_font.png", 14, 21, '0');
diceCount-&setPosition(Point(visibleSize.width - 150, visibleSize.height / 2 - 50));
addChild(diceCount);

我要回帖

更多关于 cocoscreator 字体 的文章

 

随机推荐