NGUI官网示例--讲解
zf223669
zf223669 127387 88
精华热门加亮 NGUI 2012-09-28 23:23
新书出版《Unity3D游戏开发基础》-开售啦 http://game.ceeger.com/forum/read.php?tid=12828&fid=7




NGUI 3.0.7 视频教程 http://v.youku.com/v_show/id_XNjc5OTY0NjAw.html
                                http://v.youku.com/v_show/id_XNjc5OTYxNjMy.html
                               http://v.youku.com/v_show/id_XNjc5OTU4MzU2.html
NGUI官网示例--讲解:http://game.ceeger.com/forum/read.php?tid=4172;fpage=2
NGUI官网示例2-interaction-讲解(一)http://game.ceeger.com/forum/read.php?tid=4179
NGUI官网示例2-interaction-讲解(二)http://game.ceeger.com/forum/read.php?tid=4180
NGUI官网示例3--Menu讲解http://game.ceeger.com/forum/read.php?tid=4187
NUI官方实例—ControlIerInput讲解http://game.ceeger.com/forum/read.php?tid=4222
NUI 官方示例–lights and Refraction讲解 http://game.ceeger.com/forum/read.php?tid=4226
NGUI官网示例6–Draggable Window讲解(一) http://game.ceeger.com/forum/read.php?tid=4243
官网示例6–Draggable Window讲解二http://game.ceeger.com/forum/read.php?tid=4244;ds=1
NGUI官网示例7-- ScrollView讲解(一) http://game.ceeger.com/forum/read.php?tid=4269
NGUI官网示例7-- ScrollView讲解(二) http://game.ceeger.com/forum/read.php?tid=4279
NGUI官网示例7-- ScrollView讲解(三)http://game.ceeger.com/forum/read.php?tid=4280;ds=1
NGUI官网示例8 – Scroll View(Camera) http://game.ceeger.com/forum/read.php?tid=4298
NGUI官网示例9 – QuestLog  http://game.ceeger.com/forum/read.php?tid=4349;ds=1;page=1;toread=1#tpc



NGUI例子制作过程,由笔者参照NGUI的例子重新自己做了一遍,以加深对NGUI用法的理解。
一、Example 1 – UIAnchor
该例子是演示NGUI中使用Anchor组件实现GUI对齐的功能。其最终效果如下:

图片:1.png


 
下面一步一步实现该例子。
1.         删除新建的场景的Main Camera摄像机,在图层中新建一个GUI层,接着,选择菜单上的NGUI->Create a new UI,弹出该对话框,设置如图所示:

图片:2.png


2.         最后点击Create Your UI按钮,可以在Hierachy窗口中自动生成下面的树状结构:

图片:3.png


3.         Panel的父物体改成Anchor,如图所示:

图片:4.png

4.         把该Anchor命名为Anchor-Bottom,并为该对象添加一个空游戏对象,并命名为offset,并reset它的变换。该空游戏对象可以用于它下面子对象与该Anchor之间的偏移量。如图所示:

图片:5.png


5.         选中offset,选择菜单中的NGUI-> Create new Widget,弹出一个Widget Tool对话框,该对话框基本是用于制作按钮(Buttom)、标签(Label)等部件的对话框。设置其参数之后,并点击Add To按钮,确保该按钮后面的对象是offset。这就在offset下生成一个Label便签,并把标签的文本改成Bottom,如图所示:

图片:6.png

图片:7.png

6.         以同样的方法在offset中添加一个slicedsprite。记住该对象的深度应该比Label要小,不然Label就会被覆盖而看不到。这里设置label的深度(depth)为0,而slicedsprite-1,并在编辑器中调节该元素的大小,如图所示:

图片:8.png

图片:9.png

7.         最后一步,选择Anchor-Bottom,设置该元素的对齐方式(side)为“Bottom”。选择之后,它会自动把它自己对其到摄像机的最低端,我们可以通过offset来调节该元件和Anchor之间的偏移量。如图所示:

图片:10.png


8.         其他的7Anchor可以使用Ctrl+D复制出来,并更改Anchor的不同的方式来对齐到不同的位置上,并在编辑窗口中调整offset的位置,其结果如图所示:

图片:11.png

9.         最后来制作其背景,新建一个空的游戏对象,并最后Panel的子物体,并reset它的变换。命名为Anchor-background,并在NGUI菜单中,选择Attach an Anchor,此时该空游戏对象就成为了一个Anchor,并设置对齐方式为center

图片:13.png

10.     接着以Anchor-backgournd作为父物体,新建一个名为window的空游戏对象,如图所示,window游戏对象只是为了方便管理而设置的一个辅助对象而已。

图片:12.png


图片:15.png

11.     window下面,使用Create Widget面板创建一个slicedSprite,其参数如下:

图片:13.png

12.     在编辑窗口中缩放该对象,使其对齐到窗口,并把其深度(Depth)设置成-2。最终效果如下:

图片:14.png


13.
    接下来,给他添加一个多行Label,同样使用createWidget对话框,其参数如下:

图片:16.png

14.     在其文本内容框中写入需要的文字,当然,因为现在使用的是英文字体,所以中文是显示不出来的,如图所示,并把深度(depth)改为-2,把Line Width设置成500,可以设置显示每行文字的宽度。如图所示:

图片:17.png

在官方的该例子中,还有上面一个标题,其实也是有一个Label和一个slicedSprite组成的,所以,这里不再阐述。下面的几个例子将视时间创作,论坛发文章还真有点难度,尤其是用word写出来后,图片还得一张一张拷出来再贴上去。由于时间仓促,未免有疏漏的地方,请各位灌水的同仁批评指正。
(浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)
在这里做过小广告,呵呵,我是浙江传媒学院新媒体学院数字游戏设计专业的老师,目前我们培养的学生都是往数字游戏设计方向发展的,而且以unity3D作为游戏引擎工具,下半年我们将引进UDK虚幻引擎,如果有需要该方面的人才,可以跟我联系。谢谢帮忙,这也是为学生找找工作!
分享:
游客
要评论请先登录 或者 注册
88条回应 只看楼主 最新
q22853470 学徒 2012-09-28 23:50 1楼
感謝研究心得阿!
ycs 学者 2012-09-29 08:16 2楼
     
zh6845835 学徒 2012-09-29 08:41 3楼
不错,希望能继续。
所罗门封印 学徒 2012-09-29 09:27 4楼
不错,正在学习………………
ychng 学徒 2012-09-29 09:40 5楼
多謝分享
kuku小夭 论坛版主 2012-09-29 10:10 6楼
  不错的研究心得
小胡子老头 学徒 2012-09-29 10:12 7楼
学习了!谢谢分享
kongbu0621 学徒 2012-09-29 10:53 8楼
         
莱汀 学徒 2012-09-29 10:54 9楼
lz,有些图片贴错了,贴重复了哦
1 2 3 4 ...9
返回顶部