製作遊戲揹包界面

這次製作了一個切換裝備的UI界面,首先上效果圖
這裏寫圖片描述

有點恐怖,嘿嘿,下面說一下製作思路

遊戲背景

新建一個空對象命名爲SF Scene Elements,裏面包含一個main camera,一個空對象BackGround,一個粒子系統。
在BackGround中添加Sprite Renderer組件,將選好的背景添加。
這裏寫圖片描述
值得注意,我一開始下載的是圖片資源,怎麼都不能掛到Sprite上,後來知道要將圖片的Texture Type改爲Sprite纔行
這裏寫圖片描述
調整粒子系統,做出比較炫酷的樣子,點擊播放可以查看效果
這裏寫圖片描述

引入骷髏兵

自然,首先想到的就是將我們的骷髏兵放在相對於main camera合適的位置。但是通過老師的指引,我發現了一種更好的辦法:用攝像機的疊加渲染效果。
原理很簡單,當一個遊戲場景中包含多個攝像機時,會根據攝像機組件Depth的大小決定渲染順序。那麼我們就可以先用一個攝像機把背景渲染出來,然後再用另外一個攝像機把骷髏兵(不包括天空盒)渲染出來,就可以達到效果。
新建一個攝像機爲Hero Camera,把它放到十分遙遠的地方(反正和其餘遊戲對象都沒有關聯就行),將Clear Flags設爲Depth only,這樣它就不會渲染天空盒。
這裏寫圖片描述
由於這個攝像機是很遙遠的,只會渲染骷髏兵,其他的遊戲對象不會進入它的視角範圍內,所以Culing Mask可以設爲Everything。
然後把骷髏兵作爲這個攝像機的子對象加入,調整位置,再爲骷髏兵添加動畫
這裏寫圖片描述
如圖,骷髏兵是在畫布後面被渲染的,作爲我們的幕後英雄,它的渲染效果是這樣的(它會動的,我不會錄視頻….)
這裏寫圖片描述

這裏說一下我對用不同相機渲染遊戲的理解:這樣可以將遊戲中相應的模塊獨立出來,以後可以拿來繼續使用,有良好的延續性。其次,功能獨立,這樣便於遊戲的設計

關於UI

可以看出遊戲中包含兩個UI界面,一個是裝備欄,一個是揹包欄,首先新建一個畫布Canvas,裏面添加一個子對象Panel,Panel中包含這兩個UI界面,Bag,Equipment應該也同樣爲Panel
這裏寫圖片描述

Bag,Equipment

Bag裏有九個格子,Equipment有三個,可以通過Grid Layout Group組件來實現,由於點擊需要觸發事件,所以我把這些格子都設爲了Button,設置相關參數,比如Equipment的Hand(Grid Layout Group其實已經把位置規定好了,只需要調整文本位置和圖片就行)
這裏寫圖片描述

UI Camera

同樣用到了多攝像頭渲染的原理,與Scene畫布同級創建一個攝像機,設定作用層爲UI
這裏寫圖片描述
這裏寫圖片描述
可以在右下角窗口看到,UI Camera拍到的內容
設置完這一切我們就可以達到一開始圖片的效果了

拓展

你以爲這樣就完了嗎,不不不。既然作爲切換裝備的UI界面,裝備要是不能切換豈不是欺騙人民羣衆。結合相關案例分析,我的思路是:
有一個單例模式下形成的類Mouse記錄當前選取的裝備
一個Equip類掛載到每一個裝備按鈕上定義裝備欄點擊觸發事件
一個MyBag類掛載到每一個揹包按鈕上定義揹包欄點擊觸發事件
一個Equipment類記錄當前鼠標選取的裝備。

Mouse

獲取當前鼠標選取的裝備

using UnityEngine;
using System.Collections;
using Game_Manager;

namespace Game_Manager
{

    public class EquipmentManager : System.Object
    {
        private static EquipmentManager _instance;
        private static Equipment _Equipment;

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

        public void SetEquipment(Equipment _equipment)
        {
            if (_Equipment == null)
            {
                _Equipment = _equipment;
            }
        }

        public Equipment GetEquipment()
        {
            return _Equipment;
        }

    }

}

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

    }

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

    }
}

創建一個空對象Manager掛載

Equipment

我將它掛載到一個Image對象上(簡陋版…),讓它時時跟隨鼠標移動,但是如果沒有選取裝備,則將這個對象顏色設爲透明,如果選取了裝備,則設爲不透明。關於裝備種類有三種,用int類型來區分:

  • 1:盾牌
  • 2:武器
  • 3:戰靴
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using Game_Manager;

public class Equipment : MonoBehaviour {

    private EquipmentManager gsm;
    private Image Equipment_image;
    private int Equipment_type = 0;
    public Color None;
    public Color NotNone;

    void Awake()
    {
        gsm = EquipmentManager.GetInstance();
        gsm.SetEquipment(this);
        Equipment_image = GetComponent<Image>();
    }

    public int GetEquipmentType()
    {
        return Equipment_type;
    }

    public void SetEquipmentType(int equipment_type)
    {
        Equipment_type = equipment_type;
    }

