【Unity 3D游戏开发学习笔记】 UI System

模仿这个网页上的UI系统 http://www.tasharen.com/ngui/exampleX.html
目的：实现UI界面，实现人机交互

---

我的简单UI系统：

素材：网上找的图片，人物模型可以从AssetsStore下载
思路：主要利用Canvas和Panel，另外Panel用在背景上能制造朦胧感。否则画面会非常的平面，没有立体感。还有添加了粒子系统，让画面更加炫丽。

当移动鼠标时，装备栏和物品栏透视角度有所变化

当点击装备栏上的物品并拖曳到背包时，会放进背包


到这里，简单的UI系统就完成了

---

实现步骤：

1. 创建canvas并更名为Scene，创建其子对象panel，两个inspector设置如下：
   
   Scene的设置：
   
   Panel的设置：
   

2. 创建一个camera并命名为UI Camera，挂到Scene的EventCamera上，其inspector设置如下：
   
   

3. 创建一个空对象命名为BackgroundScene，并创建一个子空对象命名为background和粒子系统，还有一个camera，对应的inspector设置如下：
   
   Camera的设置：
   
   粒子系统的设置：
   
   Background的设置：
   

4. 然后建立人物模型，创建一个camera命名为hero camera，并在assets上下载一个预设人物并挂上去，hero camera的inspector设置如下
   

5. 在panel下建立manager空对象，命名为equipment和bag的panel，然后再equipment里面创建三个button，在bag里面创建九个button，提前固定两个panel的一些button规格和间隔如下：
   Equipment的设置：
   
   bag的设置：
   

---

代码

shakeWindow
作用：创建一个能够让panel跟着鼠标动的脚本，挂在panel上：

using UnityEngine;

public class shakeWindow : MonoBehaviour
{
    public Vector2 range = new Vector2(4f, 2.5f);

    Transform mTrans;
    Quaternion mStart;
    Vector2 mRot = Vector2.zero;

    void Start ()
    {
        mTrans = transform;
        mStart = mTrans.localRotation;
    }

    void Update ()
    {
        Vector3 pos = Input.mousePosition;

        float halfWidth = Screen.width * 0.5f;
        float halfHeight = Screen.height * 0.5f;
        float x = Mathf.Clamp((pos.x - halfWidth) / halfWidth, -1f, 1f);
        float y = Mathf.Clamp((pos.y - halfHeight) / halfHeight, -1f, 1f);
        mRot = Vector2.Lerp(mRot, new Vector2(x, y), Time.deltaTime * 5f);

        mTrans.localRotation = mStart * Quaternion.Euler(-mRot.y * range.y, mRot.x * range.x, 0f);
    }
}

Mouse.cs
作用：实现拉动物品，挂到panel下的manager上

using UnityEngine;
using System.Collections;
using Game_Manager;

namespace Game_Manager {

    public class Game_Scene_Manager : System.Object {
        private static Game_Scene_Manager _instance;
        private static Mouse_Image _Mouse;
        private int IsHair = 0;
        private int IsWeapon = 0;
        private int IsFoot = 0;

        public static Game_Scene_Manager GetInstance() {
            if (_instance == null) {
                _instance = new Game_Scene_Manager();
            }
            return _instance;
        }

        public void SetMouse(Mouse_Image _mouse) {
            if (_Mouse == null) {
                _Mouse = _mouse;
            }
        }

        public Mouse_Image GetMouse() {
            return _Mouse;
        }

        public void GenAll() {
            IsFoot = 1;
            IsHair = 1;
            IsWeapon = 1;
        }

        public int GetHair() { return IsHair; }
        public int GetWeapon() { return IsWeapon; }
        public int GetFoot() { return IsFoot; }

        public void SetHair(int a) { IsHair = a; }
        public void SetWeapon(int a) { IsWeapon = a; }
        public void SetFoot(int a) { IsFoot = a; }
    }

}

public class Mouse : MonoBehaviour {
    // Use this for initialization
    void Start () {

    }

    // Update is called once per frame
    void Update () {

    }
}

Mouse_Image.cs
作用：编写Mouse_Image，在Manager下面创建空对象Mouse并且挂在上面

using UnityEngine;
using System.Collections;
using Game_Manager;
using UnityEngine.UI;

