NGUI 学习笔记实战——制作商城UI界面

时间:2021-07-25 06:04:37

http://www.cnblogs.com/chongxin/p/3876575.html

 Unity3D的uGUI听说最近4.6即将推出,但是目前NGUI等UI插件大行其道并且已经非常成熟,所以我们还是先看眼前吧。

一、实现思想

  商城的功能是很多游戏都拥有的,按下一个界面按钮,弹出一个窗体。

  然后是商城中的商品可以拖动,既可以用手,也可以用滑条等等,至于点击购买就不单单是UI层的事了。等到实现NDate的时候再进行讨论。

二、实现背景

  1、NGUI->Open->Prefab tool bar ,拖一个black widget进去

2、之后布局如下,这些应该没什么难度,弄好锚点,depth设好即可

    

1
2
3
4
5
6
7
UITexture
    —》BG(Sprite)做高亮
    -》 Daimond(UITexture)钻石栏
        -》CreateDiamond(UITexture)+按钮
        -》Num(UILable)数量
    Gold(UITexture)
    Hp(UITexture)

3、然后差不多是这个样子

NGUI 学习笔记实战——制作商城UI界面

三、按钮弹出商城

  1、为了示范我们就做一个商城界面即可,其他的斗大同小异,我一般建议一个新的UI界面就用一个新的Panel,新建一个Panel

  2、添加美工给的背景等等,布局如下,比较麻烦的Scroll View,这个我就不加赘述,大家可以看我的博客,NGUI学习笔记Tutorial 4 http://www.cnblogs.com/chongxin/p/3821118.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ShopRoot
    -》Bg(Sprite)
    -> Control - Simple Vertical Scroll Bar
    -> Name(Lable)
    -> Return(Sprite button)
    -> Scroll View
        ->Grid(垂直列表)
            ->Grid(水平列表)
                ->Sprite0(商品图片)
                    ->Buy
                    ->CurrentKind
                    ->Num
                ->Sprite1
                ->Sprite2
            ->Grid
            ->Grid

  界面如下:

  NGUI 学习笔记实战——制作商城UI界面

  3、搞定了商城界面,我们需要做一个点击弹出效果,这个是借助Tween Scale实现的。不得不说NGUI的插件做的真心很好,很多代码都替我们节省了。

    首先:

NGUI 学习笔记实战——制作商城UI界面

  然后在ShopRoot 挂载Tween Scale,set active 为false 即可

  NGUI 学习笔记实战——制作商城UI界面

  最后,我们如果要返回的话,需要商城自己的Return来返回,一样的思想

  NGUI 学习笔记实战——制作商城UI界面

  注意:这里有个问题,我在根节点挂载Tween Scale的时候,有时候会出现UI不见消失不见的情况,不知道什么原因,后来就没出来了,希望大神指点一下。

四、功能实现

  弹出:

  NGUI 学习笔记实战——制作商城UI界面

  NGUI 学习笔记实战——制作商城UI界面

   基本上就这些,有了UI插件,做UI还是很愉快的,可以专心于UI效果,而不是构造它,祝大家生活愉快。