NGUI----简单聊天系统一

Posted 2020-08-06 evilsnake

1：聊天背景的创建

新建一个场景-----保存场景

 

NGUI----》Create-----Panel

选中UIRoot，然后新建一个sprite

选择图集

效果如下图

添加一个可拖拽的功能

选中sprite（这里我重命名为chatwindow）  Attach--》BoxCollider  然后添加组件  drag object  并且把当前的目标chatwindow拖到target。

         

这个时候运行的时候这张图片就可以随意拖拽。

2：接下来我们让这个聊天框可以调节大小

选中chatwindow------create---sprite---child   并且给这个子sprite命名为resizesprite

给这个子sprite选择Resize Icon图片

效果如下图所示

选中resizesprite--attach---box collider

然后在选中resizesprite----attach---drag resize scrite

    

设置完以后运行程序就可以随意调节聊天框的大小了。

3：我们给聊天框加一个背景图片

创建chatwindow的子sprite 命名给BgSprite

    选择图集  

效果图如下

  此时我们缩放图片的时候里面的背景图并不能自适应大小，我们此时需要设置anchors

 背景图就会随我们外面的图片的缩放而变化

4：给聊天框添加滚动条

这里我就不再插入图片了，步骤跟上面一样，选中chatwindow---create--sprite--child 命名给ScorllSpriteBar

添加图集

 

然后在选中ScorllSpriteBar---create---sprite--child 命名为ScorllBarChild 集选择相同的

设置anchors

修改一下color tint

效果如下如图

现在需要添加滚动条的功能

选中ScorllSpriteBar---attach----Box collider

然后在选中ScorllSpriteBar--attach——Scroll Bar Script

这个时候我们需要设置一些信息，使这个滚动条看起来是从下往上拖动

direction 方向  从下忘上

foreground：前景色

background：背景色

效果图

5：设置聊天系统的输入框

选中BgSprite-- create---Label--child  命名为chatlabel  调节大小给聊天背景差不多大小，可以通过设置anchors来调节

我们可以输入一些文字看一下效果

此时我们需要设置一些label的anchors，chatlabel设置anchors

这个时候我们需要给我们的chatlabel添加textlist脚本

选中chatlabel--attach--Box collider

添加组件如图

设置textlist的相关信息

Textlabel就是当前的chatlabel  滚动条使我们创建的ScorllSpriteBar.

接下来我们需要添加输入框了，就是用户的输入文字框

prefab Toobar有一个现成的输入框，我们可以直接拖过来使用。

         、