VR-Sample:3.歡迎界面

<p>
  本篇主要完成歡迎界面的功能制作楞陷,熟悉VR的操作過程,包括界面的切換茉唉,界面的漸入漸出固蛾,跳轉(zhuǎn)到游戲選擇界面(主要用到了UIFade,SelectionSlider度陆,ReturnToMainMenu艾凯,VRCameraFade,UITint,上幾篇講述的腳本也使用到了懂傀,這里不再重復(fù))趾诗。
</p>

一、實現(xiàn)功能

  • 各個界面的漸入和漸出切換
  • 不同場景的跳轉(zhuǎn)

二蹬蚁、步驟

新建場景WelCome恃泪,放置在Scenes文件夾內(nèi)。

1.UI的制作

UI的層級關(guān)系如下圖所示:

層級關(guān)系.png

每個UI的整體顯示如下:

BeginGUI.png
MiddleGUI.png
FinishGUI.png

整個歡迎界面的UI包括3個部分:BeginGUI犀斋,MiddleGUI贝乎,F(xiàn)inishGUI,圖中以BeginGUI界面為例叽粹,畫出了Begin界面的各個元素览效,其他兩個UI的元素類似。下面主要說明一下背景制作的步驟:
首先創(chuàng)建一個空的游戲?qū)ο驜ackground:

1.png

在模型-菜單文件夾找到menubg模型虫几,并將其拖拽Background下:

2.png

然后選擇菜單欄中的“Window--->Lighting”锤灿,按照下圖設(shè)置好后,進行“Build”:

3.png

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


4.png
參數(shù)注釋:

Sun:當使用了一個處理好的天空盒辆脸,你可以在場景中選擇一個指定的直射光將模擬去代表這個太陽但校。如果這個設(shè)為NONE,最明亮的(the brightest directional light)燈光我們也會被認為是呈現(xiàn)的太陽啡氢。這里設(shè)置為none状囱。
Ambient Source:環(huán)境光是一直在場景中存在不從任何方向任何物體來的光州刽。這有三個選項可以選擇環(huán)境關(guān)的來源±思“Color”的話簡單的用一個顏色來(flat color)來處理場景中所有的環(huán)境光穗椅。“Gradient”讓你選擇顏色分開去作為環(huán)境光奶栖,例如天空匹表,水平環(huán)境,地面且讓其過度自然宣鄙∨鄱疲“Skybox”天空盒各處顏色將決定了環(huán)境光的不同的角度的顏色,這允許比簡單的Grandient選項更加精確的效果冻晤。
Ambient GI:指定全局光照模式是用實時光照還是烘培光照來處理環(huán)境光苇羡,這個選項不會有什么效果除非兩個模式都在場景中啟用。
Reflection Source:允許你指定是skybox還是自定義的一種cubmap來代替鼻弧。如果選了skybox將會以skybox來作為反射的目標设江。
Reflection Intensity:反射系數(shù),表明有多少skybox 或cubmap將會影響到反射性質(zhì)的物體攘轩。
Reflection Bounces:反射反彈次數(shù)叉存,一次反射的反彈會反射到另外一個物體上。這些反射將會通過Reflection Probes被捕捉到場景中度帮。這個選項讓你設(shè)置光能多少次經(jīng)過Probes來回反射歼捏。如果設(shè)置為1則不反射到Probes上。
Precomputed Realtime GI
Realtime Resolution:這個設(shè)置是用來設(shè)置多少個像素將會被用作一個單位的長度讓物體被實時光照渲染笨篷。這個值為1的時候通暢被認為是不錯的了(取決于這個物體在場景中的大型唷),但對于地形和大型物體來說率翅,你通常需要降低這個值练俐。你可以用Lightmap Parameters或Mesh Renderer的Scale In Lightmap 的屬性去降低。需要注意的是安聘,如果實時和烘培GI同時被啟用的話痰洒,這個屬性也會間接的設(shè)置瓢棒。詳細見下面的描述浴韭。
CPU Usage:CPU占用,這個讓你能大致的控制CPU在實時渲染中的使用能耗脯宿。 Higher CPU會使反饋更加迅速念颈,但有可能會影響到幀率等,這不會影響EDITOR中的CPU的占用连霉。值得注意的是榴芳,更高的CPU占用是通過增加GI的計算的線程來實現(xiàn)的嗡靡,處理器因此可能會降低幀率。
Directional Mode:直接的模式窟感,光照貼圖可以用來儲存關(guān)于主要的入射光在物體表面的信息讨彼。在入射光模式,第二張光照貼圖將會被生成用來儲存入射光信息柿祈。這允許DIFFUSE和NORMAL MAPPED的材質(zhì)在GI下也同時有效哈误。在Directional Specular 模式下,更多的信息被儲存老支持反射和法線躏嚎。
Non-directional模式將這這些都關(guān)了蜜自。
Directional 模式 會用到大概兩倍的儲存信息空間,Directional Specular模式大概會用到4倍的儲存空間卢佣。
Indirect Intensity:間接光源的強度重荠,例如:物體的反射光和發(fā)射光的強度,1是默認參數(shù)虚茶。越高則光強度越強戈鲁。
Bounce Boost:反射光加強。1為默認值嘹叫,不增強荞彼。
Default Parameters:默認參數(shù),一系列解決方案的參數(shù)待笑,你可以選擇NEW來自定義這些屬性鸣皂。也可以選擇U3D的三種高低方案。

