2013年7月4日 星期四

無痛轉移2D作品到Unity 第一步,製作與輸出

作者: Brett Bibby — 資深Unity原廠講師
在去年有許多高品質的2D遊戲採用Unity來開發,這篇文章是我在亞洲Unite三個國家(韓國、中國、日本)所演講的內容再做個更深入、更實際的2D製程深入介紹,希望可以幫助到那些正在用Unity製作2D遊戲和多媒體互動內容的讀者,由於長度關係我把它分成兩篇文章,本篇文章你可以了解有關製作規則和輸出腳本製作的方式,下次我會介紹匯入Unity的部分,文章的最後也有我專案的下載點。

一個好的工作流程對於2D作品的好處:

 這個教學會帶你操作一個產品真正工作流程,所謂工作流程,代表從最初的製作到遊戲完成的所有步驟過程,不管中間使用了多少軟體,一個高階的工作流程主要由三個步驟組成: 製作、輸出和輸入。有些人可能覺得很奇怪,像Unity這樣的工具可以直接匯入資料為何我們還需要自製輸出器和匯入器,因為我們要自己建立兩個應用程式之間的中介檔案,讓應用程式之間好像用膠水似的黏再一起讓檔案在中間無痛轉換,在本範例就用Unity和Photoshop來當範例。這樣就不需要額外的應用程式來讀取或轉換原生格式,並讓內容轉換到下一個應用程式。

製作:

萬物皆始於一個好的內容,首先的工作流程需要使用業界標準的Photoshop。Photoshop是很簡單上手,用來建立和編輯圖形也很輕鬆方便,有需求也可以選用像是Arsenal這樣的腳本工具插件,問題是2D圖檔本身不像大多數3D模型可以帶有中介資料(meta-data,註一),更重要的是,2D本質上因為只有像素資料的限制,因此必需要更多的中介資料來詮釋。
所以我們要做的是幫這些圖形補充一些有用的說明,讓我們最終在遊戲裡有效運用這些圖形,要做到這點我們可以使用群組和圖層來管理這些圖形。我們需要一個作品的實際案例來示範,在我加入Unity之前參與了一個2D的尋寶遊戲,叫做Goddess Chronicles(女神編年史),我將用它做為例子,它就是就是一個在場景裡面尋找隱藏的物品的遊戲,如同下圖所示
根據你製作的遊戲性質不同,你的中介資料需求也會不相同,本範例會有"佈景"和"物品"兩種主要圖形類型。

圖層的重要性:

佈景是沒有互動的圖形,佔據遊戲大部分的空間用來傳達關卡主題,並讓那些互動物品可以隱藏在遊戲環境裡,因此所有佈景類的圖都會被命名為"scenery"開頭的群組,因為它沒有互動性我們就不用管圖在該群組的圖層分配。而在遊戲裡面用來尋找的物品會被命名為"item"開頭的群組,不像佈景,物品群組內的圖層是很重要的,每個物品群組裡最多有四種圖的型態。
以下是四種型態:(請下載範例專案,並開啟Assets/Hidden Object Game/Levels/GreeK Hall/Greek Hall.psd做對照)
  1. “Whole" 這個圖層用來呈現整個物品,通常物品被找到時會有一些放大縮小或把物品移到道具欄的特效,所以我們需要整個物品圖才不會破圖。
  2. “Obscured” 這個圖層用來呈現物品在另外一個物件背後的感覺,因為物品圖層是在前面,所以要擦除疊到的圖像才會感覺跑到後面,理論上,你當然可以用Whole的圖來取代,但是要美術去為了藏一個物品另外畫許多分離的部件是很麻煩的事,而且保持最小的圖量也能增進遊戲效能。
  3. “Shadow" 圖層是用來讓物品在視覺比較融入場景,Shadow不歸納在Obscured或Whole而獨立存放,因此圖像被放大或移動時後面不會有塊奇怪的陰影,玩家找到物品時反而我們只需要把陰影隱藏就好。
  4. “Hotspot" 圖層用來增加或減少物品的點擊範圍,例如,如果在場景裡藏一個高爾夫球桿會很難點到,使用hotspot圖層就可以加大點擊區域。
