VR-Sample:3.欢迎界面

<p>
  本篇主要完成欢迎界面的功能制作,熟悉VR的操作过程,包括界面的切换,界面的渐入渐出,跳转到游戏选择界面(主要用到了UIFade,SelectionSlider,ReturnToMainMenu,VRCameraFade,UITint,上几篇讲述的脚本也使用到了,这里不再重复)。
</p>

一、实现功能

  • 各个界面的渐入和渐出切换
  • 不同场景的跳转

二、步骤

新建场景WelCome,放置在Scenes文件夹内。

1.UI的制作

UI的层级关系如下图所示:

层级关系.png

每个UI的整体显示如下:

BeginGUI.png
MiddleGUI.png
FinishGUI.png

整个欢迎界面的UI包括3个部分:BeginGUI,MiddleGUI,FinishGUI,图中以BeginGUI界面为例,画出了Begin界面的各个元素,其他两个UI的元素类似。下面主要说明一下背景制作的步骤:
首先创建一个空的游戏对象Background:

1.png

在模型-菜单文件夹找到menubg模型,并将其拖拽Background下:

2.png

然后选择菜单栏中的“Window--->Lighting”,按照下图设置好后,进行“Build”:

3.png

<pre>Sky Color: E8E8E8;Equator Color: D4D4D4;Groud Color; C1C1C1</pre>


4.png
参数注释:

Sun:当使用了一个处理好的天空盒,你可以在场景中选择一个指定的直射光将模拟去代表这个太阳。如果这个设为NONE,最明亮的(the brightest directional light)灯光我们也会被认为是呈现的太阳。这里设置为none。
Ambient Source:环境光是一直在场景中存在不从任何方向任何物体来的光。这有三个选项可以选择环境关的来源。“Color”的话简单的用一个颜色来(flat color)来处理场景中所有的环境光。“Gradient”让你选择颜色分开去作为环境光,例如天空,水平环境,地面且让其过度自然。“Skybox”天空盒各处颜色将决定了环境光的不同的角度的颜色,这允许比简单的Grandient选项更加精确的效果。
Ambient GI:指定全局光照模式是用实时光照还是烘培光照来处理环境光,这个选项不会有什么效果除非两个模式都在场景中启用。
Reflection Source:允许你指定是skybox还是自定义的一种cubmap来代替。如果选了skybox将会以skybox来作为反射的目标。
Reflection Intensity:反射系数,表明有多少skybox 或cubmap将会影响到反射性质的物体。
Reflection Bounces:反射反弹次数,一次反射的反弹会反射到另外一个物体上。这些反射将会通过Reflection Probes被捕捉到场景中。这个选项让你设置光能多少次经过Probes来回反射。如果设置为1则不反射到Probes上。
Precomputed Realtime GI
Realtime Resolution:这个设置是用来设置多少个像素将会被用作一个单位的长度让物体被实时光照渲染。这个值为1的时候通畅被认为是不错的了(取决于这个物体在场景中的大小),但对于地形和大型物体来说,你通常需要降低这个值。你可以用Lightmap Parameters或Mesh Renderer的Scale In Lightmap 的属性去降低。需要注意的是,如果实时和烘培GI同时被启用的话,这个属性也会间接的设置。详细见下面的描述。
CPU Usage:CPU占用,这个让你能大致的控制CPU在实时渲染中的使用能耗。 Higher CPU会使反馈更加迅速,但有可能会影响到帧率等,这不会影响EDITOR中的CPU的占用。值得注意的是,更高的CPU占用是通过增加GI的计算的线程来实现的,处理器因此可能会降低帧率。
Directional Mode:直接的模式,光照贴图可以用来储存关于主要的入射光在物体表面的信息。在入射光模式,第二张光照贴图将会被生成用来储存入射光信息。这允许DIFFUSE和NORMAL MAPPED的材质在GI下也同时有效。在Directional Specular 模式下,更多的信息被储存老支持反射和法线。
Non-directional模式将这这些都关了。
Directional 模式 会用到大概两倍的储存信息空间,Directional Specular模式大概会用到4倍的储存空间。
Indirect Intensity:间接光源的强度,例如:物体的反射光和发射光的强度,1是默认参数。越高则光强度越强。
Bounce Boost:反射光加强。1为默认值,不增强。
Default Parameters:默认参数,一系列解决方案的参数,你可以选择NEW来自定义这些属性。也可以选择U3D的三种高低方案。

2.Camera的渐入渐出

UI完成后,开始完成Camera的渐入渐出,实现思路为:在Camera前面加上一个图片,挡住Camera的视野,然后控制图片的alpha值来完成。

  • 将VR-Sample-2的Camera做成一个prefab,拖入到这个场景中。
    新建一个Material,添加到Camera中的Reticle中:
新建Material.png
Reticle.png
添加这个材质后,可以在弯曲的界面呈现图片,不然图片显示不完整,可以自行尝试对比~~
  • 在Camera上加上一个Image,调整好Image位置刚好挡住整个Camera的视野范围:
FadeImage.png
  • 将VRCameraFade脚本添加到Camera上,如下图:
VRCameraFade.png
3.界面UI的渐入渐出

界面UI有3个BeginGUI,MiddleGUI,FinishGUI,每个界面UI分别控制自己的渐入和渐出,这里拿BeginGUI设置为例:
  BeginGUI有两个Canvas,一个为文字显示的Canvas,一个为Slider显示的Canvas;控制BeginGUI的渐入渐出只要控制这两个Canvas即可,Canvas Group这里组件中有一个alpha参数可以控制Canvas的透明度,所以这里只要动态的调整这个alpha参数的值就能够实现了。

  • 在BeginGUI上加上UIFade脚本,控制Begin下的Canvas的渐入渐出,设置如下:
UIFade.png
  • 在BeginCanvas和B_SliderCanvas上添加CanvasGroup组件:


    CanvasGroup.png

    <pre>这里注意,在创建Canvas的时候,默认会有一个Graphic Raycaster组件,这个是用来检测Canvas射线的,这里不需要用到可以删除掉</pre>

  • B_SliderCanvas设置
      B_SliderCanvas是一个可交互的Slider,所以需要在其添加UITint,SelectionSlider,VRInteractiveItem这几个脚本,另外还有一个boxCllider用来响应射线的碰撞:
B_SliderCanvas.png

SelectionSlider和UITint脚本配置如下:

SelectionSlider.png
UITint.png

完成后,BeginGUI的渐入渐出就算完成了,其他几个界面的设置类似,这里就不在具体写出。

4.界面UI切换和场景切换

完成好每个界面UI的渐入渐出后,这里创建一个游戏管理对象,用来控制每一个界面UI出现。
  创建一个空的游戏对象System,然后在继续创建一个空的IntroManager游戏对象作为System的子对象,在IntroManager上添加一个Manager脚本用来控制几个UI界面的出现顺序:

public class Manager : MonoBehaviour
    {
        // 摄像机的凝视点
        [SerializeField] private Reticle m_Reticle;   
        // 凝视点上的背景圈,当移动到可交互项时出现
        [SerializeField] private SelectionRadial m_Radial;
        // BeginGUI界面
        [SerializeField] private UIFader m_HowToUseFader;
        // BeginGUI中的SliderUI界面
        [SerializeField] private SelectionSlider m_HowToUseSlider;
        // MiddleGUI界面
        [SerializeField] private UIFader m_HowToUseConfirmFader;
        // MiddleGUI中的SliderUI界面
        [SerializeField] private SelectionSlider m_HowToUseConfirmSlider; 
        // FinishGUI界面
        [SerializeField] private UIFader m_ReturnFader;


        private IEnumerator Start()
        {
            m_Reticle.Show();

            m_Radial.Hide();

            // 停止所有协程,开始BeginGUI界面的渐入;
            yield return StartCoroutine(m_HowToUseFader.InteruptAndFadeIn());
            // 等待BeginGUI界面中的Slider填满
            yield return StartCoroutine(m_HowToUseSlider.WaitForBarToFill());
            // BeginGUI界面中Slider填充满后,停止所有协程,开始BeginGUI渐出;
            yield return StartCoroutine(m_HowToUseFader.InteruptAndFadeOut());

            // 类似BeginGUI的操作,开始MiddleGUI的渐入渐出;
            yield return StartCoroutine(m_HowToUseConfirmFader.InteruptAndFadeIn());
            yield return StartCoroutine(m_HowToUseConfirmSlider.WaitForBarToFill());
            yield return StartCoroutine(m_HowToUseConfirmFader.InteruptAndFadeOut());

            // FinishGUI界面的渐入;
            yield return StartCoroutine(m_ReturnFader.InteruptAndFadeIn());
        }
    }

