版本記錄

前言

Unity是由Unity Technologies開發(fā)的一個讓玩家輕松創(chuàng)建諸如三維視頻游戲、建筑可視化泰涂、實時三維動畫等類型互動內(nèi)容的多平臺的綜合型游戲開發(fā)工具腌巾，是一個全面整合的專業(yè)游戲引擎遂填。Unity類似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的圖型化開發(fā)環(huán)境為首要方式的軟件。其編輯器運行在Windows 和Mac OS X下澈蝙，可發(fā)布游戲至Windows吓坚、Mac、Wii灯荧、iPhone礁击、WebGL（需要HTML5）、Windows phone 8和Android平臺逗载。也可以利用Unity web player插件發(fā)布網(wǎng)頁游戲哆窿，支持Mac和Windows的網(wǎng)頁瀏覽。它的網(wǎng)頁播放器也被Mac 所支持厉斟。網(wǎng)頁游戲 坦克英雄和手機游戲王者榮耀都是基于它的開發(fā)挚躯。
下面我們就一起開啟Unity之旅。感興趣的看下面幾篇文章捏膨。
1. Unity開啟篇（一） —— Unity界面及創(chuàng)建第一個簡單的游戲 （一）
2. Unity開啟篇（二） —— Unity界面及創(chuàng)建第一個簡單的游戲 （二）
3. Unity開啟篇（三） —— 一款簡單射擊游戲示例 （一）
4. Unity開啟篇（四） —— 一款簡單射擊游戲示例 （二）
5. Unity開啟篇（五） —— 一款簡單射擊游戲示例 （三）
6. Unity開啟篇（六） —— Unity動畫簡介 （一）
7. Unity開啟篇（七） —— Unity動畫簡介 （二）
8. Unity開啟篇（八） —— Unity聲音簡介（一）
9. Unity開啟篇（九） —— Unity聲音簡介（二）
10. Unity開啟篇（十） —— Unity粒子系統(tǒng)簡介（一）
11. Unity開啟篇（十一） —— Unity粒子系統(tǒng)簡介（二）
12. Unity開啟篇（十二） —— Unity腳本簡介（一）
13. Unity開啟篇（十三） —— Unity腳本簡介（二）

開始

在接下來幾篇文章中秧均，您將熟悉Unity UI，使您能夠為游戲添加自定義用戶界面号涯。

You will love getting gooey with Unity’s new GUI!

在以前的Unity版本中目胡，舊的UI系統(tǒng)非常可怕链快。 它要求您在OnGUI中編寫所有GUI代碼誉己。 它是以程序員為中心的，違背了Unity本身的視覺中心性質(zhì)域蜗，并沒有提到緩慢而低效巨双。

值得慶幸的是，Unity Technologies的人們都在傾聽霉祸。

在這個由三部分組成的系列中筑累，您將通過向名為Rocket Mouse的小游戲添加交互式UI來探索Unity的新UI系統(tǒng)。

要添加一些材料并滿足用戶對引人入勝的UI的渴望丝蹭，您還將：

• 為按鈕設(shè)置動畫;
• 創(chuàng)建一個滑入場景的設(shè)置對話框;
• 使用更多GUI控件慢宗，如文本，滑塊，面板镜沽，蒙版等;

您將需要一些背景敏晤，按鈕和其他UI元素的圖像，以及標簽和按鈕的一些字體缅茉。不嘴脾，你不必自己畫任何東西或在網(wǎng)上尋找合適的資料，因為我已經(jīng)準備了一個特殊的包裝蔬墩，里面有你需要的一切译打。

注意：請記住，本教程不涉及游戲本身的創(chuàng)建筹我。這里的目標是介紹新的Unity UI系統(tǒng)并使您熟悉其組件扶平。

除了來自dafont.com的兩種字體之外，你還可以在包中找到背景圖片蔬蕊，按鈕结澄，圖標和其他游戲藝術(shù)品。游戲藝術(shù)由Game Art Guppy提供岸夯，您可以在其中找到許多其他游戲藝術(shù)作為您的練習(xí)游戲：www.gameartguppy.com麻献。你可以感謝Rodrigo Fuenzalida的 Titan One字體和Draghia Cornel的DCC Dreamer字體。

Creating MenuScene

通過在Unity的啟動對話框中選擇OPEN并指定項目的根文件夾猜扮，在Unity中打開已下載好的RocketMouse_Starter項目勉吻。

你將花費大部分時間來處理你現(xiàn)在要創(chuàng)建的新場景。 從菜單欄中旅赢，選擇File\New Scene以創(chuàng)建新的空場景齿桃。

最好直接保存場景，因此選擇File \ Save Scenes打開Save Scenes對話框煮盼。 然后短纵，輸入MenuScene作為場景名稱并將其保存到RocketMouse場景旁邊的Scenes文件夾中。

