Unity3D学习：制作背包换装备UI

最新推荐文章于 2024-07-11 15:40:38 发布

ChaosMeta

最新推荐文章于 2024-07-11 15:40:38 发布

阅读量4.1k

点赞数 4

分类专栏： unity学习文章标签： c# unity学习装备背包 UI

本文链接：https://blog.csdn.net/KingsonYing/article/details/71353375

版权

unity学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

由于之前做的作品UI都不太好看，开始学习了一下UI的制作。这次想做一个类似http://www.tasharen.com/ngui/exampleX.html 里的背包界面，就游戏中点开换装备的UI。

我实现后的UI是这样的：

一个是装备拖拽功能，效果图（由于大小限制，我只能缩小一下动态图了）：

还有就是Random wearing功能（左上角的按钮），按下去后就会在装备栏（左边）生成装备。

好了，接下来是实现。

乍一看是不是挺高大上的感觉挺难实现的，等我先讲一下实现的思路先，装备栏还有背包栏以及左上角的按钮都是button来的。也就是说这些功能都是button触发事件的逻辑实现的。具体的装备嘛，也就是button的背景图而已。雪花是默认的粒子系统，人物是商店免费下载，然后各个模块显示的前后问题，就是摄像机的问题了，用多个不同depth的摄像机就可以了，比如我用了三个，一个给背景图，一个给装备栏背包栏，一个给人物。还有一个看起来比较难的问题，就是拖拽装备怎么实现的，这个确实需要一个比较巧妙的方法，我从一开始就生成一个稍微大一点的UI的image设为透明的，然后由始到终都跟着鼠标移动，只有当鼠标点击到了有装备的栏，这个image的背景图就会变成相应的图片，然后点到一个空的栏，如果能放的话，image就重新变回透明的空白。

理清思路后是不是觉得容易了很多？

好了，接下来是具体实现了。

先总体看一下需要什么先：

就按照这个顺序讲吧

UICamera是用来现实装备栏被包栏等界面的，要拖到Scene的Event Camera处。修改了一下Clear Flags和Culling Mask等参数，这个摄像机的参数如下：

接下来是Scene部分，Scene是一个Canvas，注意要把Render Mode设成World Space，还有挂载上面的摄像机，参数如图：

然后里面的元素有：

Bag是背包栏，euqipment是装备栏，Random是左上角的装备生产按钮。两个Text分别是背包栏和装备栏的title，Mouse_Image就是上面所说的一直跟着鼠标移动的图片了。

Bag，equipment都是Panel，然后在里面生成相应数量的button，背包栏以及装备栏还有它们的button之一参数分别如下：

接着Random是button，Mouse_Image是Image，Mouse_Image参数为：

接下来的SFSceneElements是一个空对象，在里面生成一个摄像机，一个粒子系统以及一个空对象background（用来放背景图的）。

摄像机参数为（culling mask去掉UI）：

背景：

粒子系统就默认就好。

接下来的是显示英雄的摄像机参数：

下载后的人物预设直接拖到摄像机就可以了。

接下来是行为逻辑的实现，首先是画面根据鼠标移动而漂浮的功能。代码如下：

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

我把这个挂到了Bag和Equipment上。

接下来是关于物品拖拽的实现，主要思路就是，当鼠标点击button，如果button上有贴图同时鼠标没图片，那么鼠标的Image变成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上（注意head，hand，foot对应button的mouse_type分别设为1,2,3）

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 OnButton()
    {
        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就挂载到背包栏的每一个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 OnButton()
    {
        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);
        }
    }
}

到了挂载到鼠标上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 - 960, Input.mousePosition.y - 208, 0);
    }
}

最后是挂到Random按钮上的代码：

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

public class GenThings : MonoBehaviour
{

    private Game_Scene_Manager gsm;

    public void OnButton()
    {
        gsm.GenAll();
    }

    void Awake()
    {
        gsm = Game_Scene_Manager.GetInstance();
    }
}

这样就大功告成了，由于时间问题，给人物真实换上装备的画面就不实现了。