(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)

聊天对话框是网络游戏中经常会用到的 GUI 之一,它可以通过用户的键盘输入来获取输入信息并发送到其他的游戏客户端中。当然,聊天对话框的用途还有很多。在 NGUI 中,也为我们创建聊天对话框提供了方便,如图所示:

(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第1张图片
首先先床架一个窗口层次结构,这里不再赘述,请看前面的教程。在里面的Label中,我使用了中文的字体为3698Font包 3698font.unitypackage,如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第2张图片
为该窗口创建一个Input元件,该元件用于接收用户的输入,其参数如下
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第3张图片
创建一个TextList,用于显示用户输入信息之后显示信息。新建一个空的游戏对象,并命名为TextList,并成为Window的子物体,同时reset一下;一个TextList组件(Component-> NGUI->UI->Text List),并设置该组件中的Style属性设置成Chat,如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第4张图片
为该TextList对象添加一个Label和一个SlicedSprite,注意SlicedSprite和Label之间的深度关系,Label的深度值应该比SlicedSprite大,如Label为2,那么SlicedSprite为2,如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第5张图片
选择Input对象,为其添加一个Chat Input组件(Component->NGUI->Interal->chat Input),并把TextList对象赋值给TextList属性,如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第6张图片
点击播放,ok!你在输入框中输入中文和英文都可以正常显示!如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第7张图片
如果你输入多行,你会发现,其TextList中的文字不会自动往上,现在选择TextList中的Label,然后把其他的Pivot设置成BottomLeft,这样便可以使得随着文字的显示的增加而不断往上升了。如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第8张图片
选择Input对象,并把Fill with Dummy Data选项打开,点击播放,这个时候可以通过这个选项来控制是否显示测试文字,如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第9张图片
可以看出文字都跑外面去了,选择TextList,在UITextList组件中,设置其MaxWidth和MaxHeight,这个可以设置其显示文本的最大高度和最大宽度。如图所示
(搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示)_第10张图片

你可能感兴趣的:((搬运工)NGUI官网示例12 –Chat Window(聊天对话框,中文输入和显示))