Inspector中赋值如下图:


IntroManager.png

完成上述步骤后,三个UI界面的切换就完成了,下面做切入到下一个场景的操作:

  • 在Camera上加入脚本ReturnToMainMenu,这里面订阅了VRInput脚本中的Cancel事件,当按下Esc键后,开始Camera的渐出,并进入下一个场景,Inspector中设置如下:
ReturnToMainMenu.png

三.注意事项

1.几个主要脚本的用途(这里只主要写了脚本的大概用途,具体的方法可以查看vr-sample中相对应的脚本):
  • UIFade:用来控制UI界面的渐入和渐出,使用到了大量的协程来完成,一般添加到一个空的游戏对象上,这个空游戏对象下有很多个子Canvas,通过CanvasGroup来控制这些Canvas渐入渐出;
  • SelectionSlider:添加到SliderUI上的,用来控制Slider的填充;
  • ReturnToMainMenu:进入到下一个场景
  • VRCameraFade:控制Camera的渐入渐出,操作方式为,在Camera前加入一个Image挡住Camera的所有视野,然后控制Image的alpha值来完成。
  • UITint:可交互项的操作,里面订阅了交互项的over和out事件;
2.UI渐入渐出控制过程

UI界面的渐入渐出过程使用到了协程,个人觉得这里做的比较精细,写出来总结一下,以BeginGUI为例:

BeginGUI_Fade.png
  • yield return StartCoroutine(m_HowToUseFader.InteruptAndFadeIn())
      首先执行UIFade中的InteruptAndFadeIn()方法:


    InteruptAndFadeIn.png

在FadeIn()方法中,完成了BeginGUI中所有Canvas的渐入过程,重点说明一下方法中的whlie循环:

whlie循环.png
  • yield return StartCoroutine(m_HowToUseSlider.WaitForBarToFill())
      完成渐入过程后,开始SelectionSlider种的WaitForBarToFill()方法,方法中使用到了一个while循环中嵌套了yield return null:
while循环.png

m_BarFilled这个属性只有在Slider填充完毕后(在FillBar ()方法中)才会设置为true,这里就保证了当Slider没有填充满时,会一直保持在这个界面:

  • yield return StartCoroutine(m_HowToUseFader.InteruptAndFadeOut())
      InteruptAndFadeOut过程和InteruptAndFadeIn类似,区别在于FadeOut中的while循环:
FadeOut_while.png

总体步骤为:
UIFade.InteruptAndFadeIn()--->UIFade.FadeIn()--->SelectionSlider.WaitForBarToFill()--->SelectionSlider.BarFill()--->UIFade.InteruptAndFadeOut()--->FadeOut()

3.UI的注意事项

注意几个UI的放置位置信息,如果做的时候放置不正确,可以对照vr-sample中的位置。

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,566评论 25 707
  • This article is a record of my journey to learn Game Deve...
    蔡子聪阅读 3,595评论 0 9
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,612评论 4 59
  • 夜 凭栏望 无星光 二月风仍刺痛冰凉 泪水又划过脸庞 忍住攥紧戒指捂手掌 你怎狠心留我世间独闯 你可知这空房子 不...
    思念如一柔羽毛阅读 168评论 8 4
  • 文|萌 看查理芒格的《穷查理宝典》的时候,富兰克林对富兰克林的两本书特别推荐,一本是《穷查理年鉴》自己的书也是为了...
    萌爱佑佑阅读 116评论 0 2