查看: 14646|回复: 2
打印 上一主题 下一主题

[教程] 【转载】NGUI官网示例--讲解

[复制链接]

955

主题

164

听众

7万

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
59338
精华
28

活跃会员 荣誉管理 突出贡献 优秀版主 论坛元老

跳转到指定楼层
楼主
发表于 2012-9-29 22:19:07 |显示全部楼层 |倒序浏览
(浙江传媒学院-新媒体学院-数字游戏设计专业-张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写出来后,图片还得一张一张拷出来再贴上去。由于时间仓促,未免有疏漏的地方,请各位灌水的同仁批评指正。



关于浙江传媒学院:

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


分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏1 支持支持0 反对反对0
回复

使用道具 举报

955

主题

164

听众

7万

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
59338
精华
28

活跃会员 荣誉管理 突出贡献 优秀版主 论坛元老

沙发
发表于 2012-9-30 02:37:44 |显示全部楼层
我们将会陆续刊登浙江传媒学院-新媒体学院-张Sir的精彩文章,请大家继续关注本圈子。
回复

使用道具 举报

955

主题

164

听众

7万

积分

版主

Rank: 7Rank: 7Rank: 7

纳金币
59338
精华
28

活跃会员 荣誉管理 突出贡献 优秀版主 论坛元老

板凳
发表于 2012-10-4 01:28:21 |显示全部楼层
已经帮张Sir转载了其他文章,欢迎前去观看交流
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2024-11-1 07:21 , Processed in 0.096837 second(s), 32 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部