VR开发--Cardboard项目二:UI界面制作

千里之行,始于足下,只有掌握UGUI才能更好的运用.

效果图

项目二:制作VR的UI界面(包括血条制作,介绍界面,包裹界面等)

1-UI展示位置

我们的UI界面一般贴在我们的屏幕上.但是VR中,因为有了空间的概念,所以需要将我们UI改成世界坐标,通过代码来控制它.

第一步:做成VR视野

Paste_Image.png

第二步:查看内部头位置

Paste_Image.png

第三步:制作画布搞UI

Paste_Image.png

做完这一步,可以往里面填充UI元素

2-代码控制

Paste_Image.png

代码语言：javascript复制

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
[RequireComponent(typeof(Collider))]
public class VR_Test : MonoBehaviour {

    // 开始位置
    private Vector3 startingPosition;
    public Text textV;
    void Start()
    {
        //获得当前位置
        startingPosition = transform.localPosition;
        //设置为false关闭线
        SetGazedAt(false);
    }
    private void Update()
    {
        textV.text = "当前的帧率是:"   1 / Time.deltaTime;
        // 如果是安卓手机就让屏幕常亮
        if (Application.platform == RuntimePlatform.Android)
        {
            Screen.sleepTimeout = SleepTimeout.NeverSleep;
        }     
    }

    void LateUpdate()
    {
        // 更新SDK状态
        Cardboard.SDK.UpdateState();
        // 如果按下返回按钮
        if (Cardboard.SDK.BackButtonPressed)
        {
            Application.Quit(); // 退出程序
        }
    }

    // 设置物体的颜色根据bool值
    public void SetGazedAt(bool gazedAt)
    {
        GetComponent<Renderer>().material.color = gazedAt ? Color.green : Color.red;
    }

    public void Reset()
    {
        transform.localPosition = startingPosition;
    }
    // 切换VR模式
    public void ToggleVRMode()
    {
        Cardboard.SDK.VRModeEnabled = !Cardboard.SDK.VRModeEnabled;
    }
    // 将方块位置设置为随机位置
    // 这个方法的调用者:Cardboard.SDK.Trigger && isLookedAt调用
    public void TeleportRandomly()
    {
        // 返回一个半径为1的球体在表面上的一个随机点
        Vector3 direction = Random.onUnitSphere;
        // 限制Value在min与max之间,
        direction.y = Mathf.Clamp(direction.y, 0.5f, 1f);
        // 返回一个随机数,在0,0 - 1.0之间
        float distance = 2 * Random.value   1.5f;
        // 位置在半径为1.5`3.5的球面上的随机值
        transform.localPosition = direction * distance;
    }
}

3-最终效果

我们的UI始终在屏幕上,而且不管视野转向哪里,都会保持一致.

UI效果图.gif

image paste png ui vr

1 人点赞