VR-Sample:2.准心的填充

<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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,391评论 25 707
  • 昨天早晨在微信读到一篇文章,甚是合我心意,只是看到一半,就有电话进来,接完电话又有别的事要忙,一来二去,就忘了那篇...
    琴瑟沉香阅读 266评论 1 0
  • 1 正月,天气正是乍暖还寒的时候,桃树枝头有迫不及待便早早含苞待放的桃花,稀稀疏疏几个,有点春天提前到了的感觉。 ...
    祁骆君阅读 392评论 2 4
  • 怎样又快又好地制作幻灯片? 这是一个非常好的问题,这个问题和「怎样有效率地制作幻灯片」有相通的地方。我思考的角度是...
    汤帅同学阅读 650评论 0 6