用UGUI简单实现Inventory案例

用UGUI简单实现Inventory案例

---

先贴上效果图

---

具体实现

一：新建一个unity场景，新建画布如下

将canvas改名为Scene，系统会自动生成一个EventSystem
在Scene下面新建一个子UI对象Panel（画布）如图

这样画布就建好了
但是整个UI还需要一个UI摄像机，新建摄像机重命名为UIcamera
挂载在Scene上的EventCamera
注意Scene的RenderMode要设置成World Space
UIcamera的组件如下图

二：构建背景

新建一个空对象重命名为SF Scene Elements，reset一下

然后在SF下新建一个摄像机，一个空对象还有一个粒子系统
关于摄像机，这是一个对于背景的摄像机，和上面的UI摄像机在不同层级上共同完成我们看到的界面，注意对比摄像机上layer的设置，以及相应的Camera mask，main摄像机设置如图：

关于新建的空对象是用来放背景图片的
将空对象重命名为Background，然后添加Sprite Rendera组件，
在Sprite一项选择我们的背景如图

粒子系统是为了营造更好的3D效果，用unity默认的就好，注意例子系统的位置

---

点一下运行，现在的效果如图

可以看到效果比较朦胧，是因为UI画布遮挡着背景
然后有雪花飘着，十分有立体感

---

三：构建人物模型

新建一个摄像机命名为Hero Camera，
将其clear flag设为dont clear；
layer设为0，culing musk 除去UI，如图

然后在camer下面放入我们的预设体，这里放入我在asset商店下载的一个模型A03如图

然后给A03添加一个animation，自己录制一个Idle动画，或者自己导入一个人物模型的动画都可以

---

现在点运行的效果图如下：

现在基本已经构建好场景了

---

四：完善UGUI界面

回到最开始Scene里，现在我们首先要添加物品栏
考虑到物品栏点击会有行为
所以想到用UI Button
现在panel下新建一个新的panel，重命名为Bag（作为物品栏的容器）
然后在Bag里新建一个Grid layout（格子）组件
设置好格子的间隔以及大小如图，详细具体看unity宝典

然后就可以在bag下新建button作为一个个格子
如图新建9个button，然后在button下自带的text填上相应的背包

装备栏也同理，新建一个画布，名为Equipment，
挂上格子组件，新建button子对象，如图

这里就可以在button的Image组件下的sourse Image，添加自己喜欢的贴图，这里的贴图必须是UI精灵

格子做好了，留意到最终效果还有个绿色的button和一个text

新建一个button，重命名为wear，修改text和image的color如图

再新建一个text，如图

这里的text添加了一个shadow组件，给文字上了阴影，看起来更美观

---

现在点运行的效果图如下：

整个project到这里基本已经布好局了，接下来是一些UI行为的实现

---

五：画布随鼠标旋转

新建一个c#脚本TiltWindow

using UnityEngine;public class TiltWindow : MonoBehaviour{    public Vector2 range = new Vector2(5f, 3f);    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);    }}

在panel上挂载该代码即可

六：物品拖拽

这个实现起来，主要思路就是，当鼠标点击button，如果button上有贴图，那么贴图跟着鼠标位置移动，并且，button上的贴图变为默认（空物品状态），如果点击的时候，button处于空物品状态，并且鼠标上有贴图，那么，鼠标上贴图贴在UIbutton上。

对应的UML图如下

新建一个Mouse代码如下，挂在到一个新的空对象maneger上

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 () {    }}

在新建代码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;        }    }}

注意要修改对应的public变量如下图，不同的button是不同的。

再新建脚本MyBag如下，挂载到物品栏每个button上

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

这里同样要修改相应public变量如图，读者自己举一反三

最后新建脚本Mouse_Image, 挂载到新建的UI Image上

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 hair;    public Sprite weapon;    public Sprite foot;    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 = hair;            else if (mouse_type == 2) mouse_image.sprite = weapon;            else if (mouse_type == 3) mouse_image.sprite = foot;        }        transform.position = new Vector3 (Input.mousePosition.x-425, Input.mousePosition.y-165, 0);    }}

这里新建的Image子对象，要注意设置初始的color，透明度为0.

---

再点运行，看下效果：

就差绿色button的生成装备没有实现了

---

七：生成物品

思路大概就是，点击按钮，告诉maneger，我要生成装备，然后maneger告诉装备栏，你们给我生成装备。

所以新建一个代码GenThing 如下 挂载到wear button上

using UnityEngine;using System.Collections;using Game_Manager;using UnityEngine.UI;public class GenThings : MonoBehaviour {    private Game_Scene_Manager gsm;    public void On_Press_GT() {        gsm.GenAll();    }    void Awake() {        gsm = Game_Scene_Manager.GetInstance();    }}

然后在wear的Onclick上选择Wear本身，function选择对应的On_GT

---

到这里，最后点运行，一个简单的demo就大功告成了。

---

再看一下最终的效果图：

---

虽然由于最近的时间问题，还有些小遗憾没解决，

像对象穿上相应的装备，还有装备的随机属性。

希望有兴趣的小伙伴，留下你们宝贵的想法~~~

谢谢大家！