NGUI入门学习笔记

一，开始要先创建UI Root
1，选中任意控件，右键help，选择UIxxx可以查询不懂的控件
2，菜单栏里选择NGUI，options，reset prefab toolbar，可以调出预制工具条,使用的时候方便

3，创建UIRoot，直接将toolbar里的背景拖过去

二，Label学习（显示字体）

1，在scene视图中要想在scene视图直接右键进行创建等操作，inspector里UIScript必须展开，还要选择如图所示模式

 显示出周围的拖拽点

2，选中UIRoot，在视图中右键create，label（第一次没选中Root而选中其他子控件进行创建时，label后还有子和兄弟两个选项）
3，inspector脚本文件中可以对字体进行各种设置
1），字体可以选两种：NGUI,unity。用NGUI的话，点击font，show all就可以任意选择字体；
unity的话，默认没有可选项或只有一种（它使用系统字体），需要到系统文件中copy（windows下在
C:\Windows\Fonts）
4,dynamicFont动态字体集的创建(跟图集类似)，菜单栏ngui，open，font maker，然后type选择dynamic，source选择你要制作字体类型的字体文件。。。create

5，属性什么的（大小，设置颜色，阴影，自适应。。。很简单）

三，sprite（显示图片）
1，创建：首先还是要先建立UIRoot，拖动背景到hierarchy里；然后右键create，sprite，默认没有任何图片显示；
接下来设置图片，首先设置Atlas（图集，图片集合，将很多小图片合成一张大图），然后设置sprite，选择一张图片，这样一个图片精灵就创建好了
2，type属性
Simple：标准的Sprite，自适应大小


Sliced：九宫格切片，创建固定边框控件的最佳选择。边框固定，图片中间做拉伸(缩放)，如角色头像，按钮背景；
使用:选择type为Sliced，点击sprite的edit进行Border编辑（设置不想改变的四个角），这样拉伸时只有中间1块
被拉伸，其余8块（所以叫9宫格）不会有变化

Tiled：平铺，一个Sprite缩放填充整个区域，如背景平铺


Filed：每个Sprite有一个单独的参数(file Amout)来控制哪些是可见的，用来制作技能CD冷却时间或进度条


Advanced：高级的，自定义左右上下中的Sprite Type

3，flip翻转

4，fill center，自己点一下就发现了

四，panel 面板（控件功能分区）UIRoot下也自带一个
1，创建
2，alpha，透明度
3，Clipping 让你选择是否需要裁切功能。默认情况下不会有裁切。裁切是使用Shader来实现的，当选择了任意一种不是None的裁切模式之后，NGUI会尝试自动的获取一个裁切版本的shader，并更新材质。


如果选择了裁切模式，你可以选择裁切区域的中心点和大小，单位是像素。如果不修改这些参数的默认值，那么会按照整个屏幕的大小来裁切，这个跟没有裁切是一样的效果。


如果裁切模式选择了SoftAlpha，你可以改变Softness参数，这个参数决定了被裁切内容淡出的边缘宽度，这个在整个裁切区域的四个边都是相等的


五，button（按钮控件）
1，创建，这里的button只是一个脚本功能，他需要创建label，sprite等其他物体，然后赋予它button的功能
2，创建一个精灵（设置图集，图片什么的），点击精灵 attach box collider（碰撞检测，带交互的都要加），再attach button script，这样就创建好了一个button
3，添加相应。现实中点击button后会有各种相应，我们需要在精灵的 on click组件里添加响应的对象（比如说camera，并为它添加一个脚本，里面写个函数clickButton，函数实现 print("hello button")）,
然后设置响应的方法（Method，click，clickButton），这样运行游戏，当我们点击button的时候，控制台会输出hellobutton
4，默认条件下，我们的精灵button点击，悬浮，按下等效果是由colors来控制的，当然如果想用其他精灵来实现的话，设置sprites里的属性即可


六，创建图集（合图atlas）
ngui，open，Atlas Maker，new，图片全选，create，这样以后创建精灵的时候就可以直接用我们创建好的图集里的图片了


七，widget属性（就是一个限定范围的框）

1，pivot，旋转运动，控制显示物体在框内的相对位置，三角形点一下就知道了

2，Depth，这个很重要，设置物体显示层数的，越大，越显示在上；相反，越小，越往下被掩盖

3，size，大小。。。

八，Anchors锚点
就像是一个钉子，把我们设置的对象1钉在另一个对象2上，
假设将一幅画钉在门上，门能进行缩放，在缩放门的时候，会发现画相对门的某个位置始终不变

type选择 unified，下面各项属性举个例子，方向与target 方向对应，后面为0，四个方向设置完后，对象1能完全镶嵌在对象2上

九，tween渐变动画

右键，Tween，进行位置，旋转什么的动画

感觉跟PPT里的进入动画差不多


