unity3d学习笔记(八)--NGUI制作游戏界面

本系列文章由Aimar_Johnny编写,欢迎转载,转载请标明出处,谢谢。

http://blog.csdn.net/lzhq1982/article/details/12706199


有关NGUI的介绍我这里就不多说了,由于unity3d自带的界面绘制工具GUI效率低下,所以NGUI被广泛使用,它的原理也很简单,就是把UI绘制到一张plane上,然后摄像机用平行投影垂直摄像,这样就和处理一般的3d物体一样了,不了解NGUI的朋友可以从雨松大神这里入门:NGUI研究院之开始学习制作第一个例子(一)

好了,我这里重点介绍的是怎么在我们的3d世界中加入NGUI的界面,我这里用的是NGUI 2.6.4,有版本不同的童鞋请自行体会,哈哈。


一般的NGUI教程一上来都会说把Main Camera删掉,然后怎么怎么做,我一开始的时候看到这句话头就大了,我的场景都是在Main Camera下做的,不可能删了啊,由于对unity多开Camera不了解,就各种尝试,我甚至曾经以为把Main Camera作为NGUI的Camera,然后NGUI的plane只要在场景的前面就好了,倒也能达到效果,但界面不知道为什么会随着角色移动而颤抖。最后无意中的尝试发现,原来不用那么麻烦,就是让Main Camera和NGUI的Camera并存也没问题,两者投影的场景都会绘制在屏幕上,而且互不影响,我的心都碎了,这是做了多么二的各种尝试啊。所以如果对这不了解的童鞋看到这些,相信你就不用再走弯路了。


吐槽了很多,现在言归正传,放着我们的Main Camera不管,我们新建一个UI,NGUI->Open the UI Wizard,然后弹出的UI Tool,我们保持设置不变,点Create Your UI,下面是重点,一个游戏UI,我们希望它们分布在屏幕的四边,当然中央有需求也可以,NGUI给我们提供了一个很好的界面布局方法,那就是Anchor(锚点),默认是Center(居中)的,我们的需求是界面的上下左右都有UI,那好办,多创建几个锚点,还有,我的所有UI都应该是绘制在一个面板上的,这样可以统一放大缩小位移等,按照这个需求,把刚建的Camera下的那个锚点连同其下的面板删掉,留着Camera,新建一个面板(NGUI->Create a panel),然后在该面板下创建多个锚点,然后每个锚点下创建你需要的UI。我的是这样的。



布局做完了,你可以往各个锚点里添加你想要的UI了,比如我的左上角(LeftTop)用来放人物头像血条,上面中间(Top)用来放怪物头像血条,右上角(RightTop)是小地图,右下角(RightBottom)是技能按钮,等等。

好了,下一篇我重点介绍英雄和怪物的头像血条UI。

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
完全集成到Inspector面板中。   不需要点击Play按钮就能查看结果。    在场景视图中看到的就是在游戏视图中得到的(所见即所得)。    基于组件的、模块化的特性:要让你的界面控件做什么,只需为其附加相应的行为,而不需要编码。    全面支持iOS/Android和Flash。    灵活的事件系统。    可以让复杂的UIs只占用一个draw call。    可以直接在编辑器中创建、更新/修改纹理地图集,或从Texture Packer程序导入纹理地图集。    支持光照贴图、法线贴图、折射等特性,让你尽情发挥创造力!    支持硬边或柔性的面板裁剪。    支持灵活尺寸的表格,能够自动对控件进行排列。    通过IME输入法支持东方语言(有Web版本的演示程序)    内建本地化系统。    内建的键盘和摇杆支持。    提供大量有用的辅助脚本,从改变按钮颜色到拖拽对象。    简单的内建补间动画系统。    简洁和高度优化的C#代码。    没有DLL,也不依赖于其他外部资源NGUI的使用方式与Unity的使用方式一样。使用Widget Tool可快速创建模板化的控件,或者从基本组件创建你自己的控件。可以按照你的意愿拷贝/粘贴,把你的窗口保存为prefabs。所有一切只需简单地点   击操作即可完成。当需要编写代码让控件移动时,可以选择简单的例子代码,可以把你的控件转变为按钮、输入框、基于事件改变颜色、播放声音、触发动画等等

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值