前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VR开发--Cardboard项目二:UI界面制作

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

作者头像
孙寅
发布2020-06-02 17:13:15
1.3K0
发布2020-06-02 17:13:15
举报
文章被收录于专栏:宜达数字宜达数字

千里之行,始于足下,只有掌握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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1-UI展示位置
  • 2-代码控制
  • 3-最终效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档