示例：为游戏界面添加昵称输入框NGUI从入门到实战大学霸

示例：为游戏界面添加昵称输入框NGUI从入门到实战大学霸

 

2.5.2  示例：为游戏界面添加昵称输入框示例：为游戏界面添加昵称输入框NGUI从入门到实战大学霸

在首次玩游戏前，很多游戏都需要玩家自定义昵称，那么本小节就使用学到的知识，创建一个昵称输入框作为示例，如图2-63所示。

图2-63  昵称输入框示例示例：为游戏界面添加昵称输入框NGUI从入门到实战大学霸

具体的操作步骤如下：

（1）在Hierarchy视图里，为Panel对象添加一个子对象，并命名为Nickname。

（2）在Hierarchy视图里，选中Panel对象下的Window子对象，然后按下快捷键Ctrl+D，来获得此对象的一个拷贝，将它命名为Background，并拖动到Nickname对象下。在Inspector视图里设置下列属性，效果如图2-64所示。

q  Depth：2；

q  Dimensions：440×120；

图2-64  添加背景效果

（3）在Hierarchy视图里，为Nickname对象添加一个文本输入框Input，向导各属性的设置与上一小节相同。并在Inspector视图里，设置下列属性：

q  Box Collider组件下，Center属性：(0,0,0)；

q  Auto-save Key：Nickname；

q  Max Characters：25；

（4）为Input对象添加UIAnchor(Script)组件，并设置下列属性：

q  Container：Background；

提示：此Background是Nickname的子对象。

q  Pixel Offset：X：0，Y：-17；

完成以上设置以后，在Scene视图中看到的效果如图2-65所示。

图2-65  Scene视图中的效果图示例：为游戏界面添加昵称输入框NGUI从入门到实战大学霸

提示：目前效果还显得十分乱，因为还没有设置Input的子对象：Label和Background。此处只是将Input对象定位到了背景中下方的位置，也就是Input对象绿色框线的位置。

（5）获取Title子对象Label的拷贝，然后将其拖动到Nickname对象下，在Inspectors视图里，完成下列设置：

q  设置Label文本框中的内容：[AAFFFF]Nickname；

q  Depth：3；

q  Container：Backgound；

提示：此Backgound是Nickname的子对象。

q  Side：Top；

q  Pixel Offset：X：0，Y：-32；

在完成以上设置以后，在Game视图中看到的效果如图2-66所示。

图2-66  Game视图中看到的效果

（6）在Hierarchy视图里，选中Input的子对象Background，然后在Inspector视图里设置下列属性：

q  Pivot：中点；

q  Transform组件下P：(0,0,0)；

q  Depth：3；

q  Dimensions：400×26；

在完成以上设置以后，在Game视图中看到的效果如图2-67所示。

图2-67  Game视图中看到的效果

（7）在Hierarchy视图里，选中Input的子对象Label，然后在Inspector视图里设置下列属性：

q  Pivot：中点；

q  Transform组件下P：(0,0,0)；

q  Depth：4；

q  Label中的文本为：Enter your name here；

在完成以上设置以后，在Game视图中看到的效果如图2-68所示。

图2-68  Game视图中看到的效果

（8）输入框已经设置好了，接下来就是输入框在整个游戏背景中的位置了，目前它位于游戏背景的正中央，接下来就要将它置于游戏背景中央靠上方的位置。首先为Nickname对象添加UIAnchor(Script)组件，然后设置下列属性：

q  Container：Window；

q  Side：Top；

q  Pixel Offset：X：0，Y：-220；

在完成以上设置以后，在Game视图中看到的游戏背景，效果如图2-69所示。

图2-69  目前游戏背景的效果图示例：为游戏界面添加昵称输入框NGUI从入门到实战大学霸