cocos2d-x中CCLabelAtlas的小图片拼接

简介: 美术在设计UI时,很多界面可能使用了数字图片来展示一些效果,比如CD或者 x1/x2等,一般她们都会切成很多单张小的图片,类似这样   cocox2d-x中CCLabelAtlas支持直接从图片中读取文字,但先要将上面的图片合并成到一张图片中。

美术在设计UI时,很多界面可能使用了数字图片来展示一些效果,比如CD或者 x1/x2等,一般她们都会切成很多单张小的图片,类似这样

 

cocox2d-x中CCLabelAtlas支持直接从图片中读取文字,但先要将上面的图片合并成到一张图片中。

CCLabelAtlas *pLabelAtlas = CCLabelAtlas::labelWithString(“text”, “png’s path”, single font width, single font height, first char);

text - 需要显示的文本内容

png’s path - 拼接后的png图片路径

width - 单个字符的宽度

height - 单个字符的高度

first char - 第一个起始字符,程序内部是依据ascii码的顺序进行偏移来截取字符的,如果某一位没有相应的字符,也应该在png中预留该图片的位置。

 

ascii码表如下(查看详情>>

如果第一个字符为“0”,那么字符“9”的偏移量就是 width * (57 - 48)

 

最开始对Texture Packer工具不熟悉时,发现里面的图片无法进行拖拽和自定义排序,就一直使用flash进行操作 - -!

设定好后台大小,然后一个字符建一个图层,然后定位,最后导出

第一次、第二次这样用,倒还好,第三次我就觉得非常之郁闷了,难道没有工具了吗?有点心不甘,又试了几次Texture Packer,然后成功了!!!

 

合并的图片,在里面不能人为的进行布局拖动,它是通过一些设置来控制的。比如这里,我们需要使用图片的名称进行控制(它是字符串比较,所以10.png 在 2.png之前,统一使用二位02.png、10.png就可以实现真正的排序)

Layout选项中,有一个Shape outlines选项,勾选后,就可以看到单张图片的“占位”了

默认Border padding、Shape Padding为2,这个很坑爹..

 

 

总结一下注意事项:

1、算法选用 Basic(默认的算法为MaxRects);

2、使用名称进行排序,升序;

3、设置默认的Border padding、Shape Padding为0;

4、取消裁剪(Crop、Trim);

5、勾选”Geometry”中的Allow free sizes;

6、选择输出(Output)选项中的,Image format,为RGBA4444,并选择Dithering为 抖动 + 通道(FloydSteinberg + Alpha);

 

其它特殊的文字,使用CCLabelBMFont、CCLabelTTF也可以实现上述效果,但是CCLabelTTF效率很低一般都不会使用,下一篇将介绍CCLabelBMFont的相关工具(Hiero)及使用…

 

参考:

cocos2d-x: CCLabelAtlas类

将一堆小图转化为BMFont工具

ASCII码表

 

关于Hiero工具,网上已经有很多教程:

cocos2dx显示中文字体方法Hiero

Cocos2d的字体生成软件Hiero v2.0 - Bitmap Font Tool的一些问题

 

 

 

------------------------------------------------- 2014/07/23 补充 ------------------------------------------------

后来经过研究,发现设置按上图的设置最为合适,上面单张图片大小为w * h = 21 * 24px,设置后,给定的大小为 w * h = 23 * 26px,为什么这样设置呢?

就是为了读取指定位置的文字时,左、右都留有1像素的空白,不然像上图中的4、5放大后,其实有部分重叠区域。放到游戏中看,就很容易看到黑边之类的

 

如果有多张空白图片,比如上图:+ ~ 0/9中间隔着,-./四个ASCII码,这里用四张空白图替代。但注意一定要取消勾选“Enable auto alias”,不然就只能看到一个空白占位了,如下图所示:

目录
相关文章
|
7月前
|
人工智能 自然语言处理 API
图片转音乐模型来了!Image to Music V2 :只需上传一张照片,自动转换成与图片内容匹配的音频!
图片转音乐模型来了!Image to Music V2 :只需上传一张照片,自动转换成与图片内容匹配的音频!
298 1
livp图片怎么打开以及怎么转换成jpg格式教程
livp图片怎么打开以及怎么转换成jpg格式教程
如何复制同一张图片,生成50张排列名称为1.jpg,2.jpg,3.jpg,4.jpg,顺序1-50张的图片,同一张图片生成50份,名字排序不一样怎样写
如何复制同一张图片,生成50张排列名称为1.jpg,2.jpg,3.jpg,4.jpg,顺序1-50张的图片,同一张图片生成50份,名字排序不一样怎样写
|
5月前
鸿蒙base64编码字符集转化成图片文件
鸿蒙base64编码字符集转化成图片文件
143 0
使用ffmpeg拼接两张图片
最近在工作中遇到了一个需求,就是需要将两张图片拼接在一起,作为一个封面图。如果只是临时拼接一张,我们可以只用photoshop之类的图片编辑工具,将两张图片拼接在一起。而我们的需要是需要实现自动化,由于之前使用过ffmpeg做过图片的操作,于是搜索了下,ffmpeg确实能实现两张图片的拼接,这里分享下相关操作的命令行。
166 0
|
JavaScript 前端开发
图片转base64、判断图片大小、图片压缩、图片上传
文章主要介绍 `js` 实现压缩上传图片转base64,其他的框架(如React、Vue、Angular)也可借此参考。**这个方法真实可用,已在实际项目中运行**。
337 0
|
编解码 前端开发 搜索推荐
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
在之前的几篇文章中,介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如[Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统](https://v3u.cn/a_id_143),我们可以使用svg来打造精美炫酷的分享小图标(icon),这一次我们使用python来将普通的静态的网站logo图片转换为带路径(path)的svg图片,这样就可以让网站logo能够变成动态的,作为一名不折腾不舒服斯基,一枚炫酷自带动画的网站logo自然能够满足我们的折腾欲,同时亦能击中我们的虚荣心。
Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
python 如何绘制动图(将300张图片生成gif动画)
最近,在绘制SST月均数据时,突然想看看近几十年sst的大致变化过程。说白了就是绘制一张gif动画,也算是学习过程啦。
python 如何绘制动图(将300张图片生成gif动画)
|
编解码 计算机视觉
使用ffmpeg将图片拼接为视频
本文介绍下如何使用ffmpeg将大量图片拼接成一个视频,并介绍其中部分参数的含义。
1205 0
使用ffmpeg将图片拼接为视频