<p>
本篇主要完善了准心中的显示，当准心移入到可交互物体时会显示一个可填充的圆形背景，可以响应按下和抬起鼠标的动作（这里用到了：SelectionRadial类）。
</p>
一、实现功能
- 当准心碰撞到到可交互物体时，显示填充背景，其他的不显示；
- 当碰撞到可交互物体时，可以响应按下和抬起鼠标事件，按下填充背景图片，抬起时如果未填充完毕则恢复到未填充状态，填充完毕则显示填充完毕状态。
二、步骤
1.准心背景UI设计
背景UI分为两张一样的背景图片，作为Reticle的子对象存在：
背景图片.png
一张作为填充使用FillBar，初始为不填充的状态，设置如下图：
FillBar.png
另外一张作为背景存在，模式为默认，将图片的透明度调整为透明即可（数值可自定义，这里设置的是100）：
BackGround.png
完成好设置后，显示如上述图。
2.背景UI的动态填充
对于背景UI的填充功能，主要控制FillBar中的Fill.amount属性：
Fill.amount.png
在需要填充的时候动态的控制Fill.Amount由0--->1的变化即可，这个功能使用了协程来完成，在SelectionRadial中的FillSelectionRadial()实现。
完成好UI背景的设置后，将SelectionRadial脚本添加到Camera上，并关联好相应的字段：
SelectionRadial.png
Selection为填充的图片，VRInput为Camera上的VRInput脚本组件。
3.背景UI显示
背景UI的显示功能为：当准心碰撞到可交互的物体时，背景图片显示，可以进行填充动作，准心碰撞到不可交互的物体时，背景图片不会显示。
所以，实现的方法，在可交互物体上进行一个事件的订阅，当准心移入时，显示背景图片，移出时，背景图片显示取消。（填充的动作在第二个步骤已经完成）：
首先在InterItem脚本中声明SelectionRadial，用来控制显示和隐藏：
m_SelectionRadial.png
m_SelectionRadial设置.png
然后在Over方法和Out方法上，添加显示和隐藏的方法：
Over&&Out.png
三.注意事项
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)来停止当前的协程方法。
正确的操作是，在开启协程方法的时候先使用一个协程变量保存下来：
声明一个协程变量.png
保存当前的协程.png
然后在鼠标抬起的时候，停止该协程：
正确使用.png
错误使用.png
3.事件的订阅流程
在SelectionRadial类中是直接订阅了VRInput中的UP和DOWN事件：
UP&&Down.png
在InterItem中订阅了移入和移出事件：
InterItem.png
流程步骤为：
- 准心移入
- 触发UI背景的Show()方法显示背景(这里是在交互物体上的InterItem进行订阅)
- 当鼠标按下后可以填充或者取消（这里是在SelectionRadial上进行订阅）
- 准心移出
- 触发UI背景的Hide()方法。
最后来几张完成图：
没有碰撞到可交互物体.png
碰撞到可交互物体.png
UI背景的填充.png
填充完成.png
网友评论