2.Camera的漸入漸出

UI完成后暮蹂,開始完成Camera的漸入漸出寞缝,實現(xiàn)思路為:在Camera前面加上一個圖片,擋住Camera的視野仰泻,然后控制圖片的alpha值來完成荆陆。

  • 將VR-Sample-2的Camera做成一個prefab,拖入到這個場景中集侯。
    新建一個Material被啼,添加到Camera中的Reticle中:
新建Material.png
Reticle.png
添加這個材質(zhì)后,可以在彎曲的界面呈現(xiàn)圖片棠枉,不然圖片顯示不完整浓体,可以自行嘗試對比~~
  • 在Camera上加上一個Image,調(diào)整好Image位置剛好擋住整個Camera的視野范圍:
FadeImage.png
  • 將VRCameraFade腳本添加到Camera上辈讶,如下圖:
VRCameraFade.png
3.界面UI的漸入漸出

界面UI有3個BeginGUI命浴,MiddleGUI,F(xiàn)inishGUI,每個界面UI分別控制自己的漸入和漸出生闲,這里拿BeginGUI設(shè)置為例:
  BeginGUI有兩個Canvas媳溺,一個為文字顯示的Canvas,一個為Slider顯示的Canvas碍讯;控制BeginGUI的漸入漸出只要控制這兩個Canvas即可悬蔽,Canvas Group這里組件中有一個alpha參數(shù)可以控制Canvas的透明度,所以這里只要動態(tài)的調(diào)整這個alpha參數(shù)的值就能夠?qū)崿F(xiàn)了捉兴。

  • 在BeginGUI上加上UIFade腳本屯阀,控制Begin下的Canvas的漸入漸出,設(shè)置如下:
UIFade.png
  • 在BeginCanvas和B_SliderCanvas上添加CanvasGroup組件:


    CanvasGroup.png

    <pre>這里注意轴术,在創(chuàng)建Canvas的時候难衰,默認會有一個Graphic Raycaster組件,這個是用來檢測Canvas射線的逗栽,這里不需要用到可以刪除掉</pre>

  • B_SliderCanvas設(shè)置
      B_SliderCanvas是一個可交互的Slider盖袭,所以需要在其添加UITint,SelectionSlider彼宠,VRInteractiveItem這幾個腳本鳄虱,另外還有一個boxCllider用來響應(yīng)射線的碰撞:
B_SliderCanvas.png

SelectionSlider和UITint腳本配置如下:

SelectionSlider.png
UITint.png

完成后,BeginGUI的漸入漸出就算完成了凭峡,其他幾個界面的設(shè)置類似拙已,這里就不在具體寫出。

4.界面UI切換和場景切換

完成好每個界面UI的漸入漸出后摧冀,這里創(chuàng)建一個游戲管理對象倍踪,用來控制每一個界面UI出現(xiàn)。
  創(chuàng)建一個空的游戲?qū)ο骃ystem索昂,然后在繼續(xù)創(chuàng)建一個空的IntroManager游戲?qū)ο笞鳛镾ystem的子對象建车,在IntroManager上添加一個Manager腳本用來控制幾個UI界面的出現(xiàn)順序:

