unity岩浆气泡_【Unity】UGUI聊天消息气泡 随文本内容自适应

最新推荐文章于 2023-09-10 19:27:52 发布
最新推荐文章于 2023-09-10 19:27:52 发布
阅读量581 收藏 1
点赞数
文章标签： unity岩浆气泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39716877/article/details/111490429
版权
本文介绍了在Unity中使用UGUI创建聊天界面时，如何让聊天气泡根据文本内容自适应宽度和高度。关键步骤包括：1) 在Content节点上添加Content Size Fitter和Vertical Layout Group组件；2) 气泡Item预制体添加Layout Element组件并设置Preferred Height；3) 文本Text添加Content Size Fitter组件，初始状态为宽度优先；4) 当文本超过一行时，脚本动态调整Text的Content Size Fitter为垂直优先。通过这种方法，可以实现动态调整聊天气泡的大小以适应不同长度的文本。
摘要由CSDN通过智能技术生成

游戏中需要用做UGUI做聊天界面。其中聊天气泡ChatItem的UI要求能随着聊天内容文本的长度自适应的。

网上搜了一下聊天气泡的UI，发现都不太符合咱的需求，具体来说是文本宽度不足一行时，文本宽度自增；文本宽度大于一行时，文本高度自增。效果如下图：

实现方法：

1、(UGUI)Scroll View/Viewport/Content是挂气泡Item的节点，给它添加Content Size Fitter和Vertical Layout Group组件，注意设置Vertical Fit为Preferred Size。

2、气泡Item预制体(或者Sample游戏物体)结构如下，给它添加上Layout Element组件，并勾上Preferred Height。

3、由于气泡Item中的消息文本Text会动态变宽变高，也要给它加上Content Size Fitter组件。刚开始输入文本时，文本宽度不足一行，所以默认是设置宽度优先的。

4、接下来的操作是重点，也是其他博客没有提及的点。上面文本Text对象的Content Size Fitter组件设置是当消息内容不足一行的宽度时的情况(也就是刚开始输入文本时的状态)，此时是水平Pre

