Unity MRTK-UI 的常见基件的简单介绍以及使用

目录

MRTK-UI 的初步使用

色彩色调的选用

MRTK-UI交互基本模块的使用

BUTTON

SLATE

Slider


MRTK-UI 的初步使用

色彩色调的选用

在实际的设计使用中,考虑对用户的视觉友好性,我们避免使用透明度过高的以及亮度过大的背景,而是选择深色的配色方案能够更好地展示交互信息,此外尽可能使用粗体字体能够保证内容的可读性。下面是同一界面在白色cube场景的三种配色方案,对用户而言可读性差异是很大的,很好的表现了这一问题。

 

 


MRTK-UI交互基本模块的使用

下面简单介绍在此次项目中使用到的MRTK UI基本模块,以及使用流程。

BUTTON

基本信息

在此次项目中我们并没有从零开始创造一个mrtk的button,而是调用预制件,以此为基础进行改造,下面简单介绍使用流程:

Unity中的UI基本是在画布上实现的,我们需要新建一个UI画布并且在检查器中将其转换成MRTK画布。

 

预制件的位置是Assets/MRTK/SDK/Features/UX/Interactable/Prefabs

选择较为符合需求的预制件拖入画布,进行进一步的自定义。

下面通过检查器能够对button进行自定义:

Transform就不多说了,可以调整位置大小偏角这些坐标数据

碰撞盒就是button的识别体积了,可以调整碰撞盒大小位置等信息,通常是需要和button的图标配对的。

onclick事件的触发机制可以设置为图中三种,通常是默认按压。

可以设置交互事件,触发onclick后的如UI界面切换、退出,场景切换等

Config helper是 button设置比较关键的部分了,labels可以改变文字信息

Icon则可以变更图标信息

实际使用

在此次项目中,目前button主要的用于页面的切换关闭以及场景转换,下面进行简单介绍:

以项目中所制作的UI为例,我们想要通过click图中的 setting button来打开setting界面,并且把其他已经打开的界面隐藏。

在on click()中拖入setting界面所属的object,选择GameObject.SetActive 函数,并勾选,这样能够实现激活预先设计好的界面。同时也要拖入当前控制面板所属的object,同样选择GameObject.SetActive 函数,不勾选,这样就可以实现对当前控制界面的关闭了。

上面所述的就是最基本的界面切换逻辑了,实际项目中理清需要实现的各个界面的展示关系就能够达成界面切换了。

其次就是场景切换了,首先在build setting 中设置好需要的场景并且排列好对应的编号(unity自行设置的,可以改变顺序),这个编号是后续进行场景切换的索引。

在检查器中新建立一个空的脚本,建立一个全局的类,并在其下写入几个进行场景转换的函数,此时我们预先设立的场景编号就派上了用场。

转到编号i索引的场景语句是:ScenceManager.LoadScene(i);

退出整个项目的语句即:Application.Quit();

下图是一个包含设置,退出的主界面中用于场景切换的脚本。

写完脚本后,回到检查器,拖入脚本,选择对应的函数,就能实现场景切换或是退出的效果了。


SLATE

Slate制件主要就是用于文字信息的展示。

Slate预制件还自带了求解器能够实现对用户的跟随。

在检查器中可以调整跟随的形式,通常是头部跟随,其他的参数如与用户的距离偏角等也可以自行设定。

 多数检查器中涉及的参数与button类似,此处就不再赘述。


Slider

滑块一般用于设置界面,调整设置参数,通常是包含三个子对象,TouchCollider :包含滑块的整个可选择区域的碰撞体。SliderThumb:包含可移动Thumb 控件。TrackVisuals :包含轨道和任何其他视觉对象。

 通常滑块会搭配一个数据显示的文本,如下图。其数据能够随着用户对滑动条的拖动而变化,直观的反映参数。实现方式是在滑块的检测器事件面板on value updated中,拖入文本object。与button类似的,需要预先写好关联文本和slider的脚本,而后选择脚本中对应的函数即可。

下图是图示效果的脚本函数写法:OnSliderudated 函数可以实现对文本直接赋滑块值。若是实现滑块与其他参数的关联,流程也是一致的,区别在于script的编写,此处就不展开了。

 

  • 4
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值