您当前的位置:首页 VR开发 Unity 正文

如何用Unity3D设计VR中的用户界面

查看: 7452| 评论: 0 2016-9-21 03:54 PM| 发布者: PeckBang

给VR设计用户界面的时候需要考虑很多传统屏幕设计场景中难以发现的问题。接下来我们会了解一下,作为VR开发者的挑战和机遇,然后讨论一下在这个新设备上,开发可用的界面的操作性。


UI分辨率和外观


DK2的分辨率是 1920 X 1080(每只眼睛960 X 1080),Gear VR 是2560 X 1440(每只眼睛1280 X 1440),这会导致任何占用像素少于宽和高的画面产生可察觉的像素化。


需要特别注意UI元素, 需要时刻考虑的是这些元素在显示到VR上时是多大的。有个途径是使用更大或者加粗的字体,并且在设计UI的时候不用细线条,细线条在VR中会像素化。


UI的类型


画外


在非VR项目中,UI经常盖在游戏画面上方,显示例如生命,分数,或者其他我们经常需要查看的内容,也叫HUD(Heads Up Display 游戏中指玩家常用状态栏)。这被认为是“画外”UI,它不在游戏世界中存在,是为了给玩家一些关于游戏的内容存在的。


这个术语也在电影中用到,叫“画外音”,可能是一些电影或者电视节目中的音乐。然而画外音对于你正在观看的内容来说应该是有意义的。


在Unity中,添加HUD(状态栏)样式的“画外”UI通常是通过在UI Canvas 控件上,选择 Render Mode  :Screen Space - Overlay 或者 Screen Spacce-Camera  这两种模式实现的。




这个途径在VR中一般没有用。 我们的眼睛无法聚焦到那么近的物体上, 而且 Screen Space-Overlay 在VR中并不支持。


空间UI



我们通常需要在环境中用World Space Canvas Render Mode 定位我们的UI, 这可以让我们的眼睛聚焦到UI。也叫做空间UI。


在场景中放置UI通常都需要多思考一下。离用户太近会导致眼睛紧张,离得太远会觉得望向了地平线, 远方在户外环境可以用,但是不适合小房间。还可能需要对UI进行相应的缩放,根据需求动态的调整。


如果可能,最好把你的UI放到可以舒适阅读的距离,然后相应的调整比例。比方说主菜单的UI:被放置在几米远的位置,文字和图片很大,阅读起来方便。


如果把UI放置到一个距离,你可能会发现UI切入了其他物体。可以回顾一下 VR中的交互 文章中的准星相关内容,有提到关于创建一个,能够盖在其他物体之上的shader的方法,或者简单的用在VR 示例中的shader。这个shader也能用在文字上来防止它切入其他物体。


很多开发者会在开头把UI附着在摄像机上,这样玩家在环境中移动时UI就会待在在一个固定的距离。这个对于准星或者其他小物件是比较有效的,但是对于更大的UI元素来说,这个经常会有一种效果,就像眼前举着报纸同时又向四周观察, 这个状况会导致不适甚至眩晕。可以看一下Shooter 360(打靶场)这个示例,这里UI会在一个短暂的延迟之后出现在画面里,能让玩家看向四周,适应一下没有UI固定在画面里然而模糊视线的环境。



VR给我们了一个探索沉浸式360度场景的机会,有时你可能需要指出玩家需要查看的特定方向。在某些场景里,我们使用箭头来帮助玩家转到一个方向。这些箭头会根据玩家朝向渐入渐出。

这部分能够在GUIArrows这个预设上找到, 而且比较容易重用。他们通过比较头部角度和目标角度来起作用。如果头部的旋转在预设的角度之外(下面GUIArrows 组件的Show Angle属性),然后箭头就会渐入。当玩家回到了需要的方向, 这些箭头就会淡出画面。





画内UI

一个代替空间UI的方案是环境本身给玩家显示一些信息。这可能是墙上的钟表, 电视,电脑的显示器, 或者是科幻武器上的全息显示。这都算是画内UI。


请看Flayer场景中,飞船身上的UI, 或者Shooter(打靶)场景中的武器:



这可能不像非常严谨的画内UI, 把用户界面附加在物体上让我们有一个比较合理的途径来让画内UI在Unity中起作用。

更多关于UI的内容

在这里GamaSutra可以找到关于UI类型的彻底分析,不过没有谈到VR。


UI交互

通过调用VR交互中提到的VREyeRaycasterVRInput, 和 VRInteractiveItem 组件,我们能够通过创建一个监听了VRInteractiveItem事件的类,来和UI建立基础的交互。


关于这方面的更多信息可以查看VR中的交互,特别是迷宫场景中的开关功能。我们也会在游戏的开始来使用UI交互,可以保证玩家阅读游戏介绍。


更多关于在VR中使用Unity UI的信息,请查看Oculus 博客上的 Unity’s UI System in VR 这篇文章,这里同样提供了一些代码示例。


VR示例场景中的UI

让我们一起看一下上面提到的技术是如何在VR示例场景中用到的。


菜单


场景中的菜单UI使用的自定义的贴图来实现弯曲,封闭的效果。和这些贴图互动用到了VR中的交互” 这篇文章里提到的同样的方法。


Flayer

静态出现在世界坐标系中的简介和游戏结束UI:



然而,我们选择附着在飞船位置上的世界坐标的UI,来表现与游戏相关的信息, 就是画内UI。


由于用户会经常在画面中看到飞船, 在焦点附近显示一个UI来表现重要数据,这个做法很有道理。


这个UI也会旋转来一直面向摄像机, 避免斜角,保证UI对玩家来说总是清晰可见的。


迷宫

在迷宫场景,我们也会用到空间UI来做介绍和结尾部分:


当开关已经激活的时候,空间UI会用来提示玩家来进行互动。


Shooter 180(Target Gallery, 打靶游戏)


静态的空间UI又一次用在对玩家的简介和结束部分:


就像上面提到的,我们在武器上用画内UI来显示剩余时间和当前分数:


Shooter 360 (Target Arena 打靶场)

最后,空间UI在这里用到了, 但是有一点变化:在动作发生时,例如玩家向周围观察, 我们选择在一段延迟之后再移动UI, 水平旋转来跟上玩家。这是为了让玩家意识到,他们是在一个需要向四周看的场景中。


画内UI在这里的枪上又重用了一次:



VR中字体的自由抗锯齿

一个关于如何设置VR字体自由抗锯齿的方法(可能出于性能的考虑):在 世界坐标系的Canvas(画布)上附加一个Canvas Scaler控件。这个UI应该有一个 “Reference Pixels Per Unit”的属性设置为了1, 然后调整 “Dynamic Pixels Per Unit”直到你看到文字的边缘有了轻微的柔化。这里你可以看出 Dynamic Pixels Per Unit 设置为3 和设置为1.75的区别,前者更锐利一些,后者更柔和一些。



你现在可能对不同类型的用户界面,以及哪种在VR中工作良好,有了一定的了解,也知道了如何克服一些你可能会遇到的特定的挑战。使用 VREyeRaycasterVRInput, 和 VRInteractiveItem 这些组件,你也可以创建基础的UI交互。

52VR.COM微信扫一扫
52vr公众号
专注于VR的学习、开发和人才交流

52VR开发交流

相关推荐

已有 0 人参与

发表评论

您需要登录才可以回帖 登录 | 立即注册

手机版|VR开发网 ( 津ICP备18009691号 ) 统计 网安备12019202000257

GMT+8, 2020-10-22 12:01 AM

返回顶部