NGUI 制作简易背包UI

前言


本文由作者@zx一路飞奔出品,转载请注明出处
文章地址:http://blog.csdn.net/u014735301/article/details/43228693
作者微博:http://weibo.com/u/1847349851


 最近闲的时候,体验了几款比较火爆的手游,其中个人认为做的比较好的一款是 暗黑黎明。

正好自己的小游戏,要做一个背包的UI,就模仿下,暗黑黎明吧

 先看一下 暗黑黎明 本身的背包的UI


NGUI 制作简易背包UI_第1张图片


一个占据屏幕整体的UI设计,左边是人物装备,右边是背包,最右边是tabs,可以切换成不同的分类。

背包栏里面是一个一个小格子,是可以根据手指的滑动而上下滚动的。

恩,我要做的UI,也是简单的实现上面的功能。


Scroll view


首先在NGUI 的UIRoot下,创建一个sprite来作为背包的背景图片,命名为beibao

NGUI 制作简易背包UI_第2张图片

在beibao下面,创建一个scroll view

NGUI 制作简易背包UI_第3张图片 NGUI 制作简易背包UI_第4张图片

上面挂有两个脚本,UIPanel,UIScroll view 

NGUI 制作简易背包UI_第5张图片 NGUI 制作简易背包UI_第6张图片

在scroll view下创建Grid,并且在grid下,创建sprite作为 背包格子,并且添加collider组件 和 Drag Scroll view脚本。

这样就可以在格子上,滑动鼠标来进行移动了,

NGUI 制作简易背包UI_第7张图片 NGUI 制作简易背包UI_第8张图片

创建一个格子后,按 ctrl+D,复制多个格子。修改grid脚本参数,可以自动排列格子,这里不得不说,NGUI很强大


NGUI 制作简易背包UI_第9张图片 NGUI 制作简易背包UI_第10张图片

到这里,一个背包面板就做好了,而且是可以滑动查看更多哦!,下面来看看通过tab来切换不同面板


Tabs


这里只是简单的使用ngui现有的脚本,如果想要了解更多,请自行研究


NGUI 制作简易背包UI_第11张图片

这样就可以实现面板的切换了。最后看一下整体效果

NGUI 制作简易背包UI_第12张图片

恩,感觉和暗黑黎明没法比啊 哈哈~~~~~~~~



你可能感兴趣的:(【unity3d】【NGUI】)