看一下Project窗口僵控，確認一個文件夾中有兩個場景：

Importing Images and Fonts

首先要做的是將資源添加到場景中香到，因此請解壓縮資產(chǎn)包。 在那里你會找到兩個文件夾：Menu 和 Fonts报破。

選擇這兩個文件夾悠就，然后將它們拖到Unity的Project窗口中的Assets文件夾中：

真厲害！ 您已完成設(shè)置充易，并準備使用新的Unity GUI系統(tǒng)創(chuàng)建第一個UI元素梗脾。

Adding your First UI Element

您要做的第一個元素是菜單場景的背景圖像。

從頂部欄中選擇GameObject \ UI \ Image盹靴。 這會將名為Image的對象添加到場景中炸茧。 您應(yīng)該在層次結(jié)構(gòu)中將其視為Canvas的子項帆疟。 所有元素都必須放在Canvas上，所以如果你還沒有宇立，那么Unity會為你創(chuàng)建一個。

要確保您可以在場景視圖中看到圖像自赔，請在層次結(jié)構(gòu)中選擇圖像妈嘹，并將其Pos X和Pos Y都設(shè)置為0。

注意：Rect Transform是與Transform相當?shù)腢I绍妨，用于在Canvas中定位润脸，旋轉(zhuǎn)和縮放UI元素。 在本教程中他去，您將經(jīng)常使用它毙驯。

你馬上就會設(shè)置正確的位置和大小 - 現(xiàn)在，還有另一件有趣的事情需要考慮灾测。 在層次結(jié)構(gòu)中仔細查看爆价，您將看到場景中有三個新對象：

• Image
• Canvas
• EventSystem

Image是一個非交互式控件，顯示Sprite并有許多調(diào)整選項媳搪。

例如铭段，您可以為圖像應(yīng)用顏色，為其指定材質(zhì)秦爆，控制顯示的圖像的大小序愚，甚至使用順時針擦除動畫顯示在屏幕上的圖像。

Canvas是所有UI元素的根對象等限，如前所述爸吮，它是在添加第一個UI元素時自動創(chuàng)建的。它有多個屬性望门，允許您控制UI的呈現(xiàn)方式形娇，您將在本教程中探索其中的一些屬性。

EventSystem處理輸入事件并將其路由到場景中的對象怒允。它還負責(zé)管理光線投射埂软。與Canvas一樣，UI需要工作纫事，因此Unity也會自動添加勘畔。

Setting Up the Menu Background Image

首先要做的是重命名你的圖像。在Hierarchy中丽惶，選擇Image并將其重命名為Img_Background暑中。

接下來，在“項目”窗口中打開Menu文件夾囱桨，找到menu_background圖像偏化。將其拖到Inspector中Img_Background中Image組件的Source Image字段：

現(xiàn)在您有一個背景圖像而不是默認的白色圖像侠驯。 但是，它看起來不是一個好的背景奕巍，因為它太小而且寬高比不正確吟策。

要解決此問題，請在Inspector中找到Set Native Size按鈕的止，然后單擊它以將大小設(shè)置為1136 x 640檩坚。

現(xiàn)在它看起來像一個適當?shù)谋尘啊?/p>

但是，還有一個問題：

• Shrink縮小“場景”視圖诅福，您將看到Canvas（白色矩形）僅覆蓋圖像的一部分匾委。 如果切換到游戲視圖，您將只看到背景圖像的一部分氓润，就好像相機太靠近圖像而不能完全拍攝它赂乐。

注意：原始游戲?qū)榕鋫?.5英寸和4英寸顯示屏的iPhone而設(shè)計。 這就是為什么所有的游戲藝術(shù)支持1136 x 640和960 x 640分辨率咖气。 您很快就會看到UI如何適應(yīng)不同的游戲分辨率挨措。

您將使用Canvas Scaler解決此問題。

Using the Canvas Scaler

您將使用Canvas Scaler調(diào)整背景圖像的顯示方式采章。

但是运嗜，首先，您需要知道顯示不是bug的結(jié)果悯舟。從Unity的角度來看担租，你將游戲視圖 - 或視口 - 設(shè)置為如此小的尺寸，它只顯示適合Game view的圖像的一部分抵怎。

如果您要在具有足夠大分辨率的設(shè)備上運行游戲奋救，或者只是拉伸游戲視圖以適合整個圖像，您將看到整個背景圖像反惕。

雖然Unity的設(shè)置在大多數(shù)情況下都有意義尝艘，但有時您需要不同的行為。例如姿染，當您的小型顯示器不符合目標設(shè)備的分辨率時背亥。

此外，許多游戲僅支持一種分辨率悬赏。設(shè)計人員使用此參考分辨率來指定大小狡汉，位置和其他數(shù)據(jù)。當您基于單個參考分辨率開發(fā)游戲時闽颇，您需要確保輸入設(shè)計者的規(guī)格而無需額外計算盾戴，以便用戶完全按預(yù)期看到所有內(nèi)容。

