UNITY VR應用(三){360°環景UI操作-CardboardGVR}

上一篇已經講到如何切換場景的方法,現在缺少的是UI地標的提示製作,還有操控的機制怎麼設計的呢?現在就來看看吧。
vive

UI設置

前一篇我們暫時用一個球體當作射線準心的碰撞觸發器,現在就用一些圖標來美化。
vr360-20190321002


首先,準備一張類似這樣的指標圖片,設定為Sprite (2D and UI),然後從Assets拖曳到場景上的環景球(或方塊)中,定好位置(命名為GPS ICON)。
vr360-20190321003


圖標的相關設定和程式掛載如下圖。
vr360-20190321004
除了BoxCollider和EventTrigger是上一篇就已經裝上的之外,這邊還要加上一個控制UI進度的腳本(Timer.cs後面會提到),並且讓Trigger使用對應的動作。


如圖,按下Add New Event Type加入一個指標進入(PointEnter)和離開(PointExit)時的反應(關於事件系統可參考UNITY事件系統),把掛載在下方的Timer拉進控制對象欄位,然後在右方下拉選單找到Timer裡的Trigger功能,在進入時打勾啟動,離開時關閉。


由於腳本控制的對象是UI,所以要在剛剛的GPS ICON下建立Canvas和Image,結構如下。
vr360-20190321001

Canvas設定

Canvas的設定關鍵在VR的UI也是3D的,因此要在RenderMode設定成WorldSpace,然後才可以調整RectTransform裡的參數,如圖。
vr360-20190321005


Image設定

Image的RectTransform部分只要和Canvas一樣的寬高即可,在SourceImage放入一張圓型圖片,設定ImageType為Filled就可以用FilledAmount切割圖片產生計時器的效果。
vr360-20190321006
 

程式腳本

Timer.cs前面已經掛載在要觸發的圖標上了,內容部分這裡簡單說明一下,他會找到所屬的子物件Image,接著控制計時的時間進度,持續的指標放在圖標上會一直累加時間直到滿格,然後用TargetID對應的號碼觸發前一篇的ViewSystem.cs的功能去切換環景。
vr360-20190321007
設為1表示觸發後切換到ViewSystem控制的1號空間(可參考前篇)
vr360-20190321008
當然,除了使用中的ROOM以外預設都是關閉狀態。
vr360-20190321009


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Timer : MonoBehaviour
{
    public int targetID;//觸發後要開啟的空間編號
    public ViewSystem viewSystem//裝載切換場景功能
    {
        get { return FindObjectOfType<ViewSystem>(); }
    }
    public Image timerImg//裝載計時用IMAGE
    {
        get { return GetComponentInChildren<Image>(); }
        set { }
    }
    private bool sw;//開關
    void Start()
    {
        timerImg.fillAmount = 0f;//計時圖像歸0
    }
    void Update()
    {
        if (sw)
        {
            timerImg.fillAmount += Time.deltaTime;//計時累進
            if (timerImg.fillAmount == 1f)
            {
                viewSystem.ChangView(targetID);//切換場景
                timerImg.fillAmount = 0f;
                sw = false;
            }
        }
        else
        {
            timerImg.fillAmount = 0f;
        }
    }
    //觸發器
    public void Trigger(bool B)
    {
        sw = B;
    }
}

 
如此一來,我們就在切換動作上多了一層使用介面與觸發保險。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *