Notifications
Article
VR UI设计 和 XR Interaction Toolkit 系列教程(三)
Published 7 days ago
135
2
本块内容VR中UI设计的一些注意事项,以及如何使用XR Interaction Toolkit进行UI交互
大家好,Tobi又来和大家见面了,今天这一节主要讲解和UI相关的东西,所有的交互方法都在上一个教程里面讲解过了,那么本节主要介绍VR设计方面和如何用XR Interaction Toolkit在Unity中和VR进行交互。对于VR的UI设计这块主要是参考这个教程的单元6,也希望大家能完整阅读上篇XR Interaction Toolkit的交互操作。
下图这种轮盘式UI设计在传统游戏菜单中会感觉很好,但是在VR游戏中就感觉不那么好了,因为每次只能有一个选项激活,这种交互体验让人感觉很乏味。
VR的UI交互可能更倾向于下图的滚动式UI,如下图:
但是平滑的滚动可能让用户体验会有些不适,所以可以改为下面这种:
注意下面的小点,这种类似于手机app上的滑块,按左右会同时滑动更新6个选项。这种分页的效果事实上会让用户感觉更加舒适。
还有一点就是有时候你的按钮在你UI的最左边,但是点击按钮所产生的变化却是最右侧的UI(比如右侧面板会出现文字什么的),甚至变化的UI在你的当前视野之外,那么用户可能就不知道这个按钮到底是干嘛的。我们在设计的时候一定要考虑这些,可以适当加一些交互的动画,比如你可以在点击按钮后,在按钮上加一个箭头,以提示用户发生改变的内容。
最后在设计UI的时候,不要随意挪动导航按钮的位置,最好让关键的功能按钮位置相对固定一些。不然会让用户产生很多困惑。
要保证用户的舒适感,全部UI最好能一直处于用户的视野里面,可能你会有下列做法:
  1. 缩小UI尺寸,这种做法不怎么好,因为会导致字体过小。
  2. 把UI整体后移,这样其实也不太好,因为它会让你感觉像是在和真实世界中的物体交互,并且有时候世界空间中的3D物体可能会在你和UI之间。
  3. 重新排版UI结构,这是比较推荐的做法。如下面2张图
很多时候UI被会放到一个大的平面内,这样会导致UI两侧离玩家的距离比中间大很多,而导致两侧的UI扭曲了,如下图:
这个时候我们可以做一个圆柱投影的UI效果,让所有UI离玩家的距离是一样的,这样玩家体验起来会更加舒适。如下图:
当然,这种风格并不是适用于每种游戏,要根据你自己的游戏风格来。有时候甚至就是有人不喜欢这样的圆柱投影模式。圆柱投影这种模式其本质并不是希望UI上每个点都和玩家是等距的,而是希望UI整个大体和玩家是等距的,这个对于大不多人来说可能会觉得更加舒适。如下图:
把UI放在离玩家2-5米的范围内,这样会体验更加舒适,并且不会和真实的3D物体有太多交叉。
因为在VR游戏中是有深度的,所以有些人会设计一些有前后排版的UI。如下图:
用户的眼睛的焦点往往只能放在某个深度的UI界面上,上图里面,用户更容易注视到黄色UI上面。但是如果你想用户注意到所有的UI面板怎么办?你可以把所有面板放得更靠近彼此。如下图:
还有一个比较重要的点就是文字。在Unity中,文字信息的面板最好不要用Text组件,因为它会让看起来非常模糊,不易看到上面的内容。使用TextMesh Pro组件是一个不错的解决方式。Unity引擎对于2种组件的处理机制不同,此初就不细说了,你可以放置2个组件在场景里,并且设置他们的字体大小一样,看看效果。总之,TextMesh Pro让你的字体不管大小多少,都会看起来非常舒服。这里有个小提示,有个东西能让你TextMesh Pro在任何距离都看起来很舒服,在VR中甚至更好。打开TextMesh Pro组件的Extra Settings,并且勾选Extra Padding(默认是没有勾的)。
现在来完成一个小的demo:按左手柄上的开始菜单键进入一个小房间,这个小房间里面有设置、返回等功能。再次按菜单按钮则回到原来位置。关于设置这块,我就简单的用一些常见的UI代替,以展示XR Interaction Toolkit的交互能力。
先来看看效果:
在按下暂停按钮后,会有一个黑屏的效果,网上很多人喜欢在相机前面加一个黑色plane,然后控制plane的alpha值,其实这个方法不太好。我这里用到了Volume里面的Vignette。然后通过代码来控制上面Opacity的值,至于如何用代码控制这个值,后面会写一个关于代码控制Volume值的专门教程,里面会讲,这里暂时略过。
再来说说关于按键的问题,XR Interaction Toolkit这个组件目前貌似并没有提供ButtonDown或Up这种只触发一次的操作,目前我只看到了按下和没按这2个状态,所以我在代码中自己写了一个简单的down的事件。不知道以后会不会出来这种事件。
然后再就是传送功能,上个教程讲解了通过拖动组件到预制上来实现传送,这里告诉你如何代码传送。
这个就是传送代码,我这个代码挂在了XRRig上面,所以获取的是XRRig上面的TeleportationProvider组件,这个组件如果自己new出来好像并没有什么效果。pausePosition就是你要瞬移的目的地的Transform。MatchOrientation参数控制你瞬移后目标朝向是否改变的,我这里选择Camera就是为了让相机朝向与目标Transform保持一致。
还有如何创建UI呢?
其实很简单,在Hierarchy下面右键鼠标,选择XR->UICanvas,就会自动创建一个可交互的Canvas,然后此时注意一下你的EventSystem是否改成了XRUIInputModule,有时候你装的一些插件可能会导致这项修改失败。现在,你就可以把它当普通Canvas一样操作了。
但是由于材质问题,UI在HDRP的环境下,在VR头显里面也只有左眼能看见,右眼什么都没有,和教程二里面的手柄射线一样,在URP环境下都是正常的。
在这段时间的XR Interaction Toolkit的探索之后,得出的结论是:功能非常不完善,很多东西需要自己写,对于很多新功能还不兼容,UI材质显示有问题,对于曲面UI感觉也不是很友好,并且部分UI交互也不对,比如Dropdown组件,你能点击下拉出来选项,但是出来的选项无法点击确认。也没有提供像样的模型和相关动画给开发者使用。总之问题还有很多很多。目前就我个人建议而言,如果你开发的功能不需要特别强大的交互(比如像BeatSaber里面,没有特别复杂的交互),或者特别新的技术,也许你可以在你的工程里面集成一下这个组件,但是就目前来说。我还是老老实实用各自官方的SDK开发,但是每2个月,我都会看看这个新功能的进展。这个系列博文也会一直更新下去。希望我的见解能对大家有所帮助。
下篇博文会说说控制Volume的问题,再后面应该会开始一个OculusQuest的教程了。希望各位能继续关注,谢谢~~~
Tobi
Programmer
6
Comments
xunshu
Staff
7 days ago
Wu2020这APP能扫码吗?
可以。“我的” - 右上角扫码
0
W
Wu2020
7 days ago
这APP能扫码吗?
0