NGUI学习

Uiroot是所有ui的根，必须先创建。

 

Label

 

Label fonts overflow

shrink content:

默认的随着边框变化而变化的文本内容

ClampContent：

把多余的减掉

Resizefreely：

文字和边框强制保持一致。

resizeHeight:

可以调节宽度，高度与文字保持一致。

 

Label fonts alignment

对齐

 

 

Panel

Clipping soft-clip

根据限定的范围显示panel里面的内容

 

Clipping contrain-but-dont-clip

限定panel的范围但仍然显示超出的内容

 

Button

做label的按钮，先要给label加上boxcolider。然后就attach一个button script。

 

 

这个东西需要在做图片按钮的时候用到 Altas--wooden altas

但是这里并没有解释为什么用这个东西。还有这个是什么意思。

上网查了一下，应该是，图集的意思。不太懂。

 

事件响应：

首先先吧button弄好，然后脚本弄好，

 

在uibutton下面这个onclick是指定方法的地方，这个notify是指定挂载脚本的地方，比如我把控制这两个按钮的脚本放在了maincamera上面，那么这个notify就是maincamera。

 

像这样，挂上去就可以使用了。

 

静态字体与动态字体

上次创建动态字体的时候，fontmaker出现了问题，解决不了，最后还是创建一个空的对象，然后挂载ngui的字体脚本上去弄出来了，但是用这种方式做出来的动态字体不知道缺陷是什么。

静态字体相当于有一千个字，然后把这一千个字都做成一个图集。但存量有限。

 

widget属性 pivot depth和size

Privot 就是中心点的位置，可以调节

Depth就是深度，数值越大越靠前。

 

 

Anchor

 ---------------------------------------2016.7.29-----------------

利用anchor做的背景图片和相机相同大小自适应：

把anchor的type改为unified。

Left改为targetsleft。

Right改为targetright。

Bottom和top同样。

然后left，right，bottom，top全部置为0。

 

利用anchor做的小地图自适应

Tween动画

Tween动画我感觉类似于网页的一个东西。

功能都有这些，可以给各个ui控件做位移，旋转，缩放，颜色什么的之类的操作。

Slider

就是做一个滑动条的东西。

加上box colider 加上slider script 就可以做呈这样一个滑动条，另外ngui也有做好的prefab。

Popuplist

顾名思义，这就是做一个弹出列表的东西，跟上面的滑动条也差不多，加一个box colider

再加一个popuplist再进行相应的设置即可。

需要注意的是，要在这个物体上面加一个label来显示选中的选项，字体什么的也要注意一下，如果有中文的话，就要选择支持中文的字体。

还要在加个方法监听在label上面。

Checkbox

单选框，具体操作也跟上面的差不多。

先加boxcolider，再加toggle script。

具体就是，点击挂载了togglescript的物体的时候，显示设定好的第二张图片，这张图片是自己设定的。

 

根据教程，利用checkbox,popuplist,slider做出来的一个游戏设置界面：

-----------2016.7.31-------------

接下来，就是参数传值什么的了。

参数传值的做法：

利用UIPopupList.current.value.Trim()

UIToggle.current.value;

获取到ui控件的值，然后反馈到脚本里面。保存起来。

像这样：

    public void onGameGradeChanged()

    {

        switch (UIPopupList.current.value.Trim())

        {

            case "简单":

                grade = GameGrade.EASY;

                break;

            case "一般":

                grade = GameGrade.NORMAL;

                break;

            case "困难":

                grade = GameGrade.DIFFCULTY;

                break;

        }

        print("onGameGradeChanged"+UIPopupList.current.value);

}

然后记得

两个下拉列表，一个单选框，大概都是这样的操作。

 

然后开始做界面切换的动画。

先给start挂上tweenposition的动画。

效果是会把这个界面往左移出屏幕。

接下来是也要给option挂上tweenposition的动画。

效果是这个界面往左移进屏幕。

把设置按钮挂上通知脚本的方法：

另外一个按钮也挂上：

最后在脚本里面写一下这两个方法播放tween动画的代码，就可以了。

如图：

顺带一提PlayReverse()这个方法的意思是反向播放动画。

这样，一个游戏菜单的小demo就完成了。

--------------------------2016.8.3---------------

技能cd

创建一个sprite

再创建一个sprite作为子物体type选为filled。作为技能cd的那个遮罩。再用一个脚本来控制遮罩的运作。大体就是这样。

