NGUI 制作简易背包UI

前言

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

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

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

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



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

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

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

Scroll view

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



在beibao下面，创建一个scroll view





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





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

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







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





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

Tabs

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



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



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