VR-Sample：2.准心的填充

作者: 雨天到处晃 | 来源:发表于2017-04-20 20:09 被阅读0次

<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();
        }