【3D技术宅公社】XR数字艺术论坛  XR技术讨论 XR互动电影 定格动画

 找回密码
 立即注册

QQ登录

只需一步,快速开始

调查问卷
论坛即将给大家带来全新的技术服务,面向三围图形学、游戏、动画的全新服务论坛升级为UTF8版本后,中文用户名和用户密码中有中文的都无法登陆,请发邮件到324007255(at)QQ.com联系手动修改密码

3D技术论坛将以计算机图形学为核心,面向教育 推出国内的三维教育引擎该项目在持续研发当中,感谢大家的关注。

查看: 8478|回复: 0

[NGUI插件] NGUI官网示例13 –Character角色装配与储物箱

[复制链接]
发表于 2013-12-5 09:22:57 | 显示全部楼层 |阅读模式
储物箱和角色装配装配在游戏当中可以实现人物外观的自定义,其用途非常广泛,例如魔兽当中的角色自设定,所以NGUI也提供了这样的功能,如图所示:

4b90f603738da97764de1aedb151f8198718e307.jpg

我们将分四步来制作该GUI。第一步,创建基本的游戏背景;第二步,创建储物箱界面;第三步,创建装备拖动图标和装备提示栏;第四步,实现装备的装配。
第一步,创建基本的游戏背景

创建一个空的游戏对象,并命名为Scene,同时reset一下。接着为其添加一个UIPanel组件(Component -> NGUI -> UI -> Panel)。这样,我们就可以在其地下添加各种NGUI元件了。如图所示:
a2cc7cd98d1001e915436f9db90e7bec54e79720.png


新建一个空的游戏对象,并命名为Pivot,reset一下,并成为Scene的子物体,如图所示
a2cc7cd98d1001e915436f9db90e7bec54e79720.png

在Pivot下创建一个摄像机,并为该摄像机添加一个UICamera(Component -> NGUI -> UI -> Camera),该组件主要控制该摄像机能够接受的输入方式,比如鼠标,键盘等等。如图所示

a2cc7cd98d1001e915436f9db90e7bec54e79720.png

1.使用UI Tool创建一个Advanced 3D UI结构,Layer 为GUI(如果没有该GUI层,可以在Layer添加面板中添加),如图所示:
4b90f603738da97764de1aedb151f8198718e307.jpg

把Panel和Camera分离出来,接着删除UIRoot(3D)和Anchor对象,并把Camera调整成为Panel的子物体,最后把Panel改名为3DUI,Camera命名为3DUICamera,最后如图所示
a2cc7cd98d1001e915436f9db90e7bec54e79720.png

在3DUI下创建一个空的子物体,并命名为Scale,reset一下,如图所示
a2cc7cd98d1001e915436f9db90e7bec54e79720.png

在Scale下创建一个空的游戏对象,并命名为Shoulders,reset一下。接着在其下创建一个Sliced sprite元件,并命名为Background,其Sprite为Flat Outline,并调整其大小和位置,如图所示
4b90f603738da97764de1aedb151f8198718e307.jpg

接着,同样在Shoulders下,创建一个Label,并命名为Caption,并为其输入Shoulder字样,并调整它的位置,如图所示
4b90f603738da97764de1aedb151f8198718e307.jpg

同样在Shoulders下,创建一个Sprite,sprite为Orc Armor-should,并命名为Icon,并调整它的位置,如图所示
4b90f603738da97764de1aedb151f8198718e307.jpg

该部分主要是为实现装备在拖动的时候出现拖动图标的效果和当鼠标放置在装备上时提示装备的一些信息而做准备。
使用UI Tool创建一个Simple 2D UI层级结构,其Layer为2DGUI,我们通过不同的图层的设置让摄像机只显示我们设定的图层中的对象,有点像photoshop中的图层,如图所示
4b90f603738da97764de1aedb151f8198718e307.jpg

调整该结构,把Panel和Camera从UIRoot(2D)中分离出来,接着删除UIRoot(2D)和Anchor对象,接着把Camera放置到Panel中成为其子物体。并命名Panel为2D UI,Camera命名为2D UI Camera。最后为2DUI添加一个Root组件(Component->NGUI->UI-> Root)如图所示
a2cc7cd98d1001e915436f9db90e7bec54e79720.png

制作拖动图标的参考对象。在2DUI对象下,创建一个空的游戏对象,并命名为Anchor-Center,并reset一下,接着为该对象添加一个Anchor组件(NGUI->Attach a anchor),并把2D UI Camera赋值给该组件下的UI Camera,这样这个Anchor才能找到与这个摄像机对齐, 如图所示
a2cc7cd98d1001e915436f9db90e7bec54e79720.png

在Anchor-Center下面添加一个空的游戏对象,并命名为Cursor,reset一下。接着为其添加一个Sprite组件(Component->NGUI->UI->Sprite),接着为其添加一个UICursor组件(Component->NGUI->Example->Cursor),这样NGUI才能够识别出将来的拖动图标是使用了哪个对象,如图所示
a2cc7cd98d1001e915436f9db90e7bec54e79720.png

选择Shoulders对象,为其添加一个EquipmentSlot(Component->NGUI->Example-> EquipmentSlot),并把shoulders中的各个子对象赋值给该组件对应的变量中,再为其添加音效,最后把场景中Orc对象赋值给Equipment,表示要把装备装配到该物体上,接着在slot中选择shoulders,如图所示 a2cc7cd98d1001e915436f9db90e7bec54e79720.png 为该元件添加一个按键动画,选择Shoulders,并添加一个Button Scale(Component-> NGUI->Interaction->Button Scale),并为该按键添加一个Collider(NGUI-)Attach a collider)如图所示 9825bc315c6034a81a2ada46ca13495408237628.jpg 为其他的Boots和Bracers做相似的操作
选择RandomBotton对象,为其添加一个Equip Random Item组件(Component->NGUI-> Example->EquipRandomItem),并把Orc对象赋值给Equipment参数,如图所示 359b033b5bb5c9eaea376124d439b6003bf3b335.png 为该场景的装备创建一个简单的数据库。创建一个空的游戏对象,并命名为ItemDatabase,并为其添加一个ItemDatabase(Component->NGUI->example->Item Database)。如图所示 359b033b5bb5c9eaea376124d439b6003bf3b335.png 接下来就是不断地重复劳动了,为该数据库添加各种数据。点击New Item,为其添加Item Name,和Item描述,Slot等等,我们以shoulders为例,如图所示 9825bc315c6034a81a2ada46ca13495408237628.jpg 大家在做这个database数据库的时候,需要思考一下他们这些参数的作用。这里不赘述,还是比较好理解的。接下来,激动人心的时刻到了,点击播放,看,操作一下左边的按钮,看,可以自动装配上去了!如图所示 359b033b5bb5c9eaea376124d439b6003bf3b335.png 大家可能会问,它怎么知道把装备安装到什么地方了呢?好,以Shoulders为例子,选择Orc对象,不断展开它的子对象,找到Bip01 L Clavicle,看下面有一个名为Attachment-Left Shoulder的游戏对象,而且这个游戏对象添加了一个InvAttachmentPoint组件,而且这个组件里面的Slot被设置成Shoulders,也就是说,这个游戏对象就是真正识别需要添加什么装备的地方。如图所示 9825bc315c6034a81a2ada46ca13495408237628.jpg 接下来,实现装备的描述窗口,当鼠标停放在一个装备图标上面时,它会出现一个装备描述窗口,如图所示 9825bc315c6034a81a2ada46ca13495408237628.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|3D数字艺术论坛 ( 沪ICP备14023054号 )

GMT+8, 2024-11-23 15:27

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表