新闻动态

使用Unity开发VR应用时候,设计界面遇到的问题及相关解决方法

在设计VR应用的用户界面时要考虑很多因素,下面介绍作为一个VR开发者在设计用户界面时可能会遇到的一些问题,以及跟硬件相关的一些东西。

UI分辨率和画质

目前DK2的分辨率是1920*1080(单目是960*1080),而Gear VR是2560*1440(单目是1280*1440),因此对任何在宽度或高度上要占据几个像素的物体,都会出现比较明显的像素化现象。

其实特别要注意的是UI元素,记住它们在屏幕上要显示的大小。一个简单的原则是尽量使用大一点字体或粗体字,另外就是尽量不要使用在VR场景中容易变得像素化的细纹。

UI的类型

Non-diegetic(非剧情型UI)

在传统的非VR项目中,UI通常显示在界面的顶部,用来显示生命值、得分之类的信息,通常被称为HUD。这就是所谓的非剧情型UI-用户界面跟游戏世界没有什么关联度,但是对玩游戏的玩家有一定的作用。

在电影中也有所谓的“画外音”,比如电影或电视中的背景音乐。与此不同的是,剧情音通常跟故事紧密相连-比如角色之间的对话,或是实际发生的自然音效。

在Unity中,添加HUD样式的非剧情型UI相对简单,只需要在UI Canvas的Render Mode中选择使用Screen Space- Overlay或是Screen Space- Camera。

但这种UI界面对VR基本不适用,我们的眼镜无法聚焦在如此近的物体上,而Unity VR中根本就不支持Screen Space-Overlay。

Spatial UI(空间UI)

和前一种UI不同的是,我们需要将UI放置到环境之中,并在Canvas的Render Mode中选择使用World Space模式。通过这种方式,就可以让用户的眼镜聚焦到UI上。这就是所谓的Spatial UI(空间UI)。

将UI元素放在世界的哪个位置也需要认真考虑。太靠近用户会导致眼部疲劳,离得太远会感觉聚焦在地平线上-这种情况可能发生在室外环境,而不是在小屋子里。此外我们还需要对UI的比例进行适当调整,具体要根据产品的实际需求来定。

我们最好把UI放在一个舒适的可读距离,并进行相应的缩放。关于这一点可以参考Main Menu场景中的UI:它被放置在几米远的位置,因此图片和文字都比较大,看起来很舒服。

当我们把UI放在离用户有一定距离的时候,可能会发现UI重叠到其它物体上,看看如何修改shader让其绘制在其它对象上,或者直接使用VR Samples项目中的shader。这个shader也适用于文本。

很多开发者想要把UI关联到摄像机上,这样当玩家移动的时候,UI会保持在一个固定的位置。这样做对十字准星或其它小物体可能会比较合适,不过对于比较大的UI元素,就好比把一张报纸放到你的脸上,很容易让用户感到不舒服,甚至是眩晕。我们可以看一看Shooter 360(Target Arena)场景中的UI,其中UI会在一个较短的延迟后移动到视野中,从而可以让用户四处查看进而熟悉身边的环境,而不是直接把UI固定到他们的视野中,导致视觉模糊。

虽然VR可以让用户探索360度沉浸式环境,不过有时候我们需要提醒用户关注某个特定的方向。在某些场景中,我们使用世界中的箭头来帮助引导用户的注意力。这些箭头会根据用户的朝向来淡入淡出。

这些功能可以在GUIArrows 预设中找到,而且很容易重用。其工作原理是比较用户头部和目标方向之间的角度。如果头部在预设角度之外(参考下面GUIArrows组件的Show Angle),箭头就会淡入。当用户向目标的方向注视时,箭头就会开始淡出。

Diegetic UI(剧情型UI)

Spatial UI的替代方案是让环境中的物体自行向用户展示信息。具体的形式可能是墙上的闹钟,电视、计算机屏幕、移动手机,或是未来枪械的全息展示。这就是所谓的剧情型UI。

下图展示了Flyer场景中的太空飞船,以及Shooter(Target)场景中的枪支。


虽然这种交互不算严格意义上的剧情型UI,但是将用户界面跟游戏对象关联在一起,可以让我们大概了解Unity的剧情型UI是如何工作的。

UI交互

通过使用Interaction in VR一文中所提到的VREyeRaycaster, VRInput和VRInteractiveItem,我们可以创建基本的UI交互元素,具体方法是创建一个订阅VRInteractiveItem事件的类。

特别是Maze场景中的switch。此外,在VRSamples中每个游戏的开始,我们都使用了UI交互指导用户。

VR Samples场景中的UI

接下来让我们看看以上所提到的概念在VR Samples场景中的具体实现:

Menu(菜单)场景


Menu场景中的UI使用了定制的纹理来创造一个弯曲的密封环境。可以使用Interaction in VR一文中的相同方法跟这些纹理进行交互。

Flyer场景

游戏简介和游戏结束的UI使用静态的方式放置在世界空间中。

不过为了呈现跟游戏相关的信息,我们可以使用跟太空飞船关联的世界空间UI,也就是剧情型UI。

考虑到飞船必须时刻出现在用户的视野中,因此在飞船四周显示相关信息是靠谱的。

与此同时,UI元素会旋转以面向摄像机,这样就会避免倾斜,同时确保UI的显示对用户友好。

Maze场景

在Maze 场景中,我们使用Spatial UI来提供游戏引导和结束。

Spatial UI还可以用来提示用户进行交互:

Shooter 180(Target Gallery)场景

在游戏引导和结束部分,我们再次使用了静态的Spatial UI。

正如上面所提到的,我们在枪支上使用剧情型UI来显示倒计时和得分。

Shooter 360(Target Arena)场景

在这个场景中依然使用了Spatial UI,不过做了一些小的调整:当360度竞技场中发生了某个动作,比如当用户四处查看环境时,我们会让UI元素在经过一个短时间的延迟后移动到视野中间。通过这种方式可以让用户知道四处探查所处的环境。

在枪支上我们再次使用了剧情型UI。

VR中的文本抗锯齿

为了在VR世界中实现免费的文本抗锯齿效果,这里有一个小技巧,在Worldspace Canva中使用Canvas Scaler。在相关设置中,我们需要将”Reference Pixels Per Unit”设置为1,然后调整”Dynamic Pixels Per Unit”,直到文本的边缘柔化。在下图中,我们可以看到不同设置的实际显示效果。

(文章转载自公众号:GameRes游资网 ;作者:王寒)