NGUI例题3D效果图，亲手尝试

jim-0204 · 发表于 2014-8-29 17:31:52

最终效果图

一、新建一个场景，并把该场景中的MainCamera删除掉，并通过菜单中的NGUI->Create a new UI新建一个UI结构，如图所示：

二、创建一个Panel，然后把摄像机拖动出来，把UI Root 3D删除，把Panel改名为Message Root

三、在MessageRoot下，创建一个空游戏对象，并命名为3D UI，并Reset它的所有变换如图所示：

四、创建一个Sprite，并命名为UISprite-Background，并在编辑窗口中调整它的大小，设置其深度为-5，该Sprite用于作为背景，其参数如图所示：

五、在3D UI层级中，新建一个空游戏对象，并命名为Window，该对象用于整体调整下面GUI的移动和旋转等

六、然后制作Window中的各个元素。首先创建背，使用UITiledSprite，该元素可以等你放大它的范围时，以平铺的方式显示

七、再创建一个UISliced Sprite来做标题，创建好之后在编辑窗口中改变它的位置和大小，使其在窗口的顶端，效果如下：

八、创建一个Label，作为该窗口的标题

九、在创建一个Label，作为窗口里面的文字

十、创建一个按钮，设置该按钮的Label文字描述为Show，背景色为蓝色

十一、为该Button创建一个空的子物体，并命名为Animation，最后对该空物体添加一个Animation组件（Component->Miscellaneous->Animation），并在project窗口中找到NGUI->Examples->Animations->Button，把该脚本添加到Animation组件中的Animation中。

十二、Show按钮添加三个装饰图标，这三个图标都是Sprite元素，可以制作一个之后，使用Ctrl+D复制出另外两个，并设置它的位置和颜色，然后再创建一个空物体把几个图标拖进去，统一管理

十三、再复制这个Button，并把该Button的Label文本里面改写成HIDE，删掉图标对象。

十四、接下实现点击按钮窗口平躺下来。先创建两个空游戏对象，并命名为WindowActive和WindowInactive，（要Reset），接着，调整WindowInactive的旋转角度和位置。还有一个WindowActive保持变换不变。

十五、选择Window对象，添加一个TweenTransform组件（Compoent->NGUI->Tween-> Transform），这个是平滑过渡，把WindowActive拖到form，把WindowInactive拖到to。那么就能实现角度的过度，记得把2个对象的勾都先去掉不让他们执行

十六、Show按钮添加UIplay Tween组件（Component->NGUI->Interaction->play Tween），把Window对象赋值给该组件下的Target，Trigger设置为OnClick，Play Direction设置为Reverse，If Disabled On Play设置为DoNothing。设置如下：

十七、首先，在场景中创建一个立方体，并为它赋予brick材质（在Project窗口中，NGUI->Example->Materials->brick）,为该立方体添加一个Spin组件（Component->Examples->Spin）,该脚本可以实现物体的旋转。再为其添加一个UIButtonScale组件（Component->Interaction->ButtonScale），该组件可以实现当鼠标位于该物体上面时，对该物体进行缩放。最后为其添加一个TweenPosition组件（Component->Tween->position）,设置其Method为EaseInOut，Duration为0.5，From为起始位置，To为最终位置，这两个位置根据你需要制作的位置不同而不同，你可以通过在编辑器中拖动该物体，然后确定该位置，并记录下来，输入到From和To中。