关于Unity中NGUI的Tab商城、Scrollview和打字机效果的实现

Tab商城实例

UIToggle 和 UIToggledObjects+ Box Collider（实现商城功能必备）

1.创建两个个UI Sprite，Sprite1和Sprite2

2.给Sprite1和Sprite2都添加UI Toggle组件和UI Toggled Objects组件，设置UI Toggle组件中的Group值一样，归为同一组，这样只能有一个被选择，就像男女只能选一个，再勾选Sprite1的Toggle组件的Starting State，设置为默认的Tab

3.再给Sprite1和Sprite2创建一个Label子节点，使用Unity字体，mysh字模。上面写菜单的名字

4.再给Sprite1和Sprite2添加碰撞器组件NGUI---->Attach---->Collider和按钮效果组件Button offset和Button scale

5.当鼠标经过这两个菜单时，会变大(Button scale)，按下去的时候会偏移一小段距离(Button offset)

6.创建两个空节点Content1和Content2下面各带一个UI Label，写上道具Tab和坐骑Tab，再在Content1和Content2下面各带一个UI Sprite当作背景，调节Label的Z序Depth---->Forward，显示在背景前面

7.设置Sprite1的UI Toggled Objects组件里面的Activate属性，Size为1，然后把Content1拖到Element0中，Content2同理关联到Sprite2的UI Toggled Objects组件里面的Activate属性。

8.然后运行就可以看见，当鼠标点击道具时显示道具Tab面板，当鼠标点击坐骑时显示坐骑Tab面板

　　

9.给Tab切换增加音效，给Sprite1和Sprite2添加音效组件Play Sound，关联好音效资源到Audio Clip

10.其实它控制的只是Content是否激活，点击其中一个就激活它并隐藏其他的Content

 

 

ScrollView滚动视图实例

ScrollView滚动视图，基于UIPanel实现 （实现商城功能必备）

1.创建一个Widget(所有NGUI控件的父类)，NGUI---->Create---->Widget，把Sprite1和Sprite2、Content1和Content2一起放在Widget类型的Container节点下

2.再创建一个Widget，下面创建一个Scroll View控件子节点NGUI---->Create---->Scroll View，在Scroll View子节点下面再创建一个Grid控件子节点NGUI---->Create---->Grid，给Scroll View设置一个锚点可以让它和UI Root比例一样大

3.UI Grid是一个自动布局的工具，在Grid节点下再创建几个Sprite子节点，调整Grid的Cell Width和Cell Height可以改变每个Sprite子节点之间的间距

4.给Grid添加一个UI Center On Child组件，让它的孩子节点必须居中显示，有一些商城无论怎么滚动都是居中显示，就是用了这个组件，不会出现下面的拖动到一半道具图片停下来被分成两半的现象

5.给每一个Sprite子节点都加上Box Collider组件NGUI---->Attach---->Collider和Drag Scroll View组件，并且把父节点的父节点Scroll View拖进每个Sprite的Drag Scroll View组件的Scroll View属性中，变得可以拖动

6.再给每一个Sprite子节点都加上UI Center On Click组件，当点击两侧的时候也会跳转到前面一个或者后面一个的Sprite

7.选择Grid节点的UI Grid组件右上角设置的Excute执行脚本，让它帮我们自动排版Sprite

8.可以设置Scroll View节点的大小，来调节显示窗口，Scroll View越大，显示的道具图片越多

 

 

Tab商城和ScrollView滚动视图的组合

1.把整个Scroll View节点拖到Tab商城的Content1和Content2下作为子节点，再调整好位置，就可以实现组合效果

2.效果

3.后面可以把一个一个的Sprite做成Button，触发购买，跳出购买弹窗的事件

 

 

UI Center On Click组件代码

public class UICenterOnClick : MonoBehaviour
{
    void OnClick ()
    {
        UICenterOnChild center = NGUITools.FindInParents(gameObject);//从所有父节点中找到UI CenterOnChild组件
        UIPanel panel = NGUITools.FindInParents(gameObject);//从所有父节点中找到UI Panel组件

        if (center != null)
        {
            if (center.enabled)
                center.CenterOn(transform);
        }
        else if (panel != null && panel.clipping != UIDrawCall.Clipping.None)
        {
            UIScrollView sv = panel.GetComponent();
            Vector3 offset = -panel.cachedTransform.InverseTransformPoint(transform.position);
            if (!sv.canMoveHorizontally) offset.x = panel.cachedTransform.localPosition.x;//在X方向上做一些偏移
            if (!sv.canMoveVertically) offset.y = panel.cachedTransform.localPosition.y;//在Y方向上做一些偏移
            SpringPanel.Begin(panel.cachedGameObject, offset, 6f);//开始偏移
        }
    }
}

 

 

打字机效果实例

UILabel 和 TypewriterEffect（游戏中的新手引导或人物的对话功能中）

1.创建一个UI Label，NGUI---->Create---->Label

2.添加Typewriter Effect组件，Char Per Second是打字机打字速度，Delay On Period每个周期之间延迟多少，Delay On NewLine每一行字之间延迟多少，Keep Full Dimension保持行的位置不会因为换行而移动。