纳金网

标题: 【转载】NGUI官网示例11 –Drag & Drop(一) [打印本页]

作者: 艾西格亚    时间: 2012-10-14 13:43
标题: 【转载】NGUI官网示例11 –Drag & Drop(一)
(浙江传媒学院-新媒体学院-数字游戏设计专业-张sir)



游戏中经常会用到储物箱等GUI,GUI的一边是物品的图标,另一边是一个角色,你可以拖动这些图标放置到角色上,为它装配装备。那么我们首先来实现较为简单的Drag&Drop功能。如图所示:







首先来制作三维的场景:

1. 使用Create a new UI对话框创建一个Advanced3D UI,如图所示:







把Panel拖出来,脱离Anchor父物体,然后改名为3D,接着把Camera作为子物体拖动到Panel下面,reset一下Camera对象,最后删除UI Root(3D)对象和Anchor对象,这里删除UIRoot是因为这个对象只是用于调整GUI大小的,而我们这个层级只要显示一个立方体和一个背景而已,如图所示







选择Camera,使用WidgetTool对话框在Camera下创建一个SlicedSprite对象,调整其大小和位置,作为其背景,如图所示







创建一个空的游戏对象,并命名为stage,该对象用来使得其子物体能够自动旋转,把该游戏对象放置到3D对象下,成为其子物体,并reset一下,如图所示







在stage下创建一个Cube,并为该Cube赋予一个brick材质,在project窗中,打开NGUI-> Example->brick。并调整它的大小,如图所示







选择stage对象,调整它的位置,如图所示







再次选择stage对象,为它添加一个spin组件(Component->NUI->Example->spin),这个组件可以旋转自身,并设置其参数,点击播放,可以看到立方体旋转起来了。当然这里大家应该知道,子物体会继承父物体的所有变换(平移、缩放和旋转)。如图所示







选择cube对象,为其添加一个SpinWithMouse组件(Component->NGUI->Example->Spin With Mouse),该组件可以使得物体随着鼠标的拖动而转动,如图所示







在3D对象下创建一个Direction Light,这样就把场景照亮了,这样场景就漂亮多了,如图所示







接下来,我们来制作GUI部分。使用Create a new UI对话框,创建一个Simple 2D,如图所示







把Anchor对象改名为Anchor Bottom,并设置其side参数为Bottom。如图所示







选择Panel,改名为Window Panel,使用WidgetTool创建一个SlicedSprite,设置参数,并把该元件改名为background,并调整它的大小和位置,如图所示







现在看到视口中间还有一个正方形,这个东西是我们上面那个3D对象层级的背景,我们选择UIRoot(2D)对象包括其子对象,为其添加一个2DGUI layer(如何添加Layer和Layer的作用在unity文档中有描述,这里不再赘述)。选择UIRoot(2D)中的Camera,设置其Culling Mask为2DGUI,也就是说这个摄像机只显示这个Layer中的对象,其他Layer的对象不会在这个摄像机中显示。最后效果如图所示







选择WindowPanel,为其添加一个新的Panel(NGUI->create a Panel),并重新命名为ListPanel,如图所示







为ListPanel创建一个空的游戏对象,并命名为DragDropContainer,reset一下,并为它添加一个Collider(NGUI->Attach a collider),如图所示





作者: 艾西格亚    时间: 2012-10-14 14:01
这个教程还有第二部分,请期待
作者: 最爱小布点    时间: 2012-10-17 10:28
跪求NGUI官网示例11 –Drag & Drop(二) 第二部分内容
作者: 其实我是神    时间: 2012-11-28 17:14
www.narkii.com这里好东西很多。
作者: may    时间: 2012-12-1 23:30
支持楼主的帖子
作者: 王者再临    时间: 2012-12-28 20:26
学习了,虽然还是有难度,谢谢楼主的用心  
作者: xueshong    时间: 2014-4-23 16:38
今天整了哈  拖动旋转老是不成功




欢迎光临 纳金网 (http://rs.narkii.com/club/) Powered by Discuz! X2.5