查看: 14214|回复: 6
打印 上一主题 下一主题

[教程] unity 3d中使用BMFont制作NGUI清晰字体

[复制链接]

19

主题

3

听众

1357

积分

助理设计师

Rank: 4

纳金币
636
精华
0

活跃会员

跳转到指定楼层
楼主
发表于 2013-12-26 16:03:33 |只看该作者 |倒序浏览
     1.大家可以在这免费下载到我们今天的主角工具BMFOnt。

    下载:http://download.csdn.net/detail/hejianchun1314/6772301


     2.我们把它安装好后打开它,就是个样子了。
          1.png

    3.我们现在来制作我们想要的一些文字,这里我用来测试。新建一个txt文本文档,里面我的内容是: 大家好 。切记保存为UTF-8编码格式。
          2.png

   4. 一切准备工作都做好了。现在我们来用BMFont来制作我们想要的文字吧。首先我们来设置下字体(就是显示的是用哪种字体),选择Options---Font setting.
       3.png
     这里我选择用微软雅黑(如果你不喜欢用微软雅黑,你也可以选择你自己喜欢的字体,如果你电脑没有你喜欢的字体,那么      你只需要从网上下载你喜欢的字体安装即可选择你喜欢的字体,一般我们在游戏当中都会用些好看的字体来增加我们游戏的      美感,这里就会用到其它字体,那么你就可以这样做了)。其中设置的一些参数如下。
          4.png


     我来解释下上面比重重的设置参数:
     Size:字体的大小              Match char height: 匹配字符的高度
     Bold:字体加粗               Ltalic:斜体
    Font  smoothing:让字体平滑   Level:就是字体的水平距离
    一般设置像上面的一样都能满足平时的要求。(这里的设置就是我们以后会用到的字的属性)

   5. 字体设置好了,那我们现在来导入我们刚才的txt(切记UTF-8格式)。选择Edit—select cahr from file 。
   
当我们导入后,我们可以看看是否成功了,在左下角可以看见,如图(我这里的txt里只有3个字,你也可以自己随意增加)

6.png

  6. 我们接下就是要对最终导出结果设置。选择Options—Export options
    7.png
设置参数如下:
8.png



这里要注意是:
  • Spacing : 2个字体之间的间隔是多大
  • Width Heigth 这个就是我们等下导出的图片的大小。这里要注意数字越大占用的资源空间就越大,所以我们要选个合适的值(2的n次幂)。
  • Bit depth 选择32,要不你的字体不会很清晰。
  • Font descriptor 选择Text.
  • Textures 最好选择png吧
    A,R,G,B我就不多说了。

    7. 我们现在来开始导出了选择Options—save bitmap font as.
9.png
     随便取个名字吧,我这里就叫bmf.点击保存。
    10.png
   8.  到刚才导出的文木,我们现在就能看见我们有着2个文件了。
    11.png

   我们把bmf.fnt改成bmf.txt。 如图
    12.png

     我们现在可以打开看看里面的内容(这个在后期会讲到,有点重要)
    13.png


其实这里面就是我们队字体设置的属性


9. 好了,我们把这2个文件放进有导入NGUI插件的工程来制作文字吧(NGUI里面有文字自作功能,如果是mac系统的话,无需NGUI,就可以下载Hiero这个软件来制作了)。我们打开NGUI的字体制作面板,Shift+Alt+F。如图:

      14.png

      15.png

       10.现在让我们来显示我们的字吧,通过NGUI创建UI,创建widget(选则label吧)。效果图如下:
16.png

在上面我们可以看到我写的是大家好  显示了吗,其实质显示了大家好3个字在里面。这个原因就是我在制作字体的时候,在txt里面也就只有大家好这3个字。所以就显示了这3个字,其他的没有显示出来,由此大家可以自己随意加入自己想要的字体。

虽然现在NGUI支持动态字体了,但是我觉得这个以后还是有机会用到的。



当我们运行的时候,有的童鞋会发现字体不清晰,这个问题我也弄了很久才弄好了,如果你觉得字体比较细,想加粗点,那么你可以在第四步的时候把Bold打钩,outline thickness的值增大为2  ++;我们在设置一下导入unity中的字体图片的属性  如图:


再来看看是不是清晰很多了。  呵......


5.png (49.57 KB, 下载次数: 363)

5.png

17.png (13.8 KB, 下载次数: 349)

17.png

已有 2 人评分纳金币 收起 理由
may + 5
艾西格亚 + 5

总评分: 纳金币 + 10   查看全部评分

分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

ku 智囊团   

89

主题

2

听众

5万

积分

首席设计师

Rank: 8Rank: 8

纳金币
25
精华
1

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

沙发
发表于 2013-12-26 18:01:13 |只看该作者
不错,但基本最后都是图形化
回复

使用道具 举报

may    

8830

主题

80

听众

7万

积分

首席设计师

Rank: 8Rank: 8

纳金币
52304
精华
343

最佳新人 热心会员 灌水之王 活跃会员 突出贡献 荣誉管理 论坛元老

板凳
发表于 2013-12-26 18:44:09 |只看该作者
不错的教程,感谢楼主的分享
回复

使用道具 举报

2

主题

9

听众

6387

积分

高级设计师

Rank: 6Rank: 6

纳金币
881
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

地板
发表于 2013-12-27 05:42:40 |只看该作者
不错的教程,感谢
回复

使用道具 举报

0

主题

1

听众

1505

积分

助理设计师

Rank: 4

纳金币
4
精华
0
5#
发表于 2013-12-27 09:12:59 |只看该作者
不错的教程   但以后这种会月用越少
回复

使用道具 举报

0

主题

1

听众

592

积分

初级设计师

Rank: 3Rank: 3

纳金币
314
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

6#
发表于 2013-12-27 16:23:44 |只看该作者
貌似真的很牛的样子
回复

使用道具 举报

xx232    

17

主题

8

听众

3499

积分

中级设计师

Rank: 5Rank: 5

纳金币
865
精华
0

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

7#
发表于 2014-1-9 19:39:07 |只看该作者
额  其实那样也没有清晰多少  稍有改善吧
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

关闭

站长推荐上一条 /1 下一条

手机版|纳金网 ( 闽ICP备08008928号

GMT+8, 2024-5-6 19:39 , Processed in 0.096791 second(s), 39 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部