首先,明确一下这个聊天框能实现的功能
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,并添

这篇博客详细介绍了如何使用NGUI制作一个具备聊天功能的游戏内聊天框,包括聊天框的可移动、可调整大小、滚动条以及聊天内容显示和输入框的实现。通过添加各种UI组件、设置Box Collider、应用UIDrag Object和UIDrag Resize脚本等,逐步构建了一个完整的聊天系统。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



