教你使用免费的BMFont工具和Photoshop来制作纹理贴图和fnt文件

news/2024/7/20 22:39:37 标签: cocos2d, IOS, BMFont, fnt, 纹理贴图

Cocos2d中使用CCLabelBMFont类时,需要提供纹理贴图和对应的fnt文件。制作文理贴图和fnt文件有下面这几种软件:

Glyph Designer (支持WindowsMac平台,收费,稳定)

TinyFont (功能上要比Glyph Designer少,操作简单,支持Mac平台,收费)

Hiero (需要Java虚拟机,支持WindowsMac平台,功能有bug,免费)

BMFont (支持Windows平台,功能相对简单,稳定,免费)

 

从成本角度考虑,我们排除掉前两个软件,Hiero环境搭建相对比较复杂,而且最终生成文理文件的功能也不稳定,有bug,因此我们选择BMFont来制作,虽然可以实现的效果简单一点,但是免费而且稳定,并且本文中我们来教你如何通过Photoshop来丰富我们最终得到的纹理效果。

 

BMFont工具的下载地址:

http://www.angelcode.com/products/bmfont/

 

首先我们介绍一下BMFont的使用方法。

打开BMFont的界面如下:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

看到左侧为可选的字符列表,右侧为分类选择列表。打开菜单栏中的Options菜单,我们可以看到FontSettingsExportOptionsVisualizeSavebitmap font as等菜单项。

 

选择FontSettings,打开字体设置:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

我们看到字体设置中可以设置字体(Font),添加额外的字体文件,设置字符集,字体的大小,样式等属性。Outputinvalid char glyph选项用来设置当制定字符不在TrueType字体定义中的时候,是否需要使用Unicode中定义的fallbackfont来显示相应的字符。关于TrueTypeFallbackfont详细介绍请参考:

http://baike.baidu.com/link?url=X8e7AnhU50_k5m9U429tgNLU4V1Buf7iZ7-7HArXejKXI9dSnsL9I7Z9SHNll9BliOg9VypqzexfYxs48XUJVK

http://en.wikipedia.org/wiki/Fallback_font

Do not include kerning pair用来设置是否允许使用字间距配对来调整字体间距。

关于KerningPair的参考资料:

http://www.blueidea.com/design/doc/2007/5160.asp

下面还有一些关于图像栅格化(rasterizing)的选项,有兴趣的朋友可以参考官方手册中的介绍:

http://www.angelcode.com/products/bmfont/doc/font_settings.html

最后Effects中可以设置描边(Outlinethickness)大小。

 

接着我们来看ExportOptions,即导出设置:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

Padding用来设置导出的纹理图中每个字符文理的内边距,Spacing用来设置字符纹理图之间的距离(不影响字符纹理的大小),Equalizethe cell heights用来设置所有的字符纹理高度相同,Force offsets to zero选项勾选后,生成的每个字符纹理的xoffsetyoffset都会被置为0xadvance等于字符纹理宽度,并且默认选择Equalizethe cell heights

下面的Texture用来设置纹理贴图的总大小,当改大小不足以装下所有字符时,会使用分页的方式来实现,即一个fnt文件对应多张png纹理图。

Chnl Value用来设置ARGB通道,关于通道的使用方法,参考官方文档中的说明:

http://www.angelcode.com/products/bmfont/doc/export_options.html

常见的几种设置方法:

32位白色字符+黑色边框:outline,red = green = blue = glyph

32位白色字符(无边框):alpha =glyph, red = green = blue = one

Preset中定义了一些预置的通道设置供用户选择。

 

File format中用来设置导出的fnt文件类型和纹理贴图文件类型,以及文件压缩方式。

 

Visualize菜单项用来预览生成的纹理贴图效果。

 

Save bitmap font as…菜单项保存fnt文件和纹理贴图文件。

 

下面我们制作一个小例子:

首先我们选择一种字体,例如常见的Arial字体,然后我们在右侧的列表中选择第一个分类,然后在左边的字符中选中下面图中标出的字符(BMFont中选中字符为浅灰色,未选中字符为深灰色,最终导出的时候,BMFont只会为我们导出选中字符,所以一定确保你选择了字符,不然会得到一张空白的纹理图):

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

接着在FontSettings中设置:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

Export Options的设置:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

然后导出pngfnt文件。

接着使用Photoshop打开图片,设置图层属性如下:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

 

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

 

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

