Unity新GUI教程 – 第一部分

原文地址：http://www.raywenderlich.com/78675/unity-new-gui-part-1
泰然翻譯組：夏月星。校對：glory。

不可否認Unity 是一個很棒的遊戲引擎,為了能夠在迎合獨立開發人員需求的同時，也能提供優質的AAA級引擎功能，毫不意外，Unity現在佔據著主流的地位

不幸的是,每一個魔法師都有他的致命弱點，對於Unity來說，它的致命弱點就是舊的GUI系.

老的GUI是一個讓人頭疼的系統，它要求你在OnGUI中寫你所有的GUI代碼，Unity這種以使用者介面為中心的性質是每一個以項目為中心的程式員所抵觸的.

現在有像NGUI這種第三方工具去解決這個問題，但是令人沮喪的是不得不去花費更多地錢區包含這些基本的第三方包.

好了，在Unity技術領域的小夥伴們聽著，經過兩年的開發，他們已經提供了一個能掃除所有痛苦的解決辦法，通過Unity4.6的發布，你現在已經完全可以進入到一個新的GUI系統，在本教程中你將會學到關於這個新系統的所有內容，就是現在.

在這三個部分中，你可以在我們原先的教程怎麼用Unity 2D去做一個像噴氣背包的遊戲 .

注意: 如果你還沒有完成原來的教程，沒關係，但是這並不影響你回頭看。如果你從原先的教程開始看，當你看到本教程的結尾時，你就會擁有一個很棒的功能性遊戲，而不是只有一個簡單的按鈕情境的項目。並且你將會看到如何從舊的GUI系統遷移到新的GUI系統，這個是無價的.

在你進行本教程的同時，你會在遊戲中加入一個經典的菜單介面.

然而，要掌握新的GUI系統，只是添加幾個按鈕是不夠的，這就需要添加一點有趣的東西去滿足使用者使用者對於誘人UI的渴望 給按鈕添加動畫 建立一個可以滑入到情境的設定對話方塊 使用更多地新GUI控制項，像Text ,Slider ,Panel,Mask 等等 如果你想搶佔先鋒，就下載運行這final project去看看你在本教程需要學的 現在開始

在開始的時候你需要一些背景圖片,按鈕，和其他一些UI元素，以及用於標籤和文本上的按鈕的字型，對於這些，你不用自己去畫任何東西或者上網去尋找，因為我已經準備一個包含你一切需要的包.

你可以在這裡去下載這個包RocketMouse_GUI_Assets

這個包包含背景圖片，按鈕，表徵圖，或者其他的遊戲元素，這些都是我親愛的妻子Svetlana做的

你在這裡也會找到兩種字型dafont.com,謝謝Rodrigo Fuenzalida(Titan One font)和Draghia Cornel (DCC Dreamer font)

提一下，你會在以前教程中的項目Rocket Mouse中添加一個新的情境，所以開始之前先下載這個項目的最終版本RocketMouse_Final

以上就是所有你需要的，好吧，除了愛情類歌曲，你是否也在聽Beatles 歌 建立按鈕情境

使用上邊的連結下載並解壓項目Rocket Mouse 項目.選擇File\Open Project…去開啟Unity項目，找到項目的根目錄.

注意: 另外, 在項目中開啟這個檔案Assets\Scenes 並且雙擊這個情境 RocketMouse.unity 開啟Unity.

項目載入後， 你會看到一個你很熟悉的情境或者這個情境對你來說就是新的 —這取決於是是否完成了原來的教程. 不管是什麼情況，冷靜下來，繼續往下看

現在建立一個新的項目，你會在建立新情境中花費很多的時間. 在菜單中選擇 File\New Scene 一個空的新的情境

最好直接去儲存這個情境, 選擇File\Save Scene開啟 Save Scene 對話方塊. 然後, 輸入 MenuScene 作為這個情境的名稱並且把它儲存到 Scenes 檔案, 放在 RocketMouse scene的下邊

