一、前言

本文主要涉及到Text Mesh Pro的精灵做为字符功能的使用。在RPG游戏中经常会见到由艺术字组成的伤害数字，比如DNF，各种页游的伤害数字，而利用Unity的Text Mesh Pro插件，可以很方便的将图片作为文字使用。然而网上大多对Text Mesh Pro的教程只是说了普通文字的用法，翻遍百度竟然都没有说精灵如何作为文字使用，连官方文档都没讲清楚用法。

现在弄清楚之后在本文做记录，并将详细的使用方法记录下来。

二、实现效果

三、准备工具

Texture Packer GUI (本文使用5.1.0版本)

官方网站下载免费版就能满足需求，网址：https://www.codeandweb.com/texturepacker，或者自行下载其他版本都行。

如果数字的图片是分离的，也就是一个数字一张图，就需要一个软件做成图集，并在Unity中使用插件导入。如果是拼合起来的序列图，则不需要使用此软件。

Unity插件：Text Mesh Pro 1.4.0

请确认版本为1.3以上，因为插件的有些东西1.4里有变化。

四、制作

处理图片素材

图片素材一般用两种形式，一种是一个数字一张图片，1234都是分开的，二是拼合起来的序列图，只有一张图片，这里的处理步骤不同，分开来说。

第一种：分离的素材

图中展示的是DNF的伤害数字所用的素材，每个数字都是单独的一张图片，还有一些单词的图片素材。如果手里拿到的是这样的素材，就需要Texture Packer这个软件来制作图集。

（1）打开Texture Packer，文件格式选择【JSON {Array}】

在弹出的提示框中选择第三个【保持JSON Array】

如果没弹出这个框，可以点击主界面右上角的框架按钮再选择一遍【JSON {Array}】

（2）整理素材

需要注意的是，离散的素材需要将命名顺序整理好，如下图的形式：

数字靠前，暴击，治疗之类的字符靠后，这样在Unity里生成索引后，数字索引格式简单。

整理顺序主要是为了在导入unity之后，生成的数据索引不会乱掉，不用再进行额外的编辑，防止增加不必要的工作量。

（3）制作图集

将整理后的图片文件夹直接拖入Texture Packer左边，会生成图片列表：

接下来需要进行几个重要的设置。

输出文件，两个路径可以直接选择你在Unity中存储此资源的目录；

打包中的【算法】，选择【基本】，确保图片不会被旋转；

【修剪模式】可以选择没有，这样可以保留你为图片留出的空白，或者选择【裁剪，保持位置】，这个裁剪选项可以保障素材导入Unity生成索引时，索引顺序和你计划的一致。

一切准备完毕之后，点击工具栏【发布精灵表】按钮：

回到Unity查看资源，会有两个文件：

一个是合并完成的图片，一个是包含每个精灵数据的json数据文件。

（4）使用导入工具生成精灵配置

打开Window——TextMeshPro——Sprit Importer

将图片和json数据拖入对应的位置，点击【Create Sprite Asset】按钮

接着点击【Save Sprite Asset】按钮，保存配置文件。

至此，离散图片素材的处理完毕，可以直接跳到【应用】章节。

第二种：素材是拼合好的

如果手上拿到的是拼合好的序列图：

就不需要工具制作图集，直接拖入Unity，在Unity中进行分割。

点开图片的属性面板，将类型选为【sprite(2D and UI)】，模式选择【Multiple】，其他选项按自己需求设置。然后点击【Sprite Editor】按钮切分精灵。

切分时也要注意切图的顺序，最好从0开始按顺序切，也是为了保证生成索引后不用再返工修改。

然后就要生成精灵配置，这种情况下不需要Text Mesh Pro的导入工具，而是鼠标右键点击分割好的图片，注意点空白的地方是没有用的，点击【Create】——【TextMeshPro】——【Sprite Asset】

精灵配置文件会自动生成，并根据刚才切分的精灵做好配置：

至此，拼合序列图素材的处理就完成了。

应用

