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

NGUI从入门到实战

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从入门到实战大学霸

Comments are closed.