设置完成后得到下面的效果:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

我们在前面ExportOptions里面之所以设置了右侧和底部的Padding3,就是为了为我们的投影留出空间。

我们在Xcode中用保存好的pngfnt文件来测试一下输出的效果,调用代码:

CCLabelBMFont*bmFont = [CCLabelBMFont labelWithString:@"test1234~~~"fntFile:@"fntexample.fnt" width:0 alignment:kCCTextAlignmentLeft];

bmFont.scale = 2;

bmFont.position =ccp(200, 200);

[selfaddChild:bmFont];

显示效果:

【原创】教你使用免费的<a class=BMFont工具和Photoshop来制作纹理贴图fnt文件 - 远行的风 - 风的驿站" />

这里只是举一个简单的例子,我们还可以结合BMFontPhotoshop制作出很多更为好看的文字效果,大家可以在实践中根据自己的需要来进行设计。

 

教程就到这里,如果有什么问题欢迎留言。


http://www.niftyadmin.cn/n/878313.html

相关文章

大话cocos2d中的文字显示(CCLabelTTF、CCLabelBMFont和CCLabelAtlas)

cocos2d中提供了三种文字显示方式&#xff0c;分别是CCLabelTTF&#xff0c;CCLabelBMFont和CCLabelAtlas&#xff0c;三种方式的效率由低到高&#xff0c;我们下面依次进行介绍。 CCLabelTTF&#xff1a; CCLabelTTF 每次调用 setString &#xff08;即改变文字&#xff09;的…

tail java_GitHub - mysmalltail/JavaWEB: JavaWEB学习之中的一些Demo(废弃)

2017.9.27随着开发经验的增加,现在觉得这种Demo对于学习一个框架起不到太大的作用,顶多是个参考,并且由于使用经验的增加,对于之前一些错误的用法很难得到纠正,如果想要快速入门的话官方造轮子才是最佳选择,类似豆瓣有许多开放的API,都可以用来练手,嘴周该项目不再更新,这点经验…

手把手教你制作那个风靡的flappy bird小游戏(一)

前一阵子很火的一款手游flappybird&#xff0c;不知道大家有没有玩到“根本停不下来”的程度&#xff0c;不过刚刚学会了cocos2d和obj-c的我准备拿这款游戏练练手&#xff0c;熟练一下自己对cocos2d的使用。 首先我们当然还是要秉承一贯的风格&#xff0c;自己做美工。当然&am…

手把手教你制作那个风靡的flappy bird小游戏(二)

这一篇教程中我们继续来完成flappy bird的制作。 首先来制作Bird&#xff0c;我们在Bird类中添加一个成员&#xff1a; CCSprite* sprite; float scale; 然后在初始化方法中初始化这两个成员&#xff1a; sprite [CCSpritespriteWithFile:"bird-01.png"]; spri…

手把手教你开发一款IOS飞行射击游戏(一)

今天带来的是一个IOS上的飞行射击游戏&#xff0c;通过整个开发过程&#xff0c;帮助和我一样的新手初步了解Cocos2d游戏开发的一些基础知识以及开发流程&#xff0c;熟悉开发过程中使用到的各种工具。由于刚刚接触IOS开发不到3个月时间&#xff0c;有不对的地方或者代码有不完…

java阻塞线程池_线程池解决阻塞方法

一、序言当我们需要使用线程的时候&#xff0c;我们可以新建一个线程&#xff0c;然后显式调用线程的start()方法&#xff0c;这样实现起来非常简便&#xff0c;但在某些场景下存在缺陷&#xff1a;如果需要同时执行多个任务(即并发的线程数量很多)&#xff0c;频繁地创建线程会…

手把手教你开发一款IOS飞行射击游戏(二)

我们接着上一篇文章继续做我们的GameScene。 首先&#xff0c;我们来制作游戏的背景。这里我们希望我们的游戏背景不是那种死气沉沉的一动不动的背景&#xff0c;最好是动态的&#xff0c;并且有点层次感的背景&#xff08;好吧我承认&#xff0c;因为我做的是这样的&#xff0…

汉诺塔算法 java_汉诺塔算法java实现详解

import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;public class HanRuoTa {/*** 汉诺塔算法*/public static void main(String[] args) {int n 0;BufferedReader buf;buf new BufferedReader(new InputStreamReader(System.in));S…