public class Manager : MonoBehaviour
    {
        // 攝像機的凝視點
        [SerializeField] private Reticle m_Reticle;   
        // 凝視點上的背景圈趟佃,當移動到可交互項時出現(xiàn)
        [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();

            // 停止所有協(xié)程瞒大,開始BeginGUI界面的漸入;
            yield return StartCoroutine(m_HowToUseFader.InteruptAndFadeIn());
            // 等待BeginGUI界面中的Slider填滿
            yield return StartCoroutine(m_HowToUseSlider.WaitForBarToFill());
            // BeginGUI界面中Slider填充滿后姨谷,停止所有協(xié)程康谆,開始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中設(shè)置如下:
ReturnToMainMenu.png

三.注意事項

1.幾個主要腳本的用途(這里只主要寫了腳本的大概用途韵丑,具體的方法可以查看vr-sample中相對應(yīng)的腳本):
  • UIFade:用來控制UI界面的漸入和漸出爵卒,使用到了大量的協(xié)程來完成,一般添加到一個空的游戲?qū)ο笊夏斐梗@個空游戲?qū)ο笙掠泻芏鄠€子Canvas钓株,通過CanvasGroup來控制這些Canvas漸入漸出;
  • SelectionSlider:添加到SliderUI上的陌僵,用來控制Slider的填充轴合;
  • ReturnToMainMenu:進入到下一個場景
  • VRCameraFade:控制Camera的漸入漸出,操作方式為碗短,在Camera前加入一個Image擋住Camera的所有視野受葛,然后控制Image的alpha值來完成。
  • UITint:可交互項的操作偎谁,里面訂閱了交互項的over和out事件总滩;
2.UI漸入漸出控制過程

UI界面的漸入漸出過程使用到了協(xié)程,個人覺得這里做的比較精細巡雨,寫出來總結(jié)一下闰渔,以BeginGUI為例:

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


    InteruptAndFadeIn.png

在FadeIn()方法中,完成了BeginGUI中所有Canvas的漸入過程铐望,重點說明一下方法中的whlie循環(huán):

whlie循環(huán).png
  • yield return StartCoroutine(m_HowToUseSlider.WaitForBarToFill())
      完成漸入過程后冈涧,開始SelectionSlider種的WaitForBarToFill()方法,方法中使用到了一個while循環(huán)中嵌套了yield return null:
while循環(huán).png

m_BarFilled這個屬性只有在Slider填充完畢后(在FillBar ()方法中)才會設(shè)置為true正蛙,這里就保證了當Slider沒有填充滿時炕舵,會一直保持在這個界面:

  • yield return StartCoroutine(m_HowToUseFader.InteruptAndFadeOut())
      InteruptAndFadeOut過程和InteruptAndFadeIn類似,區(qū)別在于FadeOut中的while循環(huán):
FadeOut_while.png

總體步驟為:
UIFade.InteruptAndFadeIn()--->UIFade.FadeIn()--->SelectionSlider.WaitForBarToFill()--->SelectionSlider.BarFill()--->UIFade.InteruptAndFadeOut()--->FadeOut()

3.UI的注意事項

注意幾個UI的放置位置信息跟畅,如果做的時候放置不正確咽筋,可以對照vr-sample中的位置。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末徊件,一起剝皮案震驚了整個濱河市奸攻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌虱痕,老刑警劉巖睹耐,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異部翘,居然都是意外死亡硝训,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來窖梁,“玉大人赘风,你說我怎么就攤上這事∽萘酰” “怎么了邀窃?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長假哎。 經(jīng)常有香客問我瞬捕,道長,這世上最難降的妖魔是什么舵抹? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任肪虎,我火速辦了婚禮,結(jié)果婚禮上惧蛹,老公的妹妹穿的比我還像新娘笋轨。我一直安慰自己,他們只是感情好赊淑,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布爵政。 她就那樣靜靜地躺著,像睡著了一般陶缺。 火紅的嫁衣襯著肌膚如雪钾挟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天饱岸,我揣著相機與錄音掺出,去河邊找鬼。 笑死苫费,一個胖子當著我的面吹牛汤锨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播百框,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼闲礼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了铐维?” 一聲冷哼從身側(cè)響起柬泽,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嫁蛇,沒想到半個月后锨并,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡睬棚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年第煮,在試婚紗的時候發(fā)現(xiàn)自己被綠了解幼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡包警,死狀恐怖撵摆,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情揽趾,我是刑警寧澤台汇,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布苛骨,位于F島的核電站篱瞎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏痒芝。R本人自食惡果不足惜俐筋,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望严衬。 院中可真熱鬧澄者,春花似錦、人聲如沸请琳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽俄精。三九已至询筏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間竖慧,已是汗流浹背嫌套。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留圾旨,地道東北人踱讨。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像砍的,于是被迫代替她去往敵國和親痹筛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容