從零UGUI搭建一個遊戲界面

UGUI是Unity官方推出的新一代交互系統，與前代的NGUI相比，它具有使用靈活、界面美觀、支持個性化定製的特點。本文將在unity內製作一個簡單界面。針對我們遊戲UI只認圖不認字的習慣，我們先上路後考駕照，通過一個實際案例，與大家一起敲開UGUI開發的大門。

準備工作

1

安裝unity

網路有許多unity資源和版本，可以自行安裝。UGUI是在4.61版本後才正式推出的，不建議使用老版本，推薦使用unity5.x以後版本。安裝過程可以自行百度，網上有詳細教程。

安裝好之後創建項目，項目命名以及其他選項隨意勾選，設置項目文件夾。

點擊創建後，打開項目目錄，在assets文件夾下創建UI文件夾。用來存放我們輸出好的界面切圖資源。

2

資源導入

現在要將界面資源導入unity里。這是一個已經製作好的匹配界面。界面尺寸為1334*750。這是PS中的效果圖：

將界面輸出png切圖，並且將切圖資源放置到unity工程目錄下，這時unity會自動生成一份.meta文件。

這個文件可以理解為該圖片的一個身份信息，項目開發中無論移動、重命名、改動資源文件，都還是指向這個資源文件。但是注意不要隨意刪除資源文件相關的meta文件。如果刪除了meta文件，unity會認為原始的資源文件被刪除了，並給此資源重新生成一個新的.meta文件。但是此時項目中資源的引用就會斷開缺失。

在project界面中找到放置切圖的文件夾，全選圖片，

在inspector界面將圖片紋理屬性改為sprite（2D and UI），然後點擊下方apply確認更改。

這時在資源瀏覽器中我們可以看到，導入的切圖文件上多了一個小圖標，這表示圖片文件已經轉化為可以直接在開發中被UGUI調用的sprite文件。

製作界面

首先，需要設置遊戲界面尺寸。點擊game頁簽，在視圖上方點擊free aspect，彈出菜單下方點加號新建一個研發標準解析度，在此案例我們使用1334*750固定解析度。

在大綱視圖中創建一個canvas。canvas可以理解為是PS畫布，所有的UI組件都要放置在畫布範圍內。

在canvas上滑鼠右鍵創建image組件，創建一個放置於canvas子級的image組件。

大綱視圖的父子級別非常直觀，將組件拖拽到另一個組件下方即創建了一個父子級別。移動變換父級組件，子級也會跟著移動變換。另外大綱視圖的層級為最下方的組件在場景中為最上層，子級的顯示層級也是高於父級。如果發現背景組件遮擋了按鈕等，在大綱視圖將背景組件拖拽到按鈕上方即可。

單擊image，在inspector界面點擊source image最右邊的小圓點，在彈出界面點擊背景圖資源。（或直接將project資源視窗圖片直接拖拽到source image通道上 ）然後點擊 Set Native Size，設置為圖片默認大小。

這樣，就在遊戲場景中添加了一個UI界面的背景圖。

重複上述操作，將UI界面框和信息板也添加到遊戲場景中。

在大綱視圖新建button組件，點擊source image最右小圓點，選擇藍色按鈕圖片，然後Set Native Size一下，在場景中就可以看到一個帶文字的按鈕。

點擊大綱視圖展開button子級，會發現有一個text控制項。這個是按鈕文字。選中text控制項，在inspector中將字體顏色大小修改為效果圖大小。

在大綱視圖選中button組件，ctrlC ctrlV複製一份，在sence場景中調整位置，修改文字。

新建一個button組件，將close切圖賦予source image通道，刪除大綱視圖下text組件。調整位置當做關閉按鈕。

這時發現輸出的信息背景高度不夠需要拉伸，但是只有UI才銘心刻骨懂得的一件事是，切圖切忌粗暴拉伸！

so，我們需要為這張圖做九宮拉伸

首先，在資源庫找到並選中需要九宮拉伸的圖

在inspector界面點擊sprite Editor按鈕

在彈出窗口調整上下左右綠線位置，綠線中間位置為拉伸尺寸。調整完成後，點擊上角apply。

然後回到大綱視圖，選中圖片，在inspector菜單image type選項選擇sliced

現在，九宮就設置好了。在場景里拉伸調整寬高位置，以保證與效果圖一致。

現在距離與效果圖一致還差一個標題。

在大綱視圖右鍵創建text組件，

在inspector界面修改調整文字顏色大小。

在製作設計稿時標題文字使用了一個必不可少的投影，使文字看起來立體又美觀

unity中也可以給文字添加投影樣式。選中標題文字，在inspector界面最下點擊add component 在彈出界面搜shadow，點擊第一個，給文字添加一個投影效果。

這時標題文字的inspector下多了一個shadow節點

點擊effectcolor色塊，調整顏色為白色，設置顏色透明度為128。這樣在場景中會生成一個白色的文字半透明投影。

最後適當對比效果圖調整一下場景中UI組件的位置。一個跟效果圖一毛一樣的UGUI界面就誕生啦！

點擊播放按鈕，可以在game頁簽預覽到我們剛製作完成的界面。

小結

本次案例給童鞋一個簡單上手的示範。具體到項目研發中還會有很多問題，比如命名規範、控制項使用、技術實現等等。具體到每個項目每個界面可能流程都不一樣，但是UGUI模塊的主要製作流程大抵如此啦。。

本次案例美術資源可以關注公眾號回復「盆子最帥」 領取...

接下來會針對UGUI模塊進行詳細的梳理講解。寫文不易，如果覺得有幫助還請務必多多關注推薦，跪謝啦！~

最美的不是下雨天，是你關注我的那一刻。 —我說的

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！