在我们工作中,可能经常有这样的需求,就是需要图文混排,因为这个对于原生或web都是比较容易的事情。但是我们用unity的话,首先unity最开始只想做纯游戏侧的引擎,一开始甚至还没有一个商业化的ui工具,后面才结合了ngui成为ugui,当然现在也出现了uielement。但要做到图文混排一开始还是不容易的,需要四处找插件,甚至需要自己想办法文字和图片自己做结合来实现。

经过了一段时间后unity出现了textmesh,他可以实现图文混排,他图文混排的方式相当于是多一个材质,然后再语法上用类似<quad material=1>来实现。实际上他也能实现图文混排的方式,只需要打个图集,把图集放到材质上,材质放到textmesh的第二个材质上就好了。

这个图集材质是长这样的:

实现的效果是:

看上去没问题,能实现效果。但是他有几个问题:

第一就是他的设置图片的方式:<quad material=1 x=0.001953125 y=0.244140625 width=0.25 height=0.125/>

注意这里的x,y,width,height都是0到1的,也就是你需要自己把图片的位置和图片的宽高通过图集的宽高换算出来(实际上就是算偏移)。

比如x=250;图集的宽是1024;那么真正的x就是250/1024。

这里如果你的表情多,就会有很多这种除法运算,整体来说效率不高。

第二就是你用在输入框或者表情列表下的话你可能就很难做了。

因为输入框我们如果用ugui的话,他已经帮我们关联好相关输入的信息,我们貌似没办法给他增加TextMesh方式来实现图文混排的效果(如果这个不重要用标记代替也行)

但是致命的是你可能没办法再一个drawcall下用TextMesh来实现表情列表。因为ugui里面的材质都不支持多材质。

当然如果你说不用ugui或者自己改造,用mesh自己实现也是可以的。但是你就要做很多适配的工作了。

也就衍生出以下说的一种比较适合上面我说的情况的,需要图文混排,需要文字输入中带图片,需要列表只有一个drawcall。

那就是TextMeshPro了。

这个是后面unity引进来的TextMesh的升级版。unity甚至把他接入到了各种text里面。

用Tmp实现图文混排就简单了。

我们用的是spriteasset的方式。

使用<sprite="DefaultSprites" name="Unity">的方式显示一个表情, sprite是textmeshpro集的命,name是具体的图片,也可以用index。

另外textmeshpro集要放在“TextMesh Pro\Resources\Sprite Assets”下(除非你改了他的路径),改路径的地方是

如果我们要支持中文或其他语言,我们就修改下fontasset的字体就好:

点击:

选择这个fontasset,然后修改下面这里:

一般不需要自己做字体,除非你有特殊字体。

但是我们现在只有默认的表情

我们当然像要自己的表情,那就需要自己来制作一下表情图集了。

我用的是TexturePacker来把图集打出来。但是要注意不要让他支持旋转,让他正常排列就好。

然后在图集上选择sprite和spritemode选择multiple,这样才能编辑图片

选择sprite editor

这里注意锚点一定要放在左下角,然后保存。

然后需要制作具体的fontasset了,右键这个图集:

制作好的图集放在我们设置的spriteasset的目录下:

放到这里就可以在项目中用这些表情。

最终展示效果

这个文本时这样出来的:

然后其他的展示效果如下:

这里说以下表情列表需要更改下他们的render queue,让相同的材质在一个queue下,不同的不要在一个queue下,这样才能让他们合批。以下时其中一个示例

好了,对比下一排和两排的效果,可以看到他们没有drawcall的增加,我们的需求解决了。

下面是两排的示例:

但是这里要注意的是不支持gif,gif图片可以用序列帧的方式来播放。建议发gif动画就单发,不要连着文字一起发,也就是点击gif的表情就发出去把,不让他带文字了。

unity 图文混排方案相关推荐

  1. Unity图文混排的几种方式

    方法一:TextMesh - TextMesh是Unity原生的支持图文混排的方式. - 使用方法 在GameObject下挂上TextMesh,会自动追加上MeshRender,之后在Materia ...

  2. iOS - 图文混排技术方案分享

    前言 不少同学在工作中都能遇到图文混排的需求.但是实现图文混排的技术方案有好几种,相应的方案优劣也有差别.今天和大家一起分享一下图文混排的技术方案以及我的选择. Demo和解析工具已经开源 GitHu ...

  3. 【游戏开发实战】Unity UGUI Text图文混排(聊天文字混表情),支持动态表情,出招吧表情帝

    文章目录 一.前言 二.最终效果 三.具体使用 1.导入表情素材 2.设置图片格式 3.生成表情图集 4.UI-EmojiFont.shader 5.材质球 四.测试 五.结束语 一.前言 点关注不迷 ...

  4. Unity UGUI实现图文混排

    目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...

  5. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  6. Unity Emoji表情(图文混排)2022最详细教程

    文章目录 前言 一.emoji是什么? emoji (日本在无线通信中所使用的视觉情感符号) 二.使用步骤 1.将源码文件导入自己的项目中 步骤一:将Editor目录文件EmojiAtlasBaker ...

  7. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  8. 为了用Unity来实现APP效果的页面,自制一个简易的图文混排系统。

    图文混排设计方案 实现一个Unity支持的简单图文混排模块,实现时需要考虑尺寸适配的限制,设计思路是自定义标签,采用微信朋友圈里的那种流式布局,一行一个标签,做一个一维的列表,方便手动编辑也方便程序实 ...

  9. Unity TextMeshPro图文混排

    笔者最近项目使用TextMeshPro完成图文混排的需求,以及图文超链接,总的来说功能很强大,没遇到什么坑. 这里记录一下图文混排实现的基本流程流程. 制作需要混排图片.asset文件 方式一 使用图 ...

最新文章

  1. 读WEB标准和网站重构后的一些感想
  2. 大数据笔记2019.5.6
  3. Linux inotify功能及实现原理【转】
  4. SCCM2012升级SP1系列之配置管理SCCM2012①发现和管理SCCM2012客户端
  5. AV1,实时编码READY
  6. java 常见bug_java常见bug
  7. Git中非常重要的一个文件——.gitignore详解
  8. javaweb论文参考文献(2020年精选91个)
  9. java application.doevents_Application.DoEvents()笔记
  10. 散列表,这一篇就够了,链地址法
  11. 小米 pro 笔记本拆机-加固态
  12. 球球大作战JAVA小游戏
  13. Android Q安全锁屏下进入google photos不弹bouncer界面
  14. [字节跳动]2018秋招算法题【持续更新中】
  15. 大鱼吃小鱼小游戏完整版
  16. What the f*ck Python!
  17. 李群、李代数只求理解不求数学推导
  18. 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇
  19. 为什么所有APP都想获取你的定位?
  20. 我玩的王者荣耀(一)——鲁班

热门文章

  1. 人体神经系统分布图图片,神经系统分布图片高清
  2. 高德地图SDK在API 31以上崩溃的问题
  3. 入手评测 暗影骑士龙和暗影骑士擎哪个更值得入手
  4. 同为标准版 OPPO Reno7和华为nova9怎么选,这几点要搞清楚
  5. Asp.net 中将文字写入图片中
  6. 【linux命令学习】— cut 和 tr 命令学习
  7. ECB(实体边界控制)模式
  8. 哈哈日语 日语五十音学记资料汇编
  9. 大于2TB的卷的知识.主要关于windows, EFI,GPT
  10. 海外市场交易执行策略的实践