十，slider滑动器，制作一个滚动条
1，首先创建一个sprite（滚动条背景），为其添加attach collider（碰撞交互），attach slider script（slider属性），create sprite（forebg）（滚动条前置背景），将子对象forebg拖到到sprite的Foreground选项，运行，你就会发现一个简易的滚动条已经制做好了,
2，在uiroot下创建个label（字体为100%）显示百分比，将label拖到sprite的on value change的notify里，method里选择SetCurrentPercent，运行拖动就会发现数字在变化
3，thump是滚动条顶端的类似于拇指一样的东西，创建个sprite，设置大小，拖到Thumb选项，他会自动到滚动条顶端
运行，拖动
4，direction，滚动条的方向
5，添加脚本组件slider colors，将前置背景拖入sprite空栏里，这样拖动的时候前置背景会随着百分比进行颜色变化


十一，为按钮添加点击音效
add component，搜索play sound，在audio clip里设置音效


十二，制作文字剧情
正常情况下制作的label文字是全部显示的，我们可以为其添加Typewriter Effect脚本，chars per second设置每秒打几个字
实现打字机的效果


十三，制作下拉列表
创建一个sprite，Attach collider，Attach popup list script，在options的选项里填写下拉列表的各个选项，分多行；


在sprite下创建一个label控件以显示选项内容，将其拖入sprite的on value change（跟滚动条一样），方法选择setCurrentSelectoin


十四，创建单选框
创建一个sprite，attach collider，attach toggle script，
再创建个子sprite，设置勾选时的图案（对号），将其拖到脚本toggle中的sprite属性栏中即可