瀏覽一下項目確保裡邊有兩個情境.

注意: 如果你在開啟項目，建立或者儲存情境，或添加資源檔中遇到任何問題，瀏覽一下原來的教程Rocket Mouse tutorial. 那有一步一步詳細的教程— 還有在本教程中不包含的GIF格式的圖片, 堅守DRY的原則 匯入圖片和字型

首先在你待辦列表中需要往情境中加資源，所以，解壓資源套件，你會發現有兩個檔案: Menu and Fonts.

選中這兩個檔案, 然後把它們拖入Unity項目的Assets 檔案。

用幾秒鐘去處理這些檔案. 然後你應該會在項目瀏覽器中看到檔案 Fonts and Menu，如下所示

哇哦! 你已經完成了前邊的準備工作，現在你可以在新的GUI系統建立你的第一個UI元素. 添加你第一個UI元素

在情境中建立的第一個元素就是背景圖片.

在菜單中選擇GameObejct/UI/Image .這會在情境中添加一個Image. 你會看到它繼承於Canvas. 所有的元素都必須在Canvas 上，所以如果你還沒有，Unity就會為你提供一個

為了確保你能在情境視圖中看到這個圖片，在hierarchy 中選擇Image ,設定它的X和Y的位置為0.

注意: 我已經能聽到這些疑問,“什麼是X的位置”，“什麼是位置轉換組件，他們有什麼相似之處”
在你進行這個教程的同時，你會找到這些問題的答案. 在不同的對象中學習他們是很容易的，這樣你就會觀察到不同的設定行為.

像寬高或者位置X這種屬性是不需要任何解釋的.
一會時間你就會設定正確的位置和打消了. 現在，有另外一個有趣的事情.在hierarchy中自習看，你會在情境中發現三個新的對象.

1. Image
2. Canvas

3. EventSystem

Image 是一個非互動性的控制器，用來顯示Sprite texture ，並且提供了很多種選項可以去調整.

例如，你可以設定圖片的顏色或者在上邊添加素材.你甚至可以控制顯示圖片的數量. 像時鐘旋轉的動畫也為它帶來了生機.

Canvas 是所有UI元素的超類，像以前展示的，在你添加你的第一個UI元素的時候他會自動建立.它又很多屬性允許你去控制你UI的呈現，你會在這個教程中看到它們的一部分.

EventSystem 負責處理情境中輸入，映射和事件，它需要UI是可啟動並執行，所以這就是它會自動加入進來的原因. 設定菜單背景

現在該回到圖片中了，第一件事就是去把 Image 重新命名為 img_background.

下一步，在項目瀏覽器中開啟 Menu 檔案找到menu_background 圖片. 把它拖到Source Image 地區中.

現在你用一個背景圖片替換掉了原來白色的圖片. 然而，它看起來並不像是一個合適的背景圖盤，因為它太小了，並且寬高比是不正確的
要修複這個問題，在Inspector中找到Set Native Size 按鈕，點擊它把它的size設定成1024 x 577

現在是一張對的背景圖片了.

但是，還是有幾個問題:

1.圖片的真實size是1136 x 640，正好夠全屏覆蓋4英寸的.

2.縮小 你的情境視圖, 你會看到Canvas (白色的 rectangle) 僅僅覆蓋了圖片的一部分，如果你切換到Game 視圖中，你會看到它又僅僅覆蓋了背景圖片的一部分，就好像照相機離圖片太近不能捕捉到它的全部一樣.

注意: 最初這個遊戲是為Iphone 3.5英寸和4英寸設計的這就是為什麼所有的遊戲設計都支援1136 x 640 和 960 x 640. 但是接下來你會看到UI是如何在不同的遊戲中進行適配的.

第一個問題預設匯入設定的問題，在下一章你就會解決它。 用這個你就會解決你的第二個問題Reference Resolution Component. 修改映像匯入設定

在項目中你需要你寫稍大的圖片，為了防止Unity把它們縮小了.