    public Image GetImage()
    {
        return Equipment_image;
    }

    void Update()
    {
        if (Equipment_type == 0) // 什麼都不是
        {
            Equipment_image.color = None; // 透明顏色
        }
        else
        {
            Equipment_image.color = NotNone; // 不透明,可見
        }
        transform.position = new Vector3(Input.mousePosition.x - 425, Input.mousePosition.y - 165, 0);
    }
}

Equip

有一個int類型的種類信息記錄裝備的類型,這樣在給人物添加對應種類裝備錯誤時就不會放上去,這樣可以避免人物把劍當鞋子之類的烏龍。拿走裝備前提是鼠標當前沒有選取裝備,佩戴裝備前提是鼠標選取了與對應裝備欄種類相同的裝備。關於拿走裝備骷髏兵會脫掉相應裝備,佩戴裝備骷髏兵會穿上裝備的實現也很簡單,就是將相關組件disable掉或者重新激活,因此需要一個GameObject對象,掛上對應的對象組件就行

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

public class Equip : MonoBehaviour
{

    private EquipmentManager gsm;
    private Image equip_image;
    public int Equipment_type;
    public Sprite IdelSprite;
    public GameObject equipment;

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

    public void On_equip_Button() // 按鈕被按觸發事件
    {
        int EquipmentType = gsm.GetEquipment().GetEquipmentType();
        if (equip_image.sprite != IdelSprite && EquipmentType == 0) // 裝備欄有武器時,抓取,此時要求沒有選中任何武器所以MouseType要爲0
        {
            gsm.GetEquipment().GetImage().sprite = equip_image.sprite;
            equip_image.sprite = IdelSprite;
            gsm.GetEquipment().SetEquipmentType(Equipment_type);
            if (equipment != null)
                equipment.SetActive(false);
        }
        else
        {
            if (EquipmentType == Equipment_type && equip_image.sprite == IdelSprite) // 放置到裝備欄,此時要求裝備欄中該位置爲空閒,否則原來的武器會消失
            {
                equip_image.sprite = gsm.GetEquipment().GetImage().sprite;
                gsm.GetEquipment().SetEquipmentType(0);
                if (equipment != null)
                    equipment.SetActive(true);
            }
        }
    }

}

比如盾牌裝備欄
這裏寫圖片描述
這裏的Bip01 L就是骷髏兵的盾牌對象。同時記得給On Click登記相應事件

MyBag

由於MyBag會隨時放置不同種類的裝備,所以也會包含一個int類型的Element_Type記錄當前所放的裝備類型,當物品放置到揹包時,Equipment類就會把對應裝備的種類傳給揹包,同理,取出裝備時揹包會將裝備類型傳給Equipment類。

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

public class MyBag : MonoBehaviour
{
    private EquipmentManager gsm;
    private Image bag_image;
    public int Equipment_type = 0;
    public Sprite IdelSprite;

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

    public void On_equip_Button()
    {
        int EquipmentType = gsm.GetEquipment().GetEquipmentType();
        if (bag_image.sprite != IdelSprite && EquipmentType == 0) // 該處有裝備,拿走
        {
            gsm.GetEquipment().GetImage().sprite = bag_image.sprite;
            bag_image.sprite = IdelSprite;
            gsm.GetEquipment().SetEquipmentType(Equipment_type);
            Equipment_type = 0;
        }
        else
        {
            if (bag_image.sprite == IdelSprite)
            {
                bag_image.sprite = gsm.GetEquipment().GetImage().sprite;
                Equipment_type = EquipmentType;
                gsm.GetEquipment().SetEquipmentType(0);
            }
        }
    }
}

所以,揹包中的裝備、裝備種類值只能通過預處理階段或者後期和Equipment類合作修改

TiltWindow

這個類可以使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);
    }
}

效果展示

取走盾牌放入揹包(只能放入空閒揹包,不然不會讓你放入),骷髏兵:“咦,我的盾牌呢”
這裏寫圖片描述
給骷髏兵換上一面新盾牌,骷髏兵:“哦,在這啊”
這裏寫圖片描述

把盾牌和劍都取下來,骷髏兵:“天啊,我撞鬼啦”
這裏寫圖片描述

裝上新的盾牌(放到劍欄就不會有反應,拒絕放入) 骷髏兵:“我像不像美國隊長”
這裏寫圖片描述

鞋嘛,這貨沒穿鞋,我就不演示了,同時UI框也朝向了鼠標移動的位置,反正截圖看不出來(信我啊)

Summary

本次實驗加深了我對攝像機使用的理解(多層渲染)。對於UI的設計其實很簡單,無論美術功底好不好都能創造出不錯的UI界面,很多UI對象的功能我都不是很熟悉,都是後期不斷嘗試最後弄清楚的,對於計算機類實驗,不要害怕嘗試,要大膽探索,unity中有很多有趣的東西,是官方手冊說不完的,還需要我們更深入的探索。本次實驗我參考了較多的案例,有很多自己的理解,歡迎大家提出意見,我好予以改正!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章