经过上述步骤处理完图片素材后，我们可以得到一个新文件，就是Text Mesh Pro帮我们生成的精灵配置文件：

接下来在场景中创建一个Text Mesh Pro物体，建议使用3D菜单中的那个，因为不需要创建Canvas。

点开文字物体的属性面板，展开【Extra Setting】，将精灵配置文件拖放到图示的地方。

插件还提供了一个全局的精灵配置，在项目中搜索【TMP Settings】，在【Default Sprite Asset】里可以设置默认的精灵配置文件。

接下来，我们使用富文本功能显示精灵数字。

在【Text】输入框里按照【<sprite=精灵索引>】的格式输入文本：

精灵索引值对应的是精灵配置——Sprite Character Table 里的Index值，如果索引值没有对应的精灵，则以普通文本显示。

如果有需要修改的索引，可以点击对应的精灵，使用上面的按钮工具进行修改。

结尾

最后实现一个暴击伤害，可以编写一个工具类，根据伤害值生成字符串来使用。

Text Mesh Pro 1.4.0实现图片组合伤害数字相关推荐

UGUI图文混排插件Text Mesh Pro
Text Mesh Pro插件下载地址: https://github.com/UnityTechnologies/Test_ShaderGraphBlog 插件在线文档: http://digita ...
unity Text Mesh Pro Sprite Animation 支持动图，动态表情
unity Text Mesh Pro Sprite Animation 支持动图,动态表情使用格式 <sprite='assetName' anim='first frame, last f ...
Axure RP Pro - 翻译 - Download下载 - Axure RP Pro 5.5.0.1955
Axure RP Pro - 翻译 - Download下载 - Axure RP Pro 5.5.0.1955 摘要本文是Axure RP Pro 5.5.0.1955版本的发布历史说明和更新说 ...
canpro脚本_AE/PR脚本-创建编辑导入导出专业字幕脚本 Subtitle Pro 2.8.0 + 使用教程...
Subtitle Pro是一个专业的插件,可让您直接在After Effects和Premiere Pro中为视频创建字幕.可将字幕快速的导入或导出.您可以导入.srt文件或任何字幕格式,也可以编写文 ...
使用image Pro plus 6.0分析细胞油红O染色结果计数/计算面积百分比
文章目录前言油红O染色简单步骤 image Pro plus 6.0下载链接使用image Pro plus 6.0分析油红染色前言自己做实验需要给细胞脂滴染色,在网上找资料摸索找到的一些内 ...
PhotoScape X Pro 4.1.0 中文版简单好用的图片编辑工具
PhotoScape X Pro 是 macOS 平台上的一款简单又好用的图片处理工具,PhotoScape X Pro 除了支持基本的图片处理外,还可以进行图片批量编辑,图片拼贴,图片拼图,图片转G ...
[Unity]利用Mesh在Unity中绘制扇形图片
背景最近碰到个功能, 要画一个扇形图案, 如下图: 美术原图: 需求是这个图形跟随角色, 在角色背后, 并且每个角色的扇形角度可能不同. So, NGUI和UGUI很好用的FilledType是用不 ...
Adobe Premiere Pro CC 2015.0 已停止工作【解决方案】
Adobe Premiere Pro CC 2015.0 已停止工作[解决方案] 参考文章: (1)Adobe Premiere Pro CC 2015.0 已停止工作[解决方案] (2)https: ...
【转载】基于AFNetWorking3.0的图片缓存分析
原文出处:Yasin的简书 http://www.jianshu.com/p/b1045c3fc8d0 图片在APP中占有重要的角色,对图片做好缓存是重要的一项工作. [TOC] 理论不喜欢理论的可 ...

Text Mesh Pro 1.4.0实现图片组合伤害数字

一、前言

二、实现效果

三、准备工具

Texture Packer GUI (本文使用5.1.0版本)

Unity插件：Text Mesh Pro 1.4.0

四、制作

处理图片素材

第一种：分离的素材

第二种：素材是拼合好的

应用

结尾

Text Mesh Pro 1.4.0实现图片组合伤害数字相关推荐

最新文章

热门文章