Unity3D遊戲UI開發經驗談

原地址：http://news.9ria.com/2013/0629/27679.html

在Unity專場上，108km創始人梁偉國發表了《Unity3D遊戲UI開發經驗談》主題演講。他以公司團隊爲案例，從流程方面介紹了從UI製做、設計到編程，並展現了UI佈局和美術製做框圖。他強調作技術產品必定要考慮開發和研發的區別。

 

 108km創始人 梁偉國

如下是文字實錄：

 

各位廣州的朋友你們好！我是梁偉國，今天由我給你們講講Unity3D遊戲UI開發。我以前是作Web的，是程序員出身，作過遊戲設計師，如今是一家創業公司的創始人。從2006年到2009年，我在IBM公司工做。09年後本身作過一段時間的自由職業者，到最後才作Unity3D。從2006年後就跟朋友作了一個工做室，我最長的工做時候是在IBM，在IBM裏技術方面不必定提升不少。但在同事聚會時，在裏面學到最大的收穫是流程和標準化的管理，500強公司的流程很嚴謹。以後我本身出來開公司，發現本身的工做室流程很混亂，因此今天不少是從流程方面跟你們探討UI的經驗。

 

首先跟你們簡單介紹一下UI展現終端。最直觀的是屏幕不同，拿iPhone四、iPhone4s、iPhone5就表明了三個不一樣的屏幕，iPad1和iPad2也是兩種不一樣的屏幕。跨平臺第一直觀就是多分辨率。

 

 

 

今天跟你們分享的是從UI製做、設計到編程。從設計角度開始，首先咱們會考慮應該怎麼作，怎樣使成本下降。

 

UI設計三大原則

 

第一個設計的原則是居中佈局，在2002 年、2003年像網易、新浪的網站是全屏鋪滿，從2005年開始就是居中，爲什麼會有這種變化呢？是由於寬屏普及率很高，因此就會變成居中。在屏幕變幻無窮的狀況下，咱們考慮居中佈局。 

 

 

它大部分的功能都是經過居中的對話框來實現。由於要考慮到多分辨率，就得考慮UI的背景。若是用居中，UI的背景能夠選擇是否使用3D背景。你們若是玩過這個遊戲，他們居中就是這個區域。

 

第二個原則九宮格浮動佈局，這種狀況下咱們作了UI後就是爲了在不一樣的分辨率上，這種九宮格的佈局使用功能按鈕、圖表、血條等。這種浮動設計是任憑屏幕變化多大，都始終保持相對合理的位置。

 

第三個原則自適應尺寸，剛纔兩種佈局是不能徹底解決咱們的需求，對話框按鈕就是要根據屏幕拉伸。順便提一下，Unity並無區別iPhone、Android，所有都是自適應尺寸。

 

UI美術製做

 

上面三種方式就是UI的原則。設計的思路定下來後，就要開始美術製做，如今分享一下我作的美術框圖。美術製做由草圖再變成一個框圖，咱們遊戲的框圖用了AI，我能夠告訴你們用AI更簡單，好處更多。由於它很容易上手，任何一個策劃用一天時間就能掌握基本操做。

 

 

咱們在畫框圖時，就能很明確知道界面可以知道放下多少個按鈕。畫完草圖後，讓美術根據草圖、尺寸作美術效果圖，UI成品圖也是在AI製做，PS也是挺好，國內的美術更喜歡用PS，畫起來很簡單，也很直觀，國內AI高手沒有那麼多，遊戲用AI用得很少。咱們之因此用AI不用PS主要是AI是矢量，PS每一個按鈕還得畫一次，效率過低了。整個遊戲從開始到進入地圖到對話框等，每個都是能夠用不一樣的畫板、不一樣的分辨率，還有一個優勢是導出圖片很方便，用PS的話極可能一個按鈕十幾個圖層，光選擇十幾個圖層就很費勁。如今顯示的圖大概花費了兩週不到，很方便。

 

 

下一步就是導出UI效果圖，之前搞房地產、建築以前，房子尚未蓋，就找人噴一些效果圖，讓你們有直觀的感受，知道房子作出來是怎樣，美術也是同樣，當把AI畫出來後，都有一個效果圖，效果圖出來後有很大意義。咱們要求每個UI頁面導出效果圖，存放到Unity項目文件夾，這是咱們團隊的規範，必需要保存到規定的文件夾裏。

 

 

UI程序的實現

 

一個遊戲的一線員工主要是策劃、美術、程序三種工種組成，剛纔的流程裏爲什麼要有草圖和效果圖，緣由是草圖是策劃和美術之間溝通，以後用程序與美術用效果圖溝通，讓程序在Unity在程序中擺放。咱們定了這個流程是減小策劃、美術、程序之間的溝通成本，策劃把草圖交給美術，美術跟草圖溝通好，而後程序跟美術就不會有什麼糾紛。關於導出產品圖，UI分了四種圖片分類，普通切片、九宮格切片和填充整個區域的切片。

 

最後一項是講程序，程序員拿到成品導出後，按照咱們團隊，就由程序員去擺放。咱們程序員跟咱們講但願美術擺好再給他，但嘗試過以後更麻煩。以後導出UI效果圖，分層次、分組，用00_、 01_、02_序列號命名，這樣會看得比較舒服，雖然這時命名多花一點時間，可是之後能節省不少工夫。接下來很重要的是程序放在哪裏。整個UI對象有時比場景還多，要是本身寫的程序把一段程序放在其中一個對象裏，這時項目交給另外一我的，他根本就不知道在哪裏。咱們專門用一個對象控制菜單的主邏輯，就把菜單 主邏輯綁到他身上。有時候有一些UI無可奈何仍是須要那種單獨把一個代碼綁定在一個特定的UI對象。關於UI的佈局擺放，只能靠場景組合來擺。

 

UI自動縮放

 

關於UI自動縮放程序，在這種狀況下咱們要設計一個UI自動縮放，咱們是以iPhone4爲基準，iPhone4是最中間的比例，變成iPad就會豎向拉長，iPhone5就橫向拉長，實踐以後效果很差，咱們就按照iPhone4的長寬比來作。咱們的對話框主要是以iPad的框來作，通過程序進行縮放按照比例，保證在iPhone四、iPhone5裏都看得很束縛。

 

 

創業團隊只需開發

關於性能問題，就是耗內存。若是確實佔很大內存，可使用動態加載、動態銷燬。將獨立的UI對話框製做成prefab。我做爲過來人，你們作技術產品必定要考慮開發和研發的區別，特別是創業，研發是沒有時間保障，開發是有明確的時間及產量保證，咱們要作一個產品，產品用多少時間作是要有明確的。在北京，不少同行、團隊用18個月、22個月開發一個開品，他們就是沒有搞清楚開發和研發的區別。咱們團隊就是不太願意要技術員研發不少時間，雖然頗有幫助。可是考慮時間，目前的準則，作一款新產品研發的比例在30%如下，這樣就保證了70%的工做是有時間保證。