<p>
本篇主要完善了准心中的显示,当准心移入到可交互物体时会显示一个可填充的圆形背景,可以响应按下和抬起鼠标的动作(这里用到了:SelectionRadial类)。
</p>
一、实现功能
- 当准心碰撞到到可交互物体时,显示填充背景,其他的不显示;
- 当碰撞到可交互物体时,可以响应按下和抬起鼠标事件,按下填充背景图片,抬起时如果未填充完毕则恢复到未填充状态,填充完毕则显示填充完毕状态。
二、步骤
1.准心背景UI设计
背景UI分为两张一样的背景图片,作为Reticle的子对象存在:
一张作为填充使用FillBar,初始为不填充的状态,设置如下图:
另外一张作为背景存在,模式为默认,将图片的透明度调整为透明即可(数值可自定义,这里设置的是100):
完成好设置后,显示如上述图。
2.背景UI的动态填充
对于背景UI的填充功能,主要控制FillBar中的Fill.amount属性:
在需要填充的时候动态的控制Fill.Amount由0--->1的变化即可,这个功能使用了协程来完成,在SelectionRadial中的FillSelectionRadial()实现。
完成好UI背景的设置后,将SelectionRadial脚本添加到Camera上,并关联好相应的字段:
Selection为填充的图片,VRInput为Camera上的VRInput脚本组件。
3.背景UI显示
背景UI的显示功能为:当准心碰撞到可交互的物体时,背景图片显示,可以进行填充动作,准心碰撞到不可交互的物体时,背景图片不会显示。
所以,实现的方法,在可交互物体上进行一个事件的订阅,当准心移入时,显示背景图片,移出时,背景图片显示取消。(填充的动作在第二个步骤已经完成):
首先在InterItem脚本中声明SelectionRadial,用来控制显示和隐藏:
然后在Over方法和Out方法上,添加显示和隐藏的方法:
三.注意事项
1.FillSelectionRadial()方法的解释:
private IEnumerator FillSelectionRadial()
{
// 开始的时候 m_RadialFilled(是否填充完毕) 的bool值为false
m_RadialFilled = false;
// 计时器,以及初始填充的数值
float timer = 0f;
m_Selection.fillAmount = 0f;
// 使while循环来持续填充背景UI,条件是当计时器小于填充的时间
while (timer < m_SelectionDuration)
{
// 每次填充的数值,由于timer是递增的,背景会被一直填充
m_Selection.fillAmount = timer / m_SelectionDuration;
timer += Time.deltaTime;
// 通过yield return null在每一帧都进行填充,直到填充完毕
yield return null;
}
// 当循环结束时,说明timer>m_SelectionDuration,填充完毕了设置值为1
m_Selection.fillAmount = 1f;
// 填充的开关为false,这个在HandleDown和HandleUp方法中用到,说明只能够被填充一次。
m_IsSelectionRadialActive = false;
// 填充完毕时为true
m_RadialFilled = true;
//这里是填充完毕时该进行的事件,后续会用到。
if (OnSelectionComplete != null)
OnSelectionComplete();
}
2.控制协程方法的停止
这里用到的控制协程停止的方法,当开始填充UI的背景时,如果中途鼠标抬起了,应该停止填充的协程方法。这里需要注意的是不能够直接使用StopCoroutine(FillSelectionRadial)来停止当前的协程方法。
正确的操作是,在开启协程方法的时候先使用一个协程变量保存下来:
然后在鼠标抬起的时候,停止该协程:
3.事件的订阅流程
在SelectionRadial类中是直接订阅了VRInput中的UP和DOWN事件:
在InterItem中订阅了移入和移出事件:
流程步骤为:
- 准心移入
- 触发UI背景的Show()方法显示背景(这里是在交互物体上的InterItem进行订阅)
- 当鼠标按下后可以填充或者取消(这里是在SelectionRadial上进行订阅)
- 准心移出
- 触发UI背景的Hide()方法。