public class Mouse_Image : MonoBehaviour {

    private Game_Scene_Manager gsm;
    private Image mouse_image;
    private int mouse_type = 0;
    public Sprite none;
    public Sprite weapon1;
    public Sprite weapon2;
    public Sprite weapon3;
    public Color None;
    public Color NotNone;
    public Camera cam;

    void Awake() {
        gsm = Game_Scene_Manager.GetInstance();
        gsm.SetMouse(this);
        mouse_image = GetComponent<Image>();
    }

    public int GetMouseType() {
        return mouse_type;
    }

    public void SetMouseType(int Mouse_type) {
        mouse_type = Mouse_type;
    }

    void Update () {
        if (mouse_type == 0)
        {
            mouse_image.sprite = none;
            mouse_image.color = None;
        }
        else
        {
            mouse_image.color = NotNone;
            if (mouse_type == 1) mouse_image.sprite = weapon1;
            else if (mouse_type == 2) mouse_image.sprite = weapon2;
            else if (mouse_type == 3) mouse_image.sprite = weapon3;
        }
        transform.position = new Vector3 (Input.mousePosition.x-425, Input.mousePosition.y-165, 0);
    }
}

equip.cs
作用：实现装备栏的脚本equip，挂到equip下面的每一个button下

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using Game_Manager;

public class equip : MonoBehaviour {

    private Game_Scene_Manager gsm;
    private Image equip_image;
    public int mouse_type;
    public Sprite weapon;
    public Sprite UISprite;
    public Color weapon_color;
    public Color UISprite_color;

    void Awake()
    {
        gsm = Game_Scene_Manager.GetInstance();
        equip_image = GetComponent<Image>();
    }

    public void On_equip_Button() {
        int MouseType = gsm.GetMouse().GetMouseType();
        if (equip_image.sprite == weapon && (MouseType == 0 || MouseType == mouse_type))
        {
            equip_image.sprite = UISprite;
            equip_image.color = UISprite_color;
            gsm.GetMouse().SetMouseType(mouse_type);
        }
        else
        {
            if (MouseType == mouse_type) {
                equip_image.sprite = weapon;
                equip_image.color = weapon_color;
                gsm.GetMouse().SetMouseType(0);
            }
        }
    }

    // Use this for initialization
    void Start () {

    }

    // Update is called once per frame
    void Update () {
        if (mouse_type == 1 && gsm.GetHair() == 1)
        {
            gsm.SetHair(0);
            equip_image.sprite = weapon;
            equip_image.color = weapon_color;
        } else if (mouse_type == 2 && gsm.GetWeapon() == 1)
        {
            gsm.SetWeapon(0);
            equip_image.sprite = weapon;
            equip_image.color = weapon_color;
        } else if (mouse_type == 3 && gsm.GetFoot() == 1)
        {
            gsm.SetFoot(0);
            equip_image.sprite = weapon;
            equip_image.color = weapon_color;
        }
    }
}

MyBag.cs
作用：对应的Bag下的Button也要编写脚本MyBag：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using Game_Manager;

public class MyBag : MonoBehaviour {
    private Game_Scene_Manager gsm;
    private Image bag_image;
    public int mouse_type = 0;
    public Sprite hair;
    public Sprite weapon;
    public Sprite foot;
    public Sprite UISprite;
    public Color weapon_color;
    public Color UISprite_color;

    void Awake()
    {
        gsm = Game_Scene_Manager.GetInstance();
        bag_image = GetComponent<Image>();
    }

    public void On_equip_Button()
    {
        int MouseType = gsm.GetMouse().GetMouseType();
        if (bag_image.sprite != UISprite && (MouseType == 0 || MouseType == mouse_type))
        {
            bag_image.sprite = UISprite;
            bag_image.color = UISprite_color;
            gsm.GetMouse().SetMouseType(mouse_type);
            mouse_type = 0;
        }
        else
        {
            if (MouseType == 1) bag_image.sprite = hair;
            else if (MouseType == 2) bag_image.sprite = weapon;
            else if (MouseType == 3) bag_image.sprite = foot;
            mouse_type = MouseType;
            bag_image.color = weapon_color;
            gsm.GetMouse().SetMouseType(0);
        }
    }
}