在項目瀏覽器中開啟Menu檔案，選中menu_background 圖片. 在Inspector中, 選擇預設選項卡，這是最大尺寸為2048，點擊應用.

現在在hierarchy 選擇img_background,然後再一次點擊Set Native Size. 寬高應該變成了正確的了，就著了1136和640.

看到了嗎? 的確很容易去解決，解決下一個!

當你有了一個正確的背景圖片時，是時候去調整它顯示的方式了.

首先，那種顯示不是一個bug.你在Game視圖中，設定較小尺寸為550×310，所以它僅僅顯示了圖片的一部分去適配Game視圖.

如果你要把這個遊戲運行在一個裝置上或者僅僅是簡單的展開你的遊戲視圖去適配整個映像，你就會看到整個背景圖片.

儘管Unity的這是對大部分情境是管用的，但是當你需要一些不同的動作時就沒那麼管用了. 就好像你有一個小的顯示器，不適配高解析度的裝置.

另外，很多遊戲只支援一種解析度.

設計師用這個解決方案去決定尺寸,位置和其他資料，所以，當你開發遊戲的時候，你需要確保設計的特殊性避免多餘的計算,這樣使用者就可以看預期中完全正確的介面了.

如果你已經忽略了設計是的決策，顯然你知道那是需要花費一定代價的，使用者的體驗和多樣的解決的方案是很重要的，你必須一直讓你的設計師高興

幸運的是，一個特別的組件來救急了. 這個組件叫做Reference Resolution ，你需要把它加入到Canvas 組件中.

在hierarchy中選擇 Canvas, 然後點擊 Add Component. 輸入 Reference Resolution 尋找要求的組件，在它顯示到列表的時候點擊它.

在添加這個組件的同時，設定他的解析度為1136 x 640.此外，一路滑動到合適的寬高，後者乾脆輸入1

在這個更改在後，你會立即看到全部的背景圖片，及時在小的Game視圖視窗.

改變Game視圖的解析度去看看你的遊戲在不同解析度下的樣子，例如iPhone3.5英寸，完全適配

現在我切換到情境視圖，你會看到在你重新這是情境視圖的尺寸時Canvas 的尺寸沒有變化.

你可以看到，螢幕的邊緣被裁剪了，而中間部分是完全可見的. 這是設定寬高為1(適配高)的結果.

這就是你該怎麼管理你設計師關於背景的決定和使用者潛在的解析度.

但是這些按鈕呢?當它們非常靠近螢幕的左邊或者右邊 灰發生什麼呢。，你當然不想去裁剪或者隱藏它們

幸運的是，Unity有一個特點可以協助你解決這個菜鳥級的錯誤，你馬上就會學到它. 添加標題圖片

添加背景映像可能會有些費，主要是因為你設定了初始介面，做過幾次之後你會發現安裝很快的，眨眼的功夫

開啟情境介面，並且選中菜單GameObject\UI\Image ,這會在視圖的某一個地方加入一個白色的圖片，下邊就是

注意：要把圖片放到最後，只需設定他的X和Y的屬性為0就行了

現在，把這個白色的地區變成一個真正的圖片

1.在hierarchy中選中Image，把它重新命名為img_header

2.在項目瀏覽中開啟Menu檔案，搜尋header_label圖片

3.把這張圖片拖入資源檔中

4.點擊Set Native Size

你可以看到，添加另外一張圖片非常容易。現在你需要處理一下位置，這回帶你進入下一個練習，使用Rect Transform組件 座標轉換，錨點，隨中心旋轉

如果你以前用過Unity，或者只要完成了這個教程some Unity tutorials on this website,對於變換組件你可能會有一些瞭解

如果沒有，也沒關係，在情境中他是一個置放位置，旋轉，縮放對象的簡單工具，它看起來就像下邊

在你的Hierarchy中，當前你選中GameObject任何一種類型是，你就會看到變換組件

但是，如果你選中了UI 元素，例如img_header，你會看到不同的地區變換組件名稱