十五，复选框中字符比较的换行问题
利用switch case判断所选字符时（switch(UIPopupList.current.value)）,若options中的文字中有换行，比较的时候会因此匹配失败，要在switch(UIPopupList.current.value末尾加个Trim()函数，取消字符两边的空格


十六，两个界面切换动画

1，右键，创建两个invisible widget，在里面添加各种label或sprite控件，分别为两个控件设置tween position动画，使其向屏幕一侧滑动,设置from 属性为如下初始位置

2，仍在main camera上添加脚本click

using UnityEngine;using System.Collections;public class click : MonoBehaviour {    public TweenPosition startGo;              //两个Tween动画实例    public TweenPosition optionCome;    public void clickButton(){        print("hello button!!!");}    public void optionClickButton()    {        startGo.PlayForward();                //位移        optionCome.PlayForward();    }    public void completeClickButton()    {        startGo.PlayReverse();        optionCome.PlayReverse();    }}

为脚本文件的startGo，optionCome属性赋值（将动画所在控件（widget）拖进来）
为“完成设置”所在控件的button脚本中的on click设置执行函数

十七，制作技能冷却
1，首先创建一张图片作为技能图
2，在这张图下再创建一张图Shadow（颜色黑色，调整alpha值为半透明）作为阴影，type为filled，拖动 fill amount就可以先看一下效果
3，添加脚本用代码控制按下A时，技能开始冷却

using UnityEngine;using System.Collections;public class skillCD : MonoBehaviour {    public float coldTime = 2.0f;                             //冷却时间    private bool isColding = false;                           //是否处于冷却    private UISprite shadow;                                  shadow精灵引用    void Awake()    {        shadow = transform.Find("Shadow").GetComponent<UISprite>();   //阴影图片    }    void Update()    {        if (Input.GetKeyDown(KeyCode.A) && isColding == false)        {            //放技能            //ui冷却            isColding = true;            shadow.fillAmount = 1;        }        if (isColding)        {            shadow.fillAmount -= (1.0f / coldTime) * Time.deltaTime;            if (shadow.fillAmount <= 0.05f)            {                isColding = false;               shadow.fillAmount = 0;            }                    }    }}

十八，输入框
为精灵添加input脚本即可
input type：输入类别，密码隐式
validation：校验
on return key：输入回车之后，换行或提交操作


十九，使框可拖拽可调节大小
拖拽，添加drag object（通过添加组件添加，不能之间右键添加），设置target


调节大小，添加一个类似于箭头的小精灵，为这个精灵添加collider，添加drag resize script，设置target为要改变大小
的精灵


二十，文本列表
创建label，添加collider，textlist脚本(设置text label属性为这个label)实现文本列表，paragraph history代表文本列表所能存的最大行数
style：chat是聊天模式，文本从下往上生成
添加scroll bar，这样就实现常见的可拖动的文本列表


二十一，聊天系统
聊天系统就是一个带滚动条的文本列表和一个输入框组合在一起并实现两者之间信息交互


为输入框添加脚本文件MyChatInput

using UnityEngine;using System.Collections;public class MyChatInput : MonoBehaviour {    private UIInput input;    public UITextList text;    private string[] names = new string[5]{        "东",        "西",        "南",        "北",        "风"    };// Use this for initializationvoid Awake () {        input = this.GetComponent<UIInput>();}    public void ChatSubmit(){        string name = names[Random.Range(0, 5)];        string chatMessage = input.value;        text.Add(name + ":" + chatMessage);        input.value = "";    }}

将文本列表赋予text属性，在on submit里赋予 输入框对象和ChatSubmit方法，on return key选择 submit

至于文字不显示的话：看widget 里面的depth，文字颜色什么的


二十二，背包系统
1，制作背包背景，格子和物品的prefab
（1），400 * 400 的背景图片knapsack_bg

（2），100 * 100 的格子cell，attach box collider，制作成prefab，再复制15个，编号cell_01到cell_16，如图

（3），在cell下创建一个物品knapsack_item，设置大小100 * 100，添加box collider（因为下一步要添加拖拽脚本）再创建个子对象label表示物品的个数.制作成prefab后期可以根据物品名字的不同实例化不同的物品出来

2，物品拖拽及物品拖拽交换
为cell添加tag为Cell（记得apply），为物品添加tag为knapsack_item，后面判断surface对象时用到，
物品拖拽目标surface为cell时（空格子），物品放入且位置自动居中；
当目标有物品时，两者相互交换位置。
为物品knapsack_item添加脚本KnapsackDragAndDrop（OnDragDropRelease方法即可实现，其余为其他对象调用），继承UIDragDropItem才能实现拖拽功能

using UnityEngine;using System.Collections;public class KnapsackDragAndDrop : UIDragDropItem {    public UISprite sprite;                             //获得Sprite组件    public UILabel label;                               //或得Label组件    private int count;                                  //物品计数    public void AddCount(int number = 1)                //物品计数函数，每次加1，之后更新Lable，加个空字符串转换为字符类型    {        count += number;                                         label.text = count + "";    }    protected override void OnDragDropRelease(GameObject surface)    {        base.OnDragDropRelease(surface);                                                //继承父类该方法        if (surface.tag == "Cell"){                                                     //如果surface为Cell，则替换物品的parent，居中            this.transform.parent = surface.transform;            this.transform.localPosition = Vector3.zero;        }else if (surface.tag == "KnapsackItem"){                                      //否则，两者的parent交换并居中            Transform parent = surface.transform.parent;            surface.transform.parent = this.transform.parent;            surface.transform.localPosition = Vector3.zero;            this.transform.parent = parent;            this.transform.localPosition = Vector3.zero;        }            }}

3，捡起物品(物品累加和新添)
为背包背景精灵knapsack_bg添加脚本Knapsack

using UnityEngine;using System.Collections;public class Knapsack : MonoBehaviour {    public GameObject[] cells;                          //格子数组，用于遍历查找子对象数    public string[] equipmentsName;                     //物品数组，随机获取物品名称    public GameObject item;                             //物品prefab的引用    void Update()                                      //键盘按下x的时候，执行PickUp函数    {        if (Input.GetKeyDown(KeyCode.X))        {            PickUp();        }    }           public void PickUp(){        int index = Random.Range(0, equipmentsName.Length);   //随机获取物品名称        string name = equipmentsName[index];        bool isFind = false;                                 //遍历cells数组，若childCount>0（即cell下有物品），        for ( int i = 1 ; i < cells.Length ; i++ )                   {                                                                if (cells[i].transform.childCount > 0)                      {                                               //获取当前格子里的物品（KnapsackDragAndDrop脚本引用）                KnapsackDragAndDrop item = cells[i].GetComponentInChildren<KnapsackDragAndDrop>();                if ( item.sprite.spriteName == name )         //当前格子物品名称跟随机捡到的物品名称相同                {                    isFind = true;                          //设置标志位为true，该物品数量加1，结束此循环                    item.AddCount(1);                    break;                }            }        }        if (isFind == false)                           //根据标志位判断没有相同物品，即放在新格子里面        {            for ( int i = 0 ; i < cells.Length ; i++ )            {                if ( cells[i].transform.childCount == 0 )                {                    GameObject go = NGUITools.AddChild(cells[i] , item);   //这个方法可以实现在一个对象（cells[i]）上添加另一个对象（item）                    go.GetComponent<UISprite>().spriteName = name;         //设置该物品的名字和位置居中，跳出循环                    go.transform.localPosition = Vector3.zero;                    break;                }            }        }            }}

二十三，血条
1，类似于滚动条，创建两个sprite，为背景添加progress bar脚本，设置前置背景和后置背景，拖动value。。。。
2，人物头顶跟踪血条
在main camera下创建一个cube充当物体（再添加一个directional light），在asset里import package，NGUI HUD text。然后为血条添加
follow target脚本，target属性为cube物体，设置两个camera（cube由main camera渲染，UI由自己的camera渲染）
3，添加飘字效果，在bg（只有在UIRoot添加该脚本下才行）添加脚本 HUD Text，然后在创建添加个脚本textHUD控制点击bg实现飘字效果

using UnityEngine;using System.Collections;public class textHUD : MonoBehaviour{    private HUDText text;    void Awake()    {        text = this.GetComponent<HUDText>();    }    void Update()     {    if (Input.GetMouseButton(0))    {            text.Add(-10,Color.red,1f);    }       if (Input.GetMouseButton(1))        {            text.Add(10,Color.green,1f);        }    }}