2014年12月11日 星期四

Unity 4.6精彩案例詳解-Fragments of Him

作者:Elwin 原文連結
翻譯:烈妖

Fragments of Him - 他的追憶


這是一個悲傷的故事,開發者使用Unity還原了男友生前的人生片段。在故事中,玩家要點亮每件物品來得到回憶和線索,雖然最終還是需要經歷失去摯愛的現實。


製作分享:
隨著Unity4.6和新UI系統的發表,作者詳細介紹他們如何使用Unity4.6來設計和建造《他的追憶》界面,目前他們正在探索使用Unity5 Beta版,絕大部分(也許不是全部)的UI系統功能和4.6版本內完全一樣。在這篇文章他們將介紹《他的追憶》UI系統中大部分使用的技巧。首先讓我們看一看遊戲界面:


UI的概述:
《他的追憶》UI系統相對簡單些,主要功能是讓玩家改變游戲、音頻和圖型設定。我們先以UI的流程圖來了解組織結構:



UI流程圖


選項開啟時,下面每個按鈕(例如,Gameplay)會打開各自對應的面板。


組織場景:
在Unity4.6編輯器中,你會看到如下的UI樣式:
編輯中的UI畫面


讓我們研究一下所看到的場景:

左側粗線顯示的白色方框(內部有《他的追憶》Logo),是覆蓋在整個遊戲螢幕上的界面。如果我們希望顯示UI,就把UI移到該區域。

像是開始、繼續、載入游戲、選項、退出等基本選項是一開始或暫停游戲後顯示的第一個面板。

位於白色方框外的是選項面板,該面板將在點擊選項按鈕後出現,主選單將滑出,功能選單將會滑入。

點擊一個選項,選項選單(OptionsContainer)會滑入,它包含所有的選項,如游戲、圖形、音頻和控制。相反的當你離開選項選單時,主選單會再次滑回。
Mecanim系統UI概述


場景視圖中的層級結構看起來是這樣的:


場景菜單層次結構


為了給玩家所需要的互動體驗,我們使用4.6的按鈕組件,讓我們能夠指定按鈕在各種狀況下的反應。所有按鈕都有相同的互動設定,如檢視面板所示:

按鈕Inspector視圖


我們使用Mecanim系統來處理按鈕狀態之間的轉換(下圖可以看到結構),這麼做美術團隊能在動畫中獲得更多控制。但畫面是Unity5.0的Mecanim界面,Unity4.6看上去可能會有點不同。左邊的列表是觸發動畫的觸發器,右邊你會看到這些狀態可以在任何情況下觸發。

按鈕Mecanim系統

連接起來
到目前為止都非常簡單和直接。為了讓玩家UX體驗更好,我們想讓這一切無縫關聯起來。實際上我們注意到整個UI無法只靠Mecanim驅動界面。代表我們還是要寫一點程式。


Mechanim
一開始,我們讓美術團隊使用Unity 4.6來製作整個UI界面。我們認為這樣可以有效控制界面外觀和感覺。然而我們沒有意識到Mecanim需要依賴時間表來執行其動畫。所以當我們設定Time.timeScale=0來暫停游戲時,UI也跟著停住了。

註:感謝大家在部落格上幫我解決這個問題,在Animator中有一個稱為“Update Mode”(見下圖)下拉選單。設定為“Unscaled Time”之後就能正常工作了!

Unity動畫組件


程式
當你進入選項介面,程式會接管並控制動畫腳本。這是用iTween來實現的(iTween有一個非常實用的“ignoretimescale”參數)。如果你好奇如何實現的,下面是介面滑入的程式碼:

iTween.ValueTo(gameObject,iTween.Hash( "from", 900,
"to", 0,
"time", 0.2f,
"onupdate","OptionsMoveTo",
"easetype",iTween.EaseType.easeInOutQuad,
"ignoretimescale", true
));

上面的程式處理介面的滑入與滑出,確保正確的反應。此外,我們也接了游戲控制器、滑鼠或鍵盤的控制。每一個裝置也會有一套反饋系統。

一步一步

編輯中的UI畫面

每當玩家按下按鈕,通常是鍵盤上的Esc,如果是手把則是Start,就會彈出選單。我們只用了GameObject.SetActive(True)來觸發選單1和2。如果玩家使用控制器,我們要確保1是選擇中的,所以我們使用EventSystem.SetSelectedGameObject(continuebutton,null)來檢查。並使用Animator.SetTrigger來觸發mecanim動畫。

當你在選單1按下選擇按鈕,我們使用Animator.SetTrigger向左移動選單1,並在同一時間向右移動選單2。在選單2按下選擇鈕,將呼叫一個腳本使選單3移動到視圖中。選單1和選單2的選項是不同的,包含了許多選項。點擊選單2任一按鈕,將會打開對應介面(用GameObject.SetActive(true);)。當玩家從選單中返回時,上述過程全部反轉。

下拉選單
規劃界面設計和功能時,我們想用下拉選單來處理像是設定解析度之類的功能。在設計階段時我們發現,新UI系統沒有我們想要的下拉選單設計。最後我們想出一個解決方法,善用Mecanim遮罩和按鈕來做出我們想要的下拉選單。看起來像這樣:



為了實現這感覺,我們先做了一個列表,包含在下拉選單中所需的全部選項。這些選項用按鈕按照我們想要的位置擺放在列表中。然後我們用Mask元件遮住所有我們不需要用的選項。所以要讓下拉選單滑動,只需改變Mask元件的邊界到需要遮蓋的位置即可。最後為了觸發這個下拉動畫,我們在第一個下拉選項的頂部放置一個按鈕,點擊後讓選單滑出。任意的選擇都會使選單再次滑入,也許並不優雅但可行。

Mecanim和OnClick事件

支援不同的解析度
在設計UI時我們沒有想到解析度的問題。這是Unity4.6真正方便的地方,我們使用Rect Transform組件錨定界面中各個面板和按鈕,結果是使用任何1024*768或更高的解析度,都能保持內容在框架內運作。


展望
雖然我們還沒有完成全部的介面,但除了一些小地方我們應該不會大幅改變。希望開發者對我們如何使用Unity4.6新功能有所了解,我們同樣想知道你會如何發揮。

沒有留言:

張貼留言

關於我自己

我的相片
Unity台灣官方部落格 請上Facebook搜尋Unity Taiwan取得Unity中文的最新資訊