這次製作了一個切換裝備的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中有很多有趣的東西,是官方手冊說不完的,還需要我們更深入的探索。本次實驗我參考了較多的案例,有很多自己的理解,歡迎大家提出意見,我好予以改正!