如果您曾經(jīng)忽略過設(shè)計師的指示兵多，那么您肯定知道要付出代價尖啡。實際上橄仆，用戶的體驗和不同的分辨率更重要，但你必須保持設(shè)計師的滿意衅斩。

幸運的是盆顾，一個特殊的組件可以幫到您。此組件稱為Canvas Scaler畏梆，默認情況下椎扬，您會發(fā)現(xiàn)它附加到每個Canvas。

在Hierarchy中選擇Canvas具温，在Inspector中，您應(yīng)該看到Canvas Scaler組件：

Canvas Scaler有三種縮放模式：

• Constant Pixel Size - 恒定像素大小：使所有用戶界面元素保持相同的像素大小筐赔，無論屏幕大小如何铣猩。 這是Canvas的默認值。
• Scale With Screen Size - 使用屏幕尺寸縮放：用戶界面元素的大小和位置根據(jù)參考分辨率茴丰。 如果當前分辨率大于參考分辨率达皿，則Canvas將保持參考分辨率，同時放大元素以匹配目標分辨率贿肩。
• Constant Physical Size - 恒定物理尺寸：用戶界面元素的位置以物理單位（例如毫米或點）指定峦椰。 這需要正確報告屏幕DPI。

將組件模式更改為Scale With Screen Size并將其Reference Resolution設(shè)置為1136 x 640汰规。此外汤功，將Match Width or Height一直向右滑動，或者只需在輸入字段中輸入1溜哮。

進行這些更改后滔金，即使在小型游戲視圖窗口中，您也會立即看到完整的背景圖像茂嗓。

更改Game view分辨率餐茵，以查看游戲在不同分辨率下的外觀，例如iPhone Wide 480×320述吸。 你會發(fā)現(xiàn)它看起來還不錯忿族！

注意：如果您沒有看到任何iPhone選項，那么您可能正在為不同的平臺構(gòu)建蝌矛。 從菜單欄中道批，選擇FileBuild Settings。 在平臺設(shè)置下的構(gòu)建設(shè)置對話框中朴读，確保選擇iOS屹徘。

Unity將重新處理您的所有資源，因此可能需要一段時間衅金。 最后噪伊，您現(xiàn)在應(yīng)該可以訪問各種iOS屏幕尺寸簿煌。

現(xiàn)在切換到Scene視圖，您將看到在調(diào)整Scene視圖大小時Canvas的大小不會改變鉴吹。

屏幕的側(cè)邊整齊地裁剪姨伟，而中央部分完全可見。這是將Match Width或Height設(shè)置為1（匹配高度）的結(jié)果豆励。它適用于您的目標分辨率夺荒。

但是按鈕怎么樣？當它們太靠近屏幕的左邊緣或右邊緣時會發(fā)生什么良蒸？你肯定不想裁剪或隱藏它們技扼。

幸運的是，Unity有一項功能可以幫助你回避這個新手的錯誤嫩痰。你很快就會了解到它剿吻。

Adding a Header Image

僅添加背景圖像可能看起來有點費時，但這主要是因為您正在設(shè)置初始UI串纺。此外丽旅，經(jīng)過幾次這樣的操作，您會發(fā)現(xiàn)設(shè)置非撤墓祝快速和簡單榄笙，在完成之前您幾乎沒有時間眨眼。

在繼續(xù)使用按鈕和其他UI控件之前祷蝌，您將再添加一個圖像 - 標題圖像茅撞。在本練習(xí)中，您將使用非全屏圖像來演示Unity新UI系統(tǒng)的一些其他重要概念巨朦。

打開Scene視圖乡翅，然后從頂部欄中選擇GameObject \ UI \ Image。這將添加另一個圖像作為Canvas的子項：

注意：如果在Scene view中看不到圖像罪郊，請將其Pos X和Pos Y屬性設(shè)置為0以使其居中蠕蚜。

現(xiàn)在，按照以下步驟將該白色矩形轉(zhuǎn)換為實際圖像：

• 1） 在層次結(jié)構(gòu)中選擇圖像并將其重命名為Img_Header悔橄。
• 2） 在“項目”窗口中打開Menu文件夾靶累，然后搜索header_label圖像。
• 3） 將圖像拖動到檢查器上的Source Image字段癣疟。
• 4） 單擊“檢查器”中的Set Native Size挣柬。

如您所見，添加其他圖像非常容易睛挚。 現(xiàn)在您只需要處理它的定位邪蛔，它將帶您進行下一個練習(xí)：使用Rect Transform組件。

后記

本篇主要講述了Unity UI簡介扎狱，感興趣的給個贊或者關(guān)注~~~