我們可以使用群組來集合這些圖形並指定那些是佈景或那些是物品,群組內最少要用一個圖層存放 Whole 的圖,依照需求也可以加入 Obscured, Shadow, Hotspot 圖層,底下的截圖說明了佈景和物品的圖層結構,物品的群組標名 “item:Beads"  它包含名為 “Whole" 和 “hotspot" 的圖層。底下佈景的群組標名 “Scenery:Column" 它包含一些可以隨便命名的前景圖。
最後結果是我們完成了一個遊戲的群組和圖層結構,接下來就是輸出了,你可以下載範例研究並回顧章節。
輸出:一旦我們做出了內容之後,我們就需要將這些成果轉移到下一個軟體流程來處理,本範例就是轉入Unity,我們想要導出有描述場景位置、順序和其他資訊的中介資料圖形,為了做到這點需要和應用程式做比較進階的互動,幸運的是,Photoshop可以用Javascript來編寫一些腳本,這正是我們需要的。 
事實上,有許多Adobe的軟體支援腳本編寫,像是Fireworks,Illustrator,Flash或其他的軟體,我們可以使用這些功能來寫我們要給Unity的輸出規格,包含我們需要用到的中介資料,而Adobe提供了一套叫做ExtendScript for Free的軟體用來編輯腳本和除錯。
ExtendScript for free下載網址:http://www.adobe.com/devnet/scripting.html
如果你有Creative Suite,那這個編輯器可能已經裝在你電腦了,MAC的CS6會在Utility/Adobe Utilities – CS6/ExtendScript Toolkit CS6目錄 Windows 會在C:\Documents\Application Data\Adobe\ExtendScript Toolkit\3.8.
在Photoshop裡很多東西可以透過腳本來處理,如果沒有任何一個API是你需求的,那也可以用錄製Action然後轉換為程式碼在貼到腳本裡(例如Alpha Channel的操作) 。對於本範例而言,我們的腳本需要處裡以下內容:
  1. 檢查是否檔案有開啟
  2. 確認文件有圖層可以輸出
  3. 提示用戶輸出文件的位置
  4. 循環處理每個圖層,刪除空白圖層、存檔圖片、並產生一個XML格式紀錄位置和檔名的檔案。
  5. 最後把XML存檔 
最終版的輸出腳本在教學包裡有附,要使用這個腳本只要把檔案放在Photoshop裡的Presets/Scripts裡面並建立一個子目錄存著,這裡不解釋每一行的功能因為腳本裡會有註解,但我會說明一些比較重要的部分。
首先,腳本是用Javascript編寫的,很容易學習和使用,由於Adobe附的Javascript引擎不是很快,但它運作正常並且可以用ExtendScript編輯器除錯,所以夠我們用由於中介資料是存放圖形含意的重要資料,因此我們需要花點時間來想我們需要怎樣的中介資料格式,我使用XML來作為中介資料的格式,因為我可以在Unity裡面很輕易的解析轉換XML,根據本遊戲設計,我們需要中介資料格式看起來會是這樣:
所以我們的腳本會不斷的產生這樣的XML格式,並在在最後存成一個檔案。
輸出腳本參考位置在Assets/Hidden Object Game/Photoshop Exporter/Export Unity Hidden Object Scene.jsx。
在我們的輸出腳本裡,開頭會建立一些方便使用的變數然後呼叫Main函式。基本流程是由上到下評估並執行,網路上常看到有些範例會把功能寫成函式,有些直接寫在腳本,我習慣把所有功能都放在函式裡然後在一開始呼叫。 
在Main函式裡有許多有意思的部分,第一個部分是下列這行程式:
複製文件內容到duppedPsd結構,整個運作使用duppedPsd物件。執行複製文件原因有二,在Photoshop做任何的變動包含展開或收起群組都會讓文件被標記為已異動,如果我們不這樣做,輸出過程中文件會被標記已異動,這導致當關閉文件時會被詢問是否要存檔,美術可能不確定有沒有改變內容就存檔,會造成存檔時間比最後版本還新而導致版本控制不易,開發者將不確定是否需要重新輸出版本,導致開發效率降低,透過複製文件到結構就算有問題也是輸出過程的錯誤而不會影響原始文件。第二個原因是輸出過程有時總會會出錯,而用這方法就可以還原到最初的狀態。
有意思的還有這行:
由於我們目前只需要有群組分類的圖層,但仍可讓美術製作一些角色、教學或是介面放在最上面的圖層(根目錄),所以我們用這行語法來清除那些沒有要結構化的圖層。
除此之外,主函式裡會呼叫輸出函式建立中介資料的XML文件,最後會存成檔案輸出函式(exportLayerSets)是一個遞回函式,遞迴函式如果需要會呼叫自己,繼續"深入"我們的群組裡找出場景中深層的物件。
這段語法重最後的圖層不斷往前複循環檢查群組列表,如果群組裡面還有群組,它就會繼續再深入呼叫自己檢查這個群組,由於Photoshop裡最底層列表顯示是在第一層,列表層次越高的群組則代表顯示層次越低,因此我們從後面往前處理。
一旦分析到群組名稱有"item"、"custom"(介面或角色圖)就會進入各自的函式,其他都會被歸類為scenery。
如果進入item,程式會循環檢查圖層,看看有沒有剛剛講的四種類別:
當我們找到某些物品想要存起來,就呼叫存檔函式來存成PNG格式,這個函式會先裁除影像左邊和上面的空間用來判斷XY座標,再裁掉右邊和下面的空間然後存檔,並把中介資料放入XML字串。
當我們執行輸出時,完成的結果應該是有了裁切完成的PNG圖形並伴隨著名為Greek Hall.xml的XML文件,如下圖所示:本範例位置在Assets/Hidden Object Game/Levels/GreeK Hall/Greek Hall.xml
 
現在,我們成功的輸出了我們所有的圖像和中介資料,接下來就可以到Unity輸入這些檔案了。下一篇我們會解釋如何將這些資料無痛的輸入至Unity。
『註一』:meta-data(中介資料),意思是用來詮釋補述資料本身的延伸資料,在本範例就是XML文件,用來補充描述2D圖形的定位座標、名稱和群組分類,在匯入Unity可以直接被分析的額外資料。本範例專案檔可從這個連結下載:

沒有留言:

張貼留言

關於我自己

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