跳转至

1.11. 用户交互界面的使用

VRP 3D引擎的交互界面是VRP作品中非常重要的一个元素,一个漂亮且功能多样的界面往往能带给用户非常舒服的视觉享受和很人性化的功能操作。

一、用户交互界面简介

单击“对象>二维物体”,用户可通过菜单提示添加自己需要的二维物体到场景中,可添加物体有:按钮,标签,文本,图片,列表,层级,组合框,复选框。

二、用户交互界面应用实例

以车辆展示界面为例,进行用户交互界面功能的使用示范。

整体思路如下:整个界面要拥有车辆的logo、型号名称、参数配置、可以变换不同视角的按键,可以控制车辆移动停止的按键等。

1.导入“用户界面教材案例”模型。

2.选择场景,右键添加“二维物体>图片”,这个图片作为车辆logo展示。

①选择图片二维模型,在属性栏中更改名称为“loge_Image”,并且在“属性>界面属性>文件”处添加logo贴图。

②调整图片参数。

更改尺寸参数,和原来logo图片比例一致。

更改位置参数,让logo在界面位置更加和谐。

3.选择二维物体父节点,右键添加“二维物体>标签”。

①更改标签名称为“458ITALIA_Label”,并且在“属性>界面属性>背景颜色”处更改背景颜色,更改颜色中黄色框内的参数,让标签变成透明色。

②调节标签参数。

更改尺寸参数,让标签大小更加合适。

更改位置参数,让标签位置更加合适。

更改字体参数,选择合适字体,并且更改字体大小,字体颜色。

4.选择二维物体父节点,右键添加“二维物体>按钮”。

①更改按钮参数。

更改按钮名称为“Parameter_Button”。

更改按钮尺寸为x:200 y:50。

更改位置参数,让按钮位置更加合适。

更改字体大小,让按钮上的文字显示的更加合适。

更改内容,让按钮变成“参数配置”按钮。

②更改按钮“属性>界面属性>变换类型”中选择图片,让按钮变得更加好看。

点击贴图,放上相对应的贴图。

5.同理,再创建新的按钮制作更多按钮界面。

更改按钮名称,按钮尺寸,按钮位置,按钮字体,按钮内容,按钮变换类型,统一起来。

6.选择二维物体父节点,右键添加“二维物体>标签”。

①先更改标签名称为“Parameter_Label”,再将标签尺寸参数、标签位置参数、字体大小、内容更改成合适的参数。

②再在“属性>界面属性>背景颜色”处更改背景颜色,更改颜色中黄色框内的参数,让标签变成半透明色。

7.整个交互界面完成。

8.点击播放键,进入播放页面观看整个交互界面。

三、用户交互界面的使用方法

(一)属性介绍

添加二维物体后,在右侧细节面板可调节相关属性。

类型 说明
类型 展示当前UI类型,不支持修改。
对齐方式 通过更改锚点来计算新的位置坐标。
尺寸 支持修改UI尺寸。
位置 支持修改UI位置。
字体 支持修改UI字体。
标注物体 根据需要选择标注物体。
VR 根据需要选择是否开启VR。
内容 根据需要输入要展示的UI内容。当UI类型为层级时没有该属性。
变换类型 支持颜色和图片两种类型,用于控制按钮在原始状态、选中状态以及按下按钮时的变换类型。当UI类型为按钮时有该属性。
标准 可修改按钮在原始状态时展示的形式。当UI类型为按钮时有该属性。
移入 移入 可修改按钮在被选中时展示的形式。当UI类型为按钮时有该属性。
按下 可修改按钮在被按下时展示的形式。当UI类型为按钮时有该属性。
背景色 支持修改UI图标的颜色。当UI类型为标签、文本、图片时有该属性。

(二)使用示例

下面通过添加隐藏模型的案例来说明按钮的使用方法:

1.先创建一个三维物体,再在“项目栏>大纲”处右键选择“二维物体>按钮”,或单击菜单栏的“对象>二维物体>按钮”。

2.添加后可在右侧细节面板修改相关属性。

3.单击底部快捷栏的“故事”页签,添加UI事件。

4.在故事创作左侧选择“逻辑”分类,选择相应的编辑图块拖入编辑界面。

5.在红色空白逻辑块中填入需要交互的二维UI名称。

6.在故事创作左侧选择“模型”分类,选择相应的编辑图块拖入编辑界面(提前建立三维物体——立方体)。

7.在红色空白逻辑块中填入需要隐藏的三维物体名称。

8.关闭流程编辑器。单击工具栏的播放按钮即可运行查看,点击按钮可隐藏模型。