unity实战之TextMeshPro实现聊天图文混排
前言
最近项目不太忙,看看以前的代码,总结记录下以前做的功能,翻到聊天这里,虽然几乎每个游戏都有聊天系统,但是我觉得还是有必要记录下聊天系统的实现。毕竟当初做这个系统的时候还是踩过几个坑。
1.文字自适应问题。
2.图文混排问题。
UI界面
1.创建滑动列表
首先创建一个可以上下滑动的列表,命名为chat_scroll
2.创建聊天预制
因为聊天是两人以上的,自己的聊天显示在右侧,别人的聊天消息显示在左侧。因此需要制作两个聊天框,分别代表自己的其他人,如下图的me和other。
创建的聊天预制如下:
3.使用TextMeshPro
注意:为了能实现表情加文字的效果,我们需要使用TextMeshPro作为消息显示
4.添加Layout Element
为聊天预制item添加Layout Element组件,如下:
Layout Element的Preferred Width和preferred Height值与me和other的长宽保持一致:
6.设置锚点
接着,我们需要设置游戏对象的锚点,如下图:
代码控制显示
1.获取游戏对象
首先我们需要获取到需要用到的聊天item的游戏对象:
local render = {}render.go = poolManager.AddObj("Modules/friendchat/worldChatItem.prefab", ui.world_content)local trans = render.go.transform--我render.me = utils.findobj(render.go, "me")render.me_headFrame = utils.findimage(render.me, "head/headFrame")render.me_headImg = utils.findimage(render.me, "head/headImg")render.me_lv = utils.findtext(render.me, "level/lv")render.me_name = utils.findtext(render.me, "topDes/name")render.me_sectionImg = utils.findimage(render.me, "topDes/sectionImg")render.me_sectionDes = utils.findtext(render.me, "topDes/sectionImg/sectionDes")render.me_msgTxt = utils.findtmp_text(render.me, "msgBg/msgTxt")--对方render.other = utils.findobj(render.go, "other")render.other_headFrame = utils.findimage(render.other, "head/headFrame")render.other_headImg = utils.findimage(render.other, "head/headImg")render.other_lv = utils.findtext(render.other, "level/lv")render.other_name = utils.findtext(render.other, "topDes/name")--名字render.other_sectionImg = utils.findimage(render.other, "topDes/sectionImg")--段位imgrender.other_sectionDes = utils.findtext(render.other, "topDes/sectionImg/sectionDes")--段位秒速render.other_msgTxt = utils.findtmp_text(render.other, "msgBg/msgTxt")
2.游戏对象刷新
刷新每个item的信息:
if message:GetUid() == playerDataManager.GetUid() then--判断消息是否是本人发送--自己local sender = message:GetSender()local friend = friendData:New(sender)render.me_headFrame.sprite = utils.loadsprite("frame", friend:GetFrame())render.me_headImg.sprite = utils.loadsprite("head", friend:GetHead())render.me_lv.text = friend:GetLevel()render.me_name.text = friend:GetName()render.me_sectionImg.sprite = utils.loadsprite("friendChat", friend:GetFrameImg())render.me_sectionDes.text = friend:GetSectionName()render.me_msgTxt.text = message:GetContent()CalcWorldChatWidthHight(render.me)render.me:SetActive(true)render.other:SetActive(false)elseSetActive(render.other_addRoom_Btn,message:GetSType() == 102)--邀请按钮是否显示local sender = message:GetSender()local friend = friendData:New(sender)render.other_headFrame.sprite = utils.loadsprite("frame", friend:GetFrame())render.other_headImg.sprite = utils.loadsprite("head", friend:GetHead())render.other_lv.text = friend:GetLevel()render.other_name.text = friend:GetName()render.other_sectionImg.sprite = utils.loadsprite("friendChat", friend:GetFrameImg())render.other_sectionDes.text = friend:GetSectionName()render.other_msgTxt.text = message:GetContent()CalcWorldChatWidthHight(render.other)render.me:SetActive(false)render.other:SetActive(true)end
3.文本自适应
注意上面代码中,使用到了CalcWorldChatWidthHight方法,CalcWorldChatWidthHight方法如下:
--世界聊天计算宽高
local function CalcWorldChatWidthHight(obj)local htext = utils.findtmp_text(obj, "msgBg/msgTxt").preferredHeight --22local wtext = utils.findtmp_text(obj, "msgBg/msgTxt").preferredWidth--445local bg = utils.findobj(obj, "msgBg")local msg_rect = utils.findrect(obj, "msgBg/msgTxt")local parent_rect = obj.transform.parentif wtext < 470 then --一行bg:GetComponent("RectTransform").sizeDelta = Vector2.New(wtext+30, 47)elseprintlog(utils.findtmp_text(obj, "msgBg/msgTxt").text,"内容")local num = math.ceil(wtext/470)--行数local hight = (num-2)*30+60bg:GetComponent("RectTransform").sizeDelta = Vector2.New(491,hight)--503endlocal sizeDelta = bg:GetComponent("RectTransform").sizeDeltamsg_rect.sizeDelta = Vector2.New(sizeDelta.x-30,sizeDelta.y)obj:GetComponent("RectTransform").sizeDelta = Vector2.New(sizeDelta.x-15,sizeDelta.y+40)parent_rect:GetComponent("LayoutElement").preferredHeight = sizeDelta.y + 40
end
说明:
470:一行的Text最大宽度为470
30:聊天内容背景宽度= Text实际宽度+30(30是为了让文字两边留有间隙,看着美观)
47:一行文字时,背景高度(可根据实际情况调整)
…
注意:代码中用到的数据都可以根据实际情况调整!
CalcWorldChatWidthHight方法的作用是实现文本宽高随着文字内容的变化而变化。支持一行显示文字是,文本宽度自适应;支持多行时,高度也能自适应。
纯文本聊天预览效果
加入表情
1.制作表情图集及配置
打开TexturePackerGUI,拖进所有表情,修改Framework为Json(Array)并设置Trim Model为None,输出路径按照实际情况设置:
2.导入表情
将步骤1生成的两个文件放入工程新建文件夹Emoji中:
3.生成Assets资源
选中Emjoji—emoji—选中所有表情资源—Create—TextMeshPro—SpriteAsset
生成的Assets资源如下:
将json数据和png绑定:
展开资源即可查看表情资源详情
4.为TextMeshPro指定默认资源
将生成的Assets资源指定给TextMeshPro默认资源,如下:
5.表情实现
当点击某个表情时,显示方法如下:
_input.text = string.format("<sprite=%s>",dx)
6运行,完美。
自动布局bug
当有新消息是,会发现名字和段位的自适应会出问题,具体表现未两者相互重叠,排版是乱的。这是因为 layout group 的排版计算是下一帧才会计算,我们添加后他不会瞬间计算,下一帧的时候他已经感受不到我们添加了东西。所以我们需要改成瞬间计算,添加代码:
render.me_rect = utils.findrect(render.me, "topDes")
render.other_rect = utils.findrect(render.other, "topDes")
UnityEngine.UI.LayoutRebuilder.ForceRebuildLayoutImmediate(render.me_rect)
UnityEngine.UI.LayoutRebuilder.ForceRebuildLayoutImmediate(render.other_rec)
unity实战之TextMeshPro实现聊天图文混排相关推荐
- ios 表情符号 键盘_iOS 表情键盘+gif聊天图文混排,看我的就够了
更新: 1.解决首次加载键盘卡顿的问题: 2.修改聊天布局方式,现在无需计算,更加丝滑. 前言: 之前做过[OC版本]和[swift版本]图文混排和表情键盘,说实在的很low,特别是键盘,整体只是实现 ...
- Unity使用自带组件实现图文混排自适应
1.背景图片跟随文字长度变化 新建UI结构. 在Image上挂载组件ContentSizeFitter和HorizontalLayoutGroup.根据需求调整跟随宽还是高,调整对应参数即可. 混排的 ...
- 【游戏开发实战】Unity UGUI Text图文混排(聊天文字混表情),支持动态表情,出招吧表情帝
文章目录 一.前言 二.最终效果 三.具体使用 1.导入表情素材 2.设置图片格式 3.生成表情图集 4.UI-EmojiFont.shader 5.材质球 四.测试 五.结束语 一.前言 点关注不迷 ...
- Unity TextMeshPro图文混排
笔者最近项目使用TextMeshPro完成图文混排的需求,以及图文超链接,总的来说功能很强大,没遇到什么坑. 这里记录一下图文混排实现的基本流程流程. 制作需要混排图片.asset文件 方式一 使用图 ...
- unity 图文混排方案
在我们工作中,可能经常有这样的需求,就是需要图文混排,因为这个对于原生或web都是比较容易的事情.但是我们用unity的话,首先unity最开始只想做纯游戏侧的引擎,一开始甚至还没有一个商业化的ui工 ...
- Unity图文混排的几种方式
方法一:TextMesh - TextMesh是Unity原生的支持图文混排的方式. - 使用方法 在GameObject下挂上TextMesh,会自动追加上MeshRender,之后在Materia ...
- Unity UGUI实现图文混排
目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...
- Unity UGUI图文混排源码(二)
Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...
- Unity UGUI图文混排源码--优化版
前言 因为有不少同学反应在使用图文混排的时候,出现很大的性能问题,导致画面帧率不稳定,甚至极低.博主对此非常抱歉,当时仅凭兴趣,在一个个功能上不断叠加,几乎没有考虑到性能的优化.这次有几天的空余时间, ...
最新文章
- JAVA用最简单的方法来构建一个高可用的服务端,提升系统可用性
- android开发 获取父控件的高宽
- eureka自我保护机制及配置
- 学计算机广东2B大学,2017年广东2B大学最新排名情况
- HDU 5392 BC #51
- linux火狐自动更新,CentOS 7手动更新firefox | Linux系统运维联盟
- [CUDA OpenCV]GPU加速的计算机视觉学习资源下载
- css 鼠标悬浮样式_【技术】CSS设置链接鼠标(失效)不能点样式
- 高质量C /C编程指南---第1章 文件机关
- h5聊天工具的开发过程及思路
- ASPEN hysys焓值、熵值转化换算
- 计算机复制教程,教你如何提升电脑文件复制速度的详细教程
- 2020年C题认证杯SEIR模型参数拟合
- 【评测】阿法埃莎 (Alfa Aesar)化学品目录
- 弹力弹珠java_Java趣味小程序:打弹珠
- Power BI项目之某公司内部数据分析
- spring--ApplicationContextAware
- 个性化广告推荐系统(实战)-1-协同过滤篇
- IDEA vmoptions配置
- libevent入门教程:Echo Server based on libevent - Blog of Felix021 - 日,泯然众人矣。