NGUI官网示例12 –Chat Window（聊天对话框）

艾西格亚

（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）



聊天对话框是网络游戏中经常会用到的GUI之一，它可以通过用户的键盘输入来获取输入信息并发送到其他的游戏客户端中。当然，聊天对话框的用途还有很多。



在NGUI中，也为我们创建聊天对话框提供了方便，如图所示：







首先先创建一个窗口层次结构，这里不再赘述，请看前面的教程。在里面的Label中，我使用了中文的字体为3698Font包3698font.unitypackage ，如图所示







为该窗口创建一个Input元件，该元件用于接收用户的输入，其参数如下







创建一个TextList，用于显示用户输入信息之后显示信息。新建一个空的游戏对象，并命名为TextList，并成为Window的子物体，同时reset一下；一个TextList

组件（Component-> NGUI->UI->Text List），并设置该组件中的Style属性设置成Chat，如图所示







为该TextList对象添加一个Label和一个SlicedSprite，注意SlicedSprite和Label之间的深度关系，Label的深度值应该比SlicedSprite大，如Label为2，那么

SlicedSprite为2，如图所示







选择Input对象，为其添加一个Chat Input组件（Component->NGUI->Interal->chat Input），并把TextList对象赋值给TextList属性，如图所示







点击播放，ok！你在输入框中输入中文和英文都可以正常显示！如图所示







如果你输入多行，你会发现，其TextList中的文字不会自动往上，现在选择TextList中的Label，然后把其他的Pivot设置成BottomLeft，这样便可以使得随着文字

的显示的增加而不断往上升了。如图所示







选择Input对象，并把Fill with Dummy Data选项打开，点击播放，这个时候可以通过这个选项来控制是否显示测试文字，如图所示







可以看出文字都跑外面去了，选择TextList，在UITextList组件中，设置其MaxWidth和MaxHeight，这个可以设置其显示文本的最大高度和最大宽度。如图所示







OK！搞定。中文输入不知道在移动设备中能否支持，希望各位朋友提提意见！

狂风大尉

NGUI设定这种效果很容易啊，，呵呵

艾西格亚

后面还有13的教程，分几个部分转载

王者再临

这个教程很容易理解，感谢张老师的分享

.

顶起

.

顶起

mars

你好！

张sir 你对聊天对话框插入表情符号，有没有好的解决方案？

王者再临

学习了，虽然还是有难度，谢谢楼主的用心

娃娃儿

原帖由  mars  于 2012-12-13 10:23 发表:

                                                                                         你好！

张sir 你对聊天对话框插入表情符号，有没有好的解决方案？
                                                                               
-----------------------------------------------------
同求，还想请问，知道如何把对话框与scrollbar关联起来不？？方便查看聊天记录

雅雅

希望有更多的NGUI教程分享!