unity制作聊天室界面

董董在这

已于 2023-11-22 18:12:24 修改

阅读量1.7w

点赞数 19

分类专栏： unity 文章标签： Unity scrollbar ugui 聊天室

于 2017-10-22 20:25:52 首次发布

本文链接：https://blog.csdn.net/sajiazaici/article/details/78312887

版权

unity 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文利用unity UGUI制作聊天室界面，按回车发送消息，带滚轮，可以查看之前的消息。

PS：本文不带通信功能，仅为界面制作。需要带socket通信功能的unity聊天室模板请评论留言。

先上效果图GIF：

仿造LOL客户端游戏内聊天室，发送消息后会跳到最下面。

（LOL中是按回车才跳出这个聊天框，这个实现起来简单，这边就不演示了）

PS：看起来好像实现起来很简单- -但是百度没找到关键方法，想自己实现，做了一晚上加一早上还是不完美，

最后只好去谷歌搜一下看看unity英文论坛然后完美解决= =。这个故事告诉我们当你不知道怎么做一个功能的时候，

不要自己盲目瞎整，多查查谷歌，开发效率能提高很多= =就像我女票一样当一个找代码的一把好手也不错。

——————————————————————————————————————————————————

话不再多说了直接进入正题：

步骤一：布置组件

组件层布局如下：

1、在UI的Canvas下创建一个panel，命名为ChatRoom，这个是控制一整个的聊天室的面板包括输入框。我gif图中最外面有一层很浅的边框，就是这个的边框了。

2、在ChatRoom下创建一个InputField，命名为ChatInputField，用来输入消息。

3、在ChatRoom下再创建一个panel，命名为ChatRoomPanel，这个是消息查看面板。

4、在ChatRoomPanel下创建一个滚动条Scrollbar，再创建一个panel面板命名为TextShowPanel。

5、在TextShowPanel中创建Text组件命名为ChatText，这个就是聊天的文本内容了。

6、调整大小使界面美观。（面板背景颜色在属性中的image-color中设置即可）

PS：我这个设计分很多层，之后可以独立控制比较方便，大家可以按需求设计不一定要这么来。

步骤二：设置属性

1、点击Scrollbar，将其Direction属性设置为Buttom to top

2、点击TextShowPanel，AddComponent添加组件Scroll Rect，再添加组件mask，使超出范围的内容不显示。

具体属性细节设置如下：

content，也就是需要滚动的内容，把chatText拖进去。

因为只需要垂直滚动。所以只要勾上vertical。

下面的vertical scrollbar把scrollbar拖进去。

PS：这里注意，尽量将界面布局提前布置好，否则添加了scroll rect组件后，组件之间会互相影响。

3、点击ChatText，添加组件Content Size Fitter。设置Vertical Fit 为preffered size。如下：

这个组件的作用是使得文本框的大小随着文本内容的改变而改变。

步骤三：编写脚本

新建ControlChatRoom.cs

代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ControlChatRoom : MonoBehaviour {

    public InputField chatInput;
    public Text chatText;
    public ScrollRect scrollRect;
    string username = "DHX";
    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

        if (Input.GetKeyDown(KeyCode.Return) || Input.GetKeyDown(KeyCode.KeypadEnter))
        {
            if (chatInput.text != "")
            {
                string addText = "\n  " + "<color=red>" + username + "</color>: " + chatInput.text;
                chatText.text += addText;
                chatInput.text = "";
                chatInput.ActivateInputField();
                Canvas.ForceUpdateCanvases();       //关键代码
                scrollRect.verticalNormalizedPosition = 0f;  //关键代码
                Canvas.ForceUpdateCanvases();   //关键代码
            }
        }

    }
}

将其附在最外层ChatRoom上，然后把对应组件拖入。如下：