Hololens开发学习(四)——UI界面设计和音频播放

2020-06-29 11:22:47 浏览数 (1)

这一篇主要讲解基于Hololens的UI界面和音频播放的实现。

1、新建一个场景,取名为UI_Audio。从HoloTookit中将一些必备组件拖到面板中,这在大多数开发前都是必须的,如图所示。

2、可以去AssertStore上下载更专业的UI界面,下面我们使用Unity自带的UI工具来简单实现一个显示图像的界面。在面板中新建UI->Canvas,在Canvas上新建UI->Image,在Image上新建UI->RawImage和UI->Button。如图所示。

3、因为UI与Hololens有交互响应,所以需要在EventSystem中添加HololensInputModel。

4、接下来将Canva的Render Mode换成World Space,并将面板中的HololensCamera组建拖拽到EventCamera中。为了方便管理UI,将Scale中X,Y设置为0.0625。为了让字体更真实现实(避免出现字体伪影),我们将CanvaScaler下的Dynamic Pixels Per Unit设置为10。为了让UI初始位置出现在我们视线前方一定距离,我们设置Canvas的PosX为0,PosY为0,PosZ为3。如图所示。

5、下面对Image进行设置:将Width和Height设置为100,Scale中的X和Y设置为0.1,将Color设置为蓝色。

6、将RawImage的Width和Height设置为150,Scale中的X和Y设置为0.5。我们在RawImage上显示图像,图像显示通过给Texture赋值来实现的。我们新建一个C#文本:ShowImageAction,代码如下。

此外在Assets下新建一个Resources目录,并将ima1.jpg图像放入其中。

7、最后对Button进行事件响应。设置Button的Width为160,Height为30,PosY为-40,Scale中的X和Y为0.5。在Button中On Click()中将RawImage拖拽进来,并选择ShowImage()方法。这样当点击Button时就会显示图像,如图所示。

8、有的时候需要播放音频信息。在面板上新建Audio->Audio Source,由于HoloToolkit中提供了AudioSource组件,我们只需要进行相应设置即可。如图所示。

在AudioSource上勾选上Spatialize,不勾选Play On Awake,选择VolumeRolloff为CustomRolloff,拖拽音频文件到AudioClip上即可。

9、我们给控件添加一个事件,当点击时就播放音频。新建AudioPlayAction脚本,代码如下。

并添加到RawImage上,在Button上在添加一个On Click()事件。如图所示。

如何生成项目并部署到Hololens上,我在之前说过,这儿就不多说了。我直接把最后的结果分享给大家。

视频内容

0 人点赞