Unity中使用TextMeshPro打出Emoji表情

这篇具有很好参考价值的文章主要介绍了Unity中使用TextMeshPro打出Emoji表情。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


最近遇到一个需求,在聊天框中支持用户的Emoji输入,查了半天资料没有一个能说清楚的,于是自己研究琢磨了下。
最终效果
最终效果可以在APP输入框中使用系统的输入法输入emoji表情并显示,如下
unity开发对emoji表情包 微信,unity,游戏引擎


1 制作Emoji图集

1.1 准备好emoji素材

找到emoji图片,注意需要是 unicode.png 格式命名的。github上一些开源项目有这些图,或者到这个链接(提取码: 0uN0 )下载

unity开发对emoji表情包 微信,unity,游戏引擎

准备使用。

1.2 下载 TexturePackerGUI 软件

到这个链接下载并安装,打开软件
unity开发对emoji表情包 微信,unity,游戏引擎

语言的切换在这里
unity开发对emoji表情包 微信,unity,游戏引擎

1.3 制作图集并输出

unity开发对emoji表情包 微信,unity,游戏引擎

将Emoji图片文件夹拖入到左侧栏目里,同时右侧的数据格式切记选择 JSON(Array), 而不是 Unity的texture和json格式.
点击发布精灵表,输出保存即可。
unity开发对emoji表情包 微信,unity,游戏引擎

unity开发对emoji表情包 微信,unity,游戏引擎

2 制作TextMeshPro素材资源

2.1 导入 TextMeshPro 库

项目中在 PackageManager中导入 TextMeshPro , 注意版本为Pre-Release的3.2.x的而不是当前最新的Release 3.0.x
unity开发对emoji表情包 微信,unity,游戏引擎

在 Project Settings 可以打开Pre版本的展示
unity开发对emoji表情包 微信,unity,游戏引擎

不过可能是网络因素或者中国版因素,很大可能开启了pre版本拉取依旧package manager里不展示,如果这样的话可以到 TextMeshPro的github源码库下载并导入该库
unity开发对emoji表情包 微信,unity,游戏引擎

记得将Essential素材导入
unity开发对emoji表情包 微信,unity,游戏引擎

2.2 制作 TextMeshPro 的 Sprite Assets

打开 Sprite Importer 开始制作TextMeshPro的SpriteAssets
unity开发对emoji表情包 微信,unity,游戏引擎

将1.3制作输出的文件拖入,勾选 use filenames as Unicode
unity开发对emoji表情包 微信,unity,游戏引擎

然后Create Sprite Asset,没问题的话会输出结果
unity开发对emoji表情包 微信,unity,游戏引擎

再点击 Save Sprite Asset 保存即可
unity开发对emoji表情包 微信,unity,游戏引擎

建议将这些素材放到TMP Essential目录里,刚好他里面也有个emoji的demo
unity开发对emoji表情包 微信,unity,游戏引擎

3 打出完美的emoji表情

3.1 将上一步的 Sprite Assets 引用到 TextMeshPro 的设置中

选中 TMP Settings 将上一步导出的 Sprite Assets 拖入设置为 Default Sprite Assets
unity开发对emoji表情包 微信,unity,游戏引擎

此时就可以测试TextMeshPro打字打emoji了,win10的默认微软输入法和市面上的输入法一般都支持直接打emoji,例如键盘输入拼音 haha 候选里面就会有emoji
unity开发对emoji表情包 微信,unity,游戏引擎

UI结果如下所示,不尽人意,图片内容有裁剪和其他内容,并且图片位置下移或不对劲
unity开发对emoji表情包 微信,unity,游戏引擎

3.2 调整 TexturePackerGUI 输出的细节

按照如下设置配置 TexturePackerGUI
unity开发对emoji表情包 微信,unity,游戏引擎
unity开发对emoji表情包 微信,unity,游戏引擎

重要的几个点为布局里的

  • 大小限制-POT(2的幂)
  • 强制正方形-勾选
  • 缩放模式-平滑
  • 算法-网格/条带
  • 允许旋转-不勾选

做到上述配置,再次导出并制作Sprite Assets, 并在 TMP Settings 里拖入新的Sprite Assets即可观察效果。 建议新制作导出制作Sprite Assets是重新命名保存个新的文件并在TMP重新拖动,防止Unity不更新素材文件等。
到这里,图片可以正常显示了。
unity开发对emoji表情包 微信,unity,游戏引擎

不过位置依旧不对,需要将图集的锚点重新设置,按照实际图片的需求设置并导出测试。我使用的emoji图片需要以下设置。
在 TexturePackerGUI 左边的列表随便选中一张图双击进入详情,将锚点设置为下面这样,默认应该是预定义里的中央0.5;0.5 ,自己调整并且点击那个回车按键,这样新导入的图片就会使用这个配置。我这里设置为0.8并且按了回车。然后将左边的图片文件夹选中点 delete 按键删了,重新导入,这时所有图片都是这个锚点配置了,重新点击发布精灵表 即可
unity开发对emoji表情包 微信,unity,游戏引擎

最终的效果如图,这样就基本OK了
unity开发对emoji表情包 微信,unity,游戏引擎