最低0.47元/天 解锁文章
weixin_39716877
关注
聊天对话气泡-字体自适应气泡宽度
致年在学习
11-10 1561
.sender {         overflow: hidden;         position: relative;          margin-bottom: 20px;     }     .sender>div:nth-of-type(1) {         position: absolute;     }     .sender>div:nth-o
Unity3d C# 基于UGUI实现类似WX聊天气泡功能工程源码
03-07
Unity版本“2020.3.28f1c1” ，下载解压后示例场景在：\Assets\Scenes\SampleScene.unity 建议先看说明：https://blog.csdn.net/qq_33789001/article/details/123331284 编码实现 这个功能的核心思路就是，根据内容的大小设置气泡背景的大小和整个消息条目的大小。在区分一下对方和自己的消息即可。 消息条类 TalkItem这个脚本挂在TalkOther和TalkSelf上，其职责就是设置内容，同步设置气泡大小。
不使用代码 UGUI简单实现聊天气泡功能
weixin_47634555的博客
06-13 331
不使用代码 UGUI简单实现聊天气泡功能 用到的Unity组件 HorizontalLayoutGroup 在bubule_parent,还有bubble上挂载上面组件属性勾选也如上就可以了 以下就是页面布局 效果如下 把背景换成我们想要的效果图片 ...
Unity 对话气泡
u012863565的博客
06-20 5121
前言： unity真是啥都得自己写，还是ue4牛逼。 对话气泡功能挺实用的，下图是最终的效果。 准备阶段： 文字逐字显示动画用到了DOTWeen 需要自己用PS画对话气泡 需要自行学习相关的布局组件、 开始制作： 1.PS建一个100*100的对话气泡 导入到项目里面，并且打开 拖动绿线，上下左右到1像素，点击应用 上面是UI的结构，Image是Text的父级 所以Text能够重叠在图片上面。 图像类型一定要改成切片，这也是九宫格必备的。 Imag
聊天界面－自适应文字
weixin_30695195的博客
03-19 113
该篇文章主要介绍一个实现聊天界面的思路过程，源码可以在源码链接获得，该工程实现聊天的基本功能，功能还不够完善，欢迎大家提PR，效果图如下所示 我希望通过相对简单的方式实现界面的布局，没有复杂的计算达到自适应的效果。 iOS8新功能介绍 虽然self size cell最终没有在我的工程中用到，但是这是我曾经挖过的坑，所以在此做了简单的介绍。 在iOS 8 中，UITableVi...
unity中的聊天气泡_小气泡：Unity中的自定义肥皂泡沫物理
culiao6493的博客
09-11 1068
unity中的聊天气泡Veteran indie developer Stu Denman had a grandfather who had worked on the Manhattan Project, and afterward studied the physics of soap bubbles. Half a century later, Stu couldn’t get his g...
UGUI聊天气泡随文字地自适应
qq_38721111的博客
04-04 2878
在游戏开发过程中用UGUI做聊天界面时，其中聊天气泡会随着聊天内容地长度做自适应。 需要在气泡图片上，添加两个组件，Horizontal Layout Group和Content Size Fitter，下面详细介绍一下这两个组件。 Horizontal Layout Group： Padding : 包括布局元素距离四个方位的距离，Left : 左边缘 , right : 右边缘 ， ...
unity2D 自适应聊天气泡
qq_29427489的博客
07-17 2104
使用原生的UGUI 最关键的 一个是气泡的背景，一个是气泡里的文字 文字数量不固定，所以气泡背景要选择slice 文字的text属性如下
Unity 聊天室内容自适应
菜菜ANY的博客
01-26 2771
效果如下： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Chat02 : MonoBehaviour { public InputField chatInput; //消息输入框 public GameObject ChatTextArea; //消息预制体 public..
unity游戏角色聊天说话气泡控制管理系统Speech Bubble Manager 1.3.0
11-02
unity游戏角色聊天说话气泡控制管理系统Speech Bubble Manager 1.3.0 Requires Unity 2017.2.0 or higher. Speech Bubble Manager is a system that creates and manages speech bubbles through one line of code. Features: Speech bubbles through one line of code 2D and 3D Adapts size to fit text ob ject pooling 4 typ
unity Bubbles 气泡插件.unitypackage
04-07
完整可用 Bubbles Partical 2.0 完整可用 Bubbles Partical 2.0 完整可用 Bubbles Partical 2.0
Unity仿QQ未读消息气泡拖拽黏连效果
10-18
Unity仿QQ未读消息气泡拖拽黏连效果 开发环境 2018.2.21
Unity UGUI图文混排源码(四) -- 聊天气泡
热门推荐
神码编程
09-27 1万+
这里有同学建议在做聊天气泡时，可以更改为一张图集对应多个Text，这样能节省资源，不过我突然想到每个Text一个图集，可以随时更换图集，这样表情图更丰富一些，于是我觉将现有的聊天demo改为了聊天气泡。 于是一张图集对应多个Text的功能，只有下次更新，哈哈 1.我更新了原来的表情文件，不过资源也来源网络 2.在图文三的时候，为了做动态表情，将索引改为了ID，这里我有将ID改
Unity3d C# 基于UGUI实现类似WX聊天气泡功能（含源码）
qq_33789001的博客
03-07 5543
如题的需求本人曾在NGUI上实现过，不过当下很多年没有用NGUI了，现在的需求就需要继续在UGUI版本上实现一边，感觉配合grid 和 ContentSizeFitter等组件较快就可以实现。折腾了一个小时初步成型了，在这分享给大家。我们就进行大逻辑仿WX的效果进行这Demo。分对方和自己的聊天条。聊天主界面主要是一个滚动记录面板 输入框 和发送按钮： 这个自己的消息条包含头像和聊天气泡，聊天气泡的大小是随内容的大小进行缩放的。而且在右侧，我们按如下搭建： 其中注意的是Text上增加了ContentSize
【Unity】UGUI聊天消息气泡 随文本内容自适应
weixin_34269583的博客
09-07 2159
游戏中需要用做UGUI做聊天界面。其中聊天气泡ChatItem的UI要求能随着聊天内容文本的长度自适应的。 网上搜了一下聊天气泡的UI，发现都不太符合咱的需求，具体来说是文本宽度不足一行时，文本宽度自增；文本宽度大于一行时，文本高度自增。效果如下图： 实现方法： 1、（UGUI）Scroll View/Viewport/Content是挂气泡Item的节点，给它添加Content Size Fi...
Unity聊天对话框内容自适应宽高（无需代码辅助布局，不添加冗余组件）
最新发布
capricorn1245的博客
09-10 3730
Unity聊天对话框内容自适应宽高（无需代码辅助布局，不添加冗余组件）
Unity 聊天列表文本内容自适应
xjm1018的博客
02-10 412
Unity 聊天列表文本内容自适应
Unity3d聊天视图适应手机键盘视图
言的专栏
04-21 7839
我们实际开发出来的聊天系统，有时候会出现这样一个现象，点击InputField会弹出手机系统的键盘，键盘的弹出会遮住InputField甚至频道里面的消息。为了解决游戏聊天视图被这个系统键盘遮挡的问题，最直接的思路就是，输入框根据键盘的高度来做适应，意思就是说，根据键盘的高度，动态改变游戏聊天视图的高度。目前市面上比较有名的游戏，如手游《龙珠》是这么做的。我参与的项目同样遇到这样的需求，采用了同样的
unity 发光字体_Unity UGUI 使用艺术字体
05-20
在Unity的UGUI系统中使用发光字体，可以通过以下步骤实现： 1. 在Unity Asset Store中下载所需的艺术字体，例如"TextMeshPro"。 2. 创建一个UGUI Text或TextMeshPro组件。 3. 将所需的艺术字体文件拖放到Unity的Project视图中。 4. 在Text或TextMeshPro组件的Inspector面板中，选择所需的字体，并将其大小、颜色和对齐方式设置为所需的值。 5. 在Text或TextMeshPro组件的Inspector面板中，启用"Material"选项，并创建一个新的Material。 6. 将新创建的Material的Shader设置为"TextMeshPro/Mobile/Distance Field"或"UI/Default". 7. 在新创建的Material的Inspector面板中，启用"Emission"选项，并将其颜色设置为所需的发光颜色。 8. 在Text或TextMeshPro组件的Inspector面板中，将"Material"选项设置为新创建的Material。 9. 运行游戏，您应该能够看到发光字体效果。 希望这些步骤能够帮助您在Unity的UGUI系统中使用发光字体。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值