纳金网

标题: 【转载】NGUI官网示例--讲解 [打印本页]

作者: 艾西格亚 时间: 2012-9-29 22:19
标题: 【转载】NGUI官网示例--讲解
（浙江传媒学院-新媒体学院-数字游戏设计专业-张sir）

NGUI例子制作过程，由笔者参照NGUI的例子重新自己做了一遍，以加深对NGUI用法的理解。

一、Example 1 – UIAnchor

该例子是演示NGUI中使用Anchor组件实现GUI对齐的功能。其最终效果如下：

下面一步一步实现该例子。

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

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

3. 把Panel的父物体改成Anchor，如图所示：

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

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

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

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

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

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

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

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

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

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

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

在官方的该例子中，还有上面一个标题，其实也是有一个Label和一个slicedSprite组成的，所以，这里不再阐述。下面的几个例子将视时间创作，论坛发文章还真有点难度，尤其是用word写出来后，图片还得一张一张拷出来再贴上去。由于时间仓促，未免有疏漏的地方，请各位灌水的同仁批评指正。

关于浙江传媒学院：

浙江传媒学院-新媒体学院-数字游戏设计专业 --本专业培养具有扎实的艺术功底和基本的计算机编程能力，熟悉和掌握数字互动娱乐产品设计全过程，能够在数字互动娱乐设计、虚拟现实展示或数字游戏产品等领域从事策划相关，美术相关，关卡设计，游戏程序开发，游戏测试等方面工作的应用型、创新型、复合型专门人才。

作者: 艾西格亚 时间: 2012-9-30 02:37
我们将会陆续刊登浙江传媒学院-新媒体学院-张Sir的精彩文章，请大家继续关注本圈子。

作者: may 时间: 2012-9-30 16:40
看起来有些复杂，，，需要再了解一下，期待后面的文章

作者: 艾西格亚 时间: 2012-10-4 01:28
已经帮张Sir转载了其他文章，欢迎前去观看交流

作者: 大大虾 时间: 2013-5-7 11:54
学习了！~感谢楼主！~

作者: 筱筱 时间: 2013-5-8 14:19
感谢楼主分享！！！

作者: rookielee 时间: 2013-5-9 10:18
非常感谢

作者: yww 时间: 2013-5-30 10:06
支持一下。

作者: 狂风大尉 时间: 2013-5-30 16:44
支持一个，很受用的教程

作者: Goku 时间: 2013-6-9 13:07

很好很强大，很有用

作者: cxl851013 时间: 2013-6-19 21:04
支持下，要学会

作者: forlio 时间: 2013-7-30 14:40
感谢楼主的贡献~

作者: 5473857 时间: 2013-9-2 09:30
楼主为什么我的没有 NGUI->Create a new UI 呢？？

作者: 迈克拉文 时间: 2014-5-21 21:23
搞个附件会比较好点~

欢迎光临纳金网 (http://www.narkii.com/club/)