如图：

代码：

using System.Collections;using System.Collections.Generic;using UnityEngine; public class skill : MonoBehaviour {    public float coldTime = 2;    //private bool isCanRelease = true;    private UISprite sprite;    private bool startCold = false;// Use this for initializationvoid Awake () {        sprite = transform.Find("Sprite").GetComponent<UISprite>();}// Update is called once per framevoid Update () {        if (Input.GetKeyDown(KeyCode.Q)&&!startCold)        {            //释放技能            //创建粒子系统 显示技能特效            //显示ui技能冷却效果            sprite.fillAmount = 1;            startCold = true;        }        if (startCold)        {            sprite.fillAmount -= (1f / coldTime) * Time.deltaTime;            if (sprite.fillAmount<=0.05f)            {                startCold = false;                sprite.fillAmount = 0;            }        }}}

挂到这里就好了。

然后就可以了。

 

注册页面简易demo

首先，这是这个简易demo的层级结构：

首先，我们可以看到，有四个类似输入框的东西，那个是uisprite挂上uiinput之后，再加个label上去，然后再指定uiinput的label所制成的一个输入文本，说起来很复杂。

其实就是给sprite挂上一个uiinput脚本，然后指定一下label用于显示就可以了。

值得一提的是，这里还可以有简易的输入验证，再uiinput那里选定validation的类型就可以了。

不过，由于有点不够完善，大部分都是还是要自己写验证的。

所以，跟着教程，我也是写了一个验证年龄的脚本。

代码：

using System.Collections;using System.Collections.Generic;using UnityEngine;public class AgeLimit : MonoBehaviour {    private UIInput input;// Use this for initializationvoid Awake () {        input = this.GetComponent<UIInput>();}// Update is called once per frame    public void OnAgeValueChange()    {        string value = input.value;        //转一下类型        int valueInt =  int.Parse(value);        if (valueInt<18)        {            input.value = "18";        }        if (valueInt >120)        {            input.value = "120";        }    }}

 

但是这样写完之后，还不行。

还要做以下一点小小的设置：

可以看出，onsubmit的时候通知了agelimit的OnAgeValueChang方法。

然后onReturnKey那里也变成了submit。也就是说，按回车就会有发送，发送就会检查。

所以，这个小demo也完成了。

可拖拽窗口控件

这个倒是意外的简单啊，也可以运用到ngui里面很多控件上面去。

首先，创建个sprite，在创建一个sprite用来做拖放的指标。

然后就是挂脚本和设置之类的了。

顺序如下：

首先，把外层的sprite挂上UI DragObject的脚本。

然后，把内层的sprite挂上 UI DragResize脚本。

最后，指定UI DragResize的target。

如图：

创建滚动条

其实到这里，大家也都差不多知道了，这个ngui的使用方式有很多都是一样的。

这里创建滚动条也是差不多的。

首先，我们先创建一个sprite。取名为back。

然后在这个sprite下面再创建一个sprite取名为fore，把fore的大小调整到与back差不多，然后把fore的anchor弄好。

为什么要大小弄的差不多才开始调整anchor呢？

因为如果差不多的话，系统会自动识别对齐的锚点，就不用自己一个个再点了。

如图

接下来，将back attach一个boxcolider然后挂上脚本scrollbar script

最后在指定一下。

如图：

聊天系统demo

首先，这是总体结构

首先，先创建一个背景。

给背景加上boxcolider，然后加上一个可拖拽的脚本。

并指定背景为target。

在bg下面创建一个resizebutton

resizebutton同样是要加上boxcolider

然后挂上dragresize，指定target为bg的话，这样就能用这个sprite来控制整个背景的大小了。

这种方式几乎可以用在所有的ui控件上面。

需要注意的是，这bg并不是黄色那块背景。

现在要弄的是黄色那块背景--chatBg

创建一个sprite，然后选一个图片。

然后做自适应（自适应就是把anchor的锚点弄一下）

然后再chatBg下面创建一个label，把这个label挂上textlist的脚本。这样就可以显示多行了。另外，也要指定一下textlist的各种设置。

如图

Textlabel的意思就是字显示的地方。

Scrollbar，顾名思义就是滚动条，跟上面所说的滚动条差不多，只是背景颜色变了一下，变的更加显眼了而已。

Style有两种，一种是text，一种是chat。Chat就是像微信聊天那样，从下面开始一条条蹦出来，而text就是自然书写的样子，从上面开始，一行行慢慢往下走。

Paragraph history就是最大的段落行数，上面设置的是50，这个可以按照实际情况来。

接下来也是帮这两个新建的ui组件做一下自适应。

Ps：由于每个新建的ui组件都要做自适应，下面也就不做赘述。

滚动条也没什么好说的，这个滚动条是我直接从上面的案例那里拿过来的。

接下来介绍一下输入框。

这个输入框，我用的是ngui里面做好的prefab，叫simple input field，输入框也没什么好说的。

说一下脚本。

详细看脚本注释。

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

 

public class MyChatIntput :MonoBehaviour {

    //获取到输入框

    private UIInput input;

    //再用public拖动的方式来指定bg里面的textlist

    public UITextList textlist;

    //这个是名字

    private string[] names =new string[4]

    {

        "ys",

        "李雷",

         "王重",

          "林三酒",

    };

// Use this for initialization

void Awake () {

        //然后这里是初始化

        input = GetComponent<UIInput>();

}

// Update is called once per frame

 

    public void onChatSubmit()

    {

        //这个方法的作用就是把输入框的字获取到，然后加到textlist上面去，之后在每句话前面加一个随机的名字，这样就有一种好像很多个人在说话

        //起到一种自欺欺人的效果，美哉

        string username = names[Random.Range(0,4)];

        string chatMessage = input.value;

        textlist.Add(username +" : "+chatMessage);

        input.value = "";

    }

}

最后成功的样子：

--------------------------------------------------------------------------2017.10.27-------------------------------------------------------------------------

简易背包demo

这个简易的背包demo，到最后我还是有几个问题解决不了，希望路过的大神能教教我。

问题如下:

1、在两个物体交换的时候，有时候会像这样卡着

首先 先看下搭建完成的样子

而这下面是运行的样子：

然后再说说制作过程

1.先搭建好背包的样子，一个背景sprite名为knapack_bg，还有背包的格子也要搭建好。

2.给背包格子加上boxcolider

3.给物品加上boxcolider并做成prefab。

4.给knapack_bg挂上脚本，脚本内容为：

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

 

public class Knapsack :MonoBehaviour {

    public GameObject[] cells;

    public string[] EquipmentNames;

    public GameObject item;

     void Update()

    {

        if (Input.GetKeyDown(KeyCode.X))

        {

            PickUp();

        }

    }

    public void PickUp()

    {

        bool isFind = false;

        int index = Random.Range(0,EquipmentNames.Length);

        string names = EquipmentNames[index];

        for (int i= 0;i<cells.Length;i++)

        {

            if (cells[i].transform.childCount>0) {

               KnapsackItem item =  cells[i].GetComponentInChildren<KnapsackItem>();

                if (item.sprite.spriteName == names)

                {

                    isFind = true;

                    item.AddCount();

                    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);

                    go.GetComponent<UISprite>().spriteName = names;

                    go.transform.localPosition = Vector3.zero;

                    break;

                }

            }

        }

    }

}

 

可以看出来，该脚本的主要内容为往背包格子里面随机添加物品。

需要注意的是，还要设置好相关的东西。

如图：

然后就完成了。

HUDTEXT

Hudtext的简单应用效果：

可以看的出来，就像游戏里面人物掉血的样子。

要实现起来也非常简单，根本不用写什么东西，因为这个插件都弄好了，我们调用一下就可以了。

首先，在场景创建一个空的游戏物体，挂上hudtext的脚本，取名为hudtext以作区别。接下来，创建一个cube，在cube上方一点点，创建一个空的游戏物体，给hudtext挂上一个UI Follow Target，如下图设置好：

然后在cube那里创建一个脚本：

public class HudTest :MonoBehaviour {

    public HUDText text;

// Use this for initialization

 

// Update is called once per frame

void Update () {

        if (Input.GetKeyDown(KeyCode.A))

        {

           

            text.Add(-10,Color.red,1f);

        }

        if (Input.GetKeyDown(KeyCode.Space))

        {

            text.Add(+10, Color.green, 1f);

        }

}

}

指定一下HUDTEXT.

就完成了。

最后，教程到这里就结束了，我也不知道还能有什么东西做，也只能这个ngui融入到自己以后做的东西里面了。