NGUI制作一个游戏内的聊天框

首先，明确一下这个聊天框能实现的功能

1，可以改变框体的位置和大小

2，可以输入文字，聊天区域显示文字

3，有滑动条可以查看被之后输入的文字所刷掉的文字

完成品

首先随便拖一张空白的sprite进去做为聊天框的背景，更改颜色为蓝色，这张sprite将作为背景，同时我们接下来所有的组件都将作为他的子物体建立。

要实现背景的移动，首先要为背景添加box collider，这样才可以交互，然后为我们的背景添加UIDrag object脚本，移动位置的功能就实现了。

然后另外选择一张sprite进去作为背景的子物体，我这里先放在了右下角，这是调节聊天框大小的按钮，同样需要添加box collider，然后为他添加UIDrag Resize脚本

UIDrag resize脚本内的target选择你想要改变大小的物体，这里当然选择我之前拖入那张背景。下面的min，max4行则是限制要改变的物体最小长宽和最大长宽。

到这里为止，基本上聊天框的拖拽可控制大小就完成了，为什么要用基本上呢，那是因为现在如果我们改变框体大小后，我们的改变框体大小的按钮的位置会发生偏移，所以我们需要设置控制框体大小的那个按钮的anchors，这里我的图片大小是20*20，所以我这里的anchors设置如图所示。

然后我们开始制作滑动条

首先拖入一张长条图片作为背景的子物体，颜色设置为白色。设置好anchors，然后再在这个白色长条图片的基础上再为长条图片添加一个新的图片作为他的子物体，改变颜色为蓝色，并设置好anchors，如下图。

选中我上图中的sprite，为他添加box collider，并添加UIScroll Bar脚本。

这里foreground选择蓝色的那张图片，background选择白色的那张图片，设置滑动条direction为从上到下，上面的value的值为滑动块的位置，size是滑动块的大小，这里暂定为0.1，alpha是滑动条透明度。到这里我们的滑动条也就完成了，之后滑动块的size和value的控制我们将由脚本来控制。

最后我们来制作聊天内容框和输入框，和输出按钮。

首先在背景上新建一个label，overflow选择clamp content，这样超出框体的文字就会自动被剪切掉，然后设置好anchors，为label添加UIText List脚本，把我们新建的label拖入text label框内，把我们之前做的滑动条拖入scroll bar框内，style是选择文字的出现位置，chat是从下到上显示，50则是显示文字最大的行数。

然后我们偷个懒，从ngui的预制prefab中拖一个输入框出来，设置为背景的子物体。这样我们的输入框就做好了。。。。。。。。。。。。。。。。。。。

之后为输入框添加一个脚本inputwords

public class inputwords : MonoBehaviour {
    private UIInput input;
    public UITextList textlist;

    void Awake()
    {
        input = this.GetComponent();
    }

    public void submit()
    {
        string i = input.value;
        textlist.Add(i);
        input.value = "";
    }
}

解释一下上面的代码，就是获取label的textlist组件和输入框的input组件

然后建立一个submit方法，方法为定义i为input输入的内容，添加到textlist中，然后input的输入框清空。

最后我们就还缺一个按钮来发送消息，老样子在背景上建立一个子图片，加box collider和UIbutton脚本，设置好anchors，在onclick框内选择刚刚新建的那个方法。

这样我们的聊天输入框就完成了。