13NGUI插件

2017-01-06  本文已影响27人  _谭小坤

NGUI是一款常用插件,方便我们利用一些常见的代码,UI通过继承进行我们想要的开发效果###

一
1.如何让物体可以被拖拽.--------添加NGUI里面的UIDragDropItem脚本.
2.如何监听物品被拖拽的事件.----重写父类的特定方法,进行判断.
3.根据事件,进行逻辑判断.---调用父类的重写方法,对条件进行限定,得到想要的逻辑.
  
效果展示
Drop_Tes代码展示
public class Drop_Test : UIDragDropItem {

    protected override void OnDragDropStart()
    {
        base.OnDragDropStart();
        Debug.Log("开始拖拽了。。。。。。。。。。上");
    }

}
二、制作背景,格子以及物品的Prefab.
1.制作Prefab方式.
2.制作Prefab的细节考虑.
3.制作Prefab的好处.----------可以使游戏对象和资源重复利用,相同的游戏对象可以使用同一个预设体创建
对预设体进行修改后,所有的游戏对象都会相应的改变.

图集的制作 图集方便我们对素材进行管理
三、实现拖拽物品.
1.如何让物品可以被拖拽.
2.如何监听物品被拖拽的过程.
3.交换物品的逻辑.
效果展示
脚本实现代码:每个物体都要加碰撞器,用来检测.
public class DropItem_06 : UIDragDropItem{
    protected override void OnDragDropRelease(GameObject surface)
    {
        base.OnDragDropRelease(surface);
        Debug.Log(surface.name);
        //如果 surface==null,让物品位置回到原位
        if (surface == null || surface.tag == "bg")
        {
            transform.localPosition = Vector3.zero;
        }
        else if (surface.tag == "cell")
        {
            transform.parent = surface.transform;
            transform.localPosition = Vector3.zero;
        }
        //如果下面是物品,就应该交换位置
        else
        {
            Transform temp = surface.transform.parent;
            surface.transform.parent = transform.parent;
            transform.parent = temp;
            surface.transform.localPosition= Vector3.zero;
            transform.transform.localPosition= Vector3.zero;
        }
    }


}
四、背包捡起物品的功能,完成物品的累加和新添.
1.如何将物体添加到背包中.
2.如何将物品进行累加.
3.累加和新添的逻辑.
效果展示
代码展示:
public class Bag : MonoBehaviour {

      public  GameObject[] cells;
    GameObject one;
    int num;
    UILabel lab;
    // Use this for initialization
    void Start () {
        one = Resources.Load<GameObject>("one");
        num = 0;
    }
    
    // Update is called once per frame
    void Update () {
        // NGUITools.AddChild();
        if (Input.GetKeyDown(KeyCode.A))
        {
            for (int i = 0; i < cells.Length; i++)
            {
                if (cells[i].transform.childCount ==1)//为什么是1,有label这个子物体
                {
                    NGUITools.AddChild(cells[i], one);
                    break;
                }
                else {
                    if (cells[i].transform.GetChild(1).name==one.name+"(Clone)")
                    {
                        lab = cells[i].GetComponentInChildren<UILabel>();
                        num++;
                        lab.text = num.ToString();
                        break;
                    }
                }
            }
        }
    }
}

五、血条,进度条,控制扣血.(Slider)
1.NGUI空间介绍之Slider.
2.NGUI制作血条,进度条等.
3.控制血条扣血.
结果展示
脚本展示
public class Blood : MonoBehaviour {
    private UISlider bloodValue;
    // Use this for initialization
    public GameObject UIBlood;
    void Start () {
       // UIBlood = this.gameObject;
        bloodValue = UIBlood.GetComponent<UISlider>();
    }
    
    // Update is called once per frame
    void Update () {
        if (Input.GetKeyDown(KeyCode.A))
        {
            bloodValue.value -= 0.05f;
        }
    }
}

六、创建背景图,并且铺满整个屏幕的功能.
1.创建背景图.
2.背景图铺满整个屏幕的两种方式.通过锚点与通过代码控制.

第一种方式:通过锚点 Paste_Image.png
代码控制管理:
public class backGround : MonoBehaviour {
    UISprite backImg;
    UIRoot root;
    // Use this for initialization
    void Start () {
        backImg = GetComponent<UISprite>();
        root = GameObject.FindGameObjectWithTag("UIroot").GetComponent<UIRoot>();
        adject();
    }
    
    // Update is called once per frame
    void Update () {
    
    }
    void adject()
    {
        float ajHight = (float)root.activeHeight / Screen.height;
        int height = Mathf.CeilToInt(Screen.height * ajHight);
        int width = Mathf.CeilToInt(Screen.width * ajHight);
        backImg.height = height;
        backImg.width = width;



        //为什么不通过直接把值root的高度和宽度值赋给图片的,要通过一个上面
        //的一个比例系数这样做呢!因为只有root.activeHeight这个属性,没有宽度属性。。所以同过比例系数获取
        // backImg.height = root.activeHeight;
        //backImg.width=root.a

    }
}

七、UI背景无缝移动的实现.
1.一些API的使用.
2.无缝移动的关键点.
理论是,只要我们思想符合逻辑,就不会有这种问题,由于图片的压缩,扩大在我们处理的时候.
那个宽度就不会是我们想要的结果。。。。。就会出现有缝隙的问题,所以要人为的处理一下.
效果展示 问题所示
代码管理控制:
public class backGround : MonoBehaviour {
    public UISprite other;
    UISprite backImg;
    UISprite picture;
    UIRoot root;
    // Use this for initialization
    void Start () {
        picture = GetComponent<UISprite>();
        backImg = GetComponent<UISprite>();
        root = GameObject.FindGameObjectWithTag("UIroot").GetComponent<UIRoot>();
        adject();
        //if (other.transform.localPosition.x<this.transform.localPosition.x)
        //{
        //    other.transform.localPosition = new Vector3(-picture.width+15,0,0);
        //}
    }
    
    // Update is called once per frame
    void Update () {
        transform.Translate(Time.deltaTime,0,0);
        if (transform.localPosition.x>=picture.width)
        {
            transform.localPosition = new Vector3(-picture.width+35,0,0);//处理缝隙问题
        }
    }
    void adject()
    {
        float ajHight = (float)root.activeHeight / Screen.height;
        int height = Mathf.CeilToInt(Screen.height * ajHight);
        int width = Mathf.CeilToInt(Screen.width * ajHight);
        backImg.height = height;
        backImg.width = width;



        //为什么不通过直接把值root的高度和宽度值赋给图片的,要通过一个上面
        //的一个比例系数这样做呢!因为只有root.activeHeight这个属性,没有宽度属性。。所以同过比例系数获取
        // backImg.height = root.activeHeight;
        //backImg.width=root.a

    }
}

八、创建商铺店里面的UI显示.
1.常用控件的熟悉.
2.对开发UI的了解.
3.把代码与实际应用相结合.
实现的功能就是我们在商铺点点击按钮之后,跳到相应物品身上去,就行物品个数输入.
物品商店的创建 输入框的制作 实现效果展示 事件的处理
代码管理:
public class BuyBtn : MonoBehaviour {
    public GameObject SureBuyWindow;
    // Use this for initialization
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
    
    }
    public void BuyWindowShow()
    {
        if (SureBuyWindow.activeSelf == false)
        {
            SureBuyWindow.SetActive(true);
        }
        else
        {
            SureBuyWindow.SetActive(false);
        }
        this.gameObject.GetComponent<UIButton>().enabled = false;
    }
}
上一篇 下一篇

猜你喜欢

热点阅读