NGUI图片字(Bitmap图片转文字)

简介:



用图片字而不是图片

美术和程序的配合,需要程序能够很快抓住问题重点并提出解决方案.美术出的图片字比我们使用的字体更好好看,那么是否要一个个图片去拼成数字呢?

NGUI创建图片字

准备材料

美术提供的数字图片

image

BMFont 字体制作软件

image

美术资源处理

1、使用BmFont先导出一张只有数字的图片字,会得到两个文件

image

2、将得到的xxx.fnt文件改后缀为xxx.txt

3、使用notepad++或Sublime Text打开(或使用其它带有列编辑功能的文本编辑器)

复制代码
info face="微软雅黑" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=2,2 outline=0
common lineHeight=32 base=26 scaleW=256 scaleH=256 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0
page id=0 file="space2_0.png"
chars count=10
char id=48   x=0     y=0     width=15    height=21    xoffset=0     yoffset=6     xadvance=15    page=0  chnl=15
char id=49   x=133   y=0     width=14    height=20    xoffset=1     yoffset=6     xadvance=15    page=0  chnl=15
char id=50   x=149   y=0     width=14    height=20    xoffset=0     yoffset=6     xadvance=15    page=0  chnl=15
char id=51   x=68    y=0     width=13    height=21    xoffset=1     yoffset=6     xadvance=15    page=0  chnl=15
char id=52   x=98    y=0     width=16    height=20    xoffset=-1    yoffset=6     xadvance=15    page=0  chnl=15
char id=53   x=83    y=0     width=13    height=21    xoffset=1     yoffset=6     xadvance=15    page=0  chnl=15
char id=54   x=17    y=0     width=15    height=21    xoffset=0     yoffset=6     xadvance=15    page=0  chnl=15
char id=55   x=116   y=0     width=15    height=20    xoffset=0     yoffset=6     xadvance=15    page=0  chnl=15
char id=56   x=34    y=0     width=15    height=21    xoffset=0     yoffset=6     xadvance=15    page=0  chnl=15
char id=57   x=51    y=0     width=15    height=21    xoffset=0     yoffset=6     xadvance=15    page=0  chnl=15
复制代码

4、通过观察上面的这段文本,其中的规律为

image

查找字符ID

其中字符的id可以通过BMFont得到,鼠标移动到一个字符上,右下角即会显示会该字符的ID,如下图片所示,选择0,右下角Id为48

image

制作NGUI字体prefab

5、根据规律修改BMFont导出的文件后,把 xxx.txt导入到Unity中,就可以使用NGUI的Font Maker制作图片字了

image

遇到问题?

6、字体Prefab制作好之后,如果遇到字体丢失,可以重新拖入字体信息txt

image

7、多测试修改下字体文件的间距及宽度大小,达到和美术那边一样的效果

我的例子

附上我的测试数据

美术图片尺寸:260 x 31

字符总数:共10个字符,每个字符的间距相等(方便x递增)

复制代码
info face="微软雅黑" size=32 bold=0 italic=0 charset="" unicode=1 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=0,0 outline=0
common lineHeight=26 base=24 scaleW=260 scaleH=31 pages=1 packed=0 alphaChnl=1 redChnl=0 greenChnl=0 blueChnl=0
page id=0 file="ingame_enemies_round_number.png"
chars count=10
char id=48   x=0     y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=49   x=26    y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=50   x=52    y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=51   x=78    y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=52   x=104   y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=53   x=130   y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=54   x=156   y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=55   x=182   y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=56   x=208   y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
char id=57   x=234   y=0     width=26    height=31    xoffset=0     yoffset=0     xadvance=26    page=0  chnl=15
复制代码

图片字效果

根据美术提供的这张图,程序调试出字体信息文件参数,就可以换使用图片字体一样啦

bitmap font

注意事项

建议

  • 美术出的图每两个字之间间距为2px,或根据实际情况
  • 数字从0开始,9结束(否则请修改文本的字符id)
  • 图片建议为png,带透明通道

确保事项

  • 一定要确保每两个字之间的间距相等

 

单张数字图处理

如果是美术给的是单张的图片,可以参考下面这篇博客 http://blog.csdn.net/keshuiyun/article/details/9960667

image


本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/4011259.html,如需转载请自行联系原作者

相关文章
|
11月前
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
|
2月前
|
PHP 数据安全/隐私保护 计算机视觉
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
ThinkPHP图片处理之压缩图片大小,图片处理之图片水印(添加平铺文字水印,并设置文字之间的间距和文字的角度)
34 1
|
3月前
img图片/svg图标与文字无法对齐
img图片/svg图标与文字无法对齐
44 0
|
4月前
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
如何实现图片多种颜色的文字混排并且带的背景颜色范围比文字图片范围大
34 1
【图片操作】给图片添加滤镜
现在我们都喜欢给图片添加滤镜,现在很多相机也自带了许多滤镜。我们可以在拍照的时候选择需要的滤镜。但是有时候我们需要给大量图片添加同样的滤镜,这个时候手动添加就非常麻烦了。为了方便,我们可以使用程序来帮我们完成添加滤镜的操作。
234 0
|
架构师 开发者
图片和文字控件|学习笔记
快速学习图片和文字控件。
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
|
存储 C#
[开源]基于WPF实现的Gif图片分割器,提取GIf图片中的每一帧
原文:[开源]基于WPF实现的Gif图片分割器,提取GIf图片中的每一帧   不知不觉又半个月没有更新博客了,今天终于抽出点时间,来分享一下前段时间的成果。   在网上,我们经常看到各种各样的图片,尤其是GIF图片的动态效果,让整个网站更加富有表现力!有时候,我们看到一些比较好看的GIF图片或者一些奇特的Gif图片,我们想要停留在某一帧看的清楚一点或者了解这个Gif动画到底是怎么实现的,怀着这种好奇的心理,我们来看一下,今天的开源项目,用WPF来实现GIF图片的预览和分离和保存。
1174 0
|
前端开发 Android开发 数据安全/隐私保护
Android图片添加文字水印并保存水印文字图片到指定文件
Android图片添加文字水印并保存水印文字图片到指定文件 package zhangphil.test; import android.
2932 0
|
前端开发 Android开发
利用PorterDuffXfermode绘制图片文字
PorterDuffXfermode是Android中用来对图层进行操作的类,类似于数学中的交集、并集,将上层(src)和下层(dst)进行特定的方式进行混合显示。
1037 0