这个链接(提取码: 3pv3 )可以下载最终导出的json和png直接制作sprite assets

至此,就结束了TextMeshPro制作带unicode的emoji表情功能的sprite assets


如果您觉得对您有帮助,可以点这里请我喝杯咖啡,同时相关资源也会同步免费发布文章来源地址https://www.toymoban.com/news/detail-801561.html

到了这里,关于Unity中使用TextMeshPro打出Emoji表情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML常用表情Emoji‍♂️和Emoji参考手册

    HTML表情可以用来在网页中插入各种表情符号图标,丰富了网页表现形式和视觉效果。下面是一些常用HTML表情代码大全📜 ⚽🐰🦋🌅💥🍐🍞🙇🏌 🐶🐔🍃 🌞🌈🙈🍀💜 🕊🐯🙋‍♂️ 🔥⏰🧧📢🐾🐠🥤🐌🙏💕😼🎈🍓💤🌟🐈🐝🌕💫🥫🌪💪🥛🎹🥦🐠🔒🍌

    2024年02月13日
    浏览(43)
  • uniapp - [全端兼容] 详细使用 emoji 表情包,在输入框中发送及显示 emoji 表情(全平台小程序/ H5 / App通用,类似微信聊天的小表情,支持文字与表情混合在一起,后端易存储)

    网上的教程都太乱了,各平台之间不兼容、各种显示表情的 BUG 一大堆问题,很难进行复制使用。 本文 实现了在 uniapp 全端兼容(h5网页 / 小程序 / 安卓苹果app / nvue等)项目开发中,详细引入并使用 emoji 表情库插件,支持表情的自定义增删、表情样式控制等, 全平台通用插

    2024年02月15日
    浏览(333)
  • HTML emoji整理 表情符号

    参考链接: https://blog.csdn.net/qq_53679247/article/details/127383775 https://chat.xutongbao.top/#/ai/chat 

    2024年02月09日
    浏览(46)
  • ChatGPT实现markdown 格式与 emoji 表情

    书写文章时,巧妙的使用一些小图标,可以给文章增加不少的灵动感,读者也会感觉更加轻松。恰当的图标也能增进读者对内容的理解。ChatGPT 目前不能直接联网,但可以使用 emoji 表情文字来达到类似的效果。我们在不少 GitHub 的项目介绍和个人介绍页面上,都可以看到在列

    2024年02月07日
    浏览(44)
  • 表情符号(emoji)大全,只此一文便够了

    本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 全文介绍 emoji 表情符号的相关知识、资源、输入等,以及符号收集,便于复制粘贴。 建议收藏,取用方便。 【原创:AhcaoZhu大侠】 😀😁😂🤣😃😄😅😆😉😊😋😎😍😘🥰😗😙🥲😚☺️🙂🤗🤩🤔

    2024年02月02日
    浏览(44)
  • 【动画进阶】有意思的 Emoji 3D 表情切换效果

    最近,群里面的同学发了这么一个非常有意思是动画效果: 原效果地址 -- CodePen Demo -- Letter Hop 当然,原效果,主要使用了 GSAP 动画库以及一个 3D 文字 JavaScript 库: 但是,这个效果,其实本身并不复杂。 本文,我们将不借助任何动画库,尝试用最简单的 CSS 和 JavaScript 代码还

    2024年02月14日
    浏览(40)
  • Java 21增强对Emoji表情符号的处理了

    现一个 Java 21 中有意思的东西! 在 java.Lang.Character 类中增加了用于确定字符是否为 Emoji 表情符号的 API,主要包含下面六个新的静态方法: 这些静态方法通过接收字符的 codePoint 来判断是否为表情符号来返回 boolean 值。 所以,我们可以用 isEmoji 方法来判断字符串中是否有表情

    2024年02月05日
    浏览(49)
  • 微信消息收发与微信内部emoji表情转义

    目录 微信内部emoji表情转义与消息收发 一、概述 二、常用标准emoji表情字符、微信内部转义符、unicode对照表 1、比如 2、微信聊天窗口emoji表情字符 2.1、PC端表情选择,01~03排: 2.2、PC端表情选择,04~06排: 2.3、PC端表情选择,07~09排: 2.4、PC端表情选择,10~12排: 2.5、PC端表情

    2024年02月12日
    浏览(60)
  • Android一步一步教你实现Emoji表情键盘

    背景: 说到聊天,就离不开文字、表情和图片,表情和图片增加了聊天的趣味性,让原本无聊的文字瞬间用表情动了起来,今天给大家带来的是表情键盘,教你一步一步实现,先来看下效果图: 效果图 功能: 1、如何控制表情键盘与输入法的切换 2、如何解析表情 3、如何处

    2024年02月16日
    浏览(42)
  • pytest pytest-emoji通过表情包展示执行状态

    pytest-emoji 是一个用于在 Pytest 测试运行期间显示 emoji 表情的插件。它可以为测试结果添加一些有趣的表情符号,以增加测试报告的可读性和趣味性。 使用 pytest-emoji 插件非常简单,只需按照以下步骤进行操作: 首先,确保已经安装了 pytest ,可以使用以下命令来安装它: 然

    2024年02月03日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包