開發日誌-0045 rollTurtle! 程式作業開工啦(universal template)

目前最新開發進度-已經開始進行程式作業一星期啦，
又是一段漫長作業的開始，
只不過是從美術工作轉成程式工作，
程式工作有些沉悶，
把製作好的圖像一個一個修正細部輸出，
匯入到gamesalad裡,再一個一個重新組合起來，
把腦子裡希望它們怎麼運作的想法轉成gamesalad聽得懂的語言，
大部份時間都很無趣，
但是看到物件逐漸活了起來，一個個賦與它們生命，
那種興奮的感覺真的是製作遊戲過程中最快樂的事!

這星期就來紀錄一下上次網誌提到的universal template的部分吧，
這次使用的是前陣子在gamesalad furom裡，
一位叫做"colander"的外國開發者提供給大家他自己製作好的template，
原討論串在這裡。
http://forums.gamesalad.com/discussion/70748/universal-binary-rule-works-in-landscape-and-portrait-for-all-resolutions/p1

在gamesalad這套工具裡，
針對不同的解析度，
有三種不一樣的自動切換呈現方式，
如果只單純依靠工具自動切換的話，
弄出來各有各的缺點(或者你要說各有各的優點也行)
在其他開發工具其實也大同小異脫離不了這三種自動切換的對應模式。

這三種模式分別是
=======================
1.Stretch
中文的意思大概是延展或拉伸，
優點是不管任何解析度，
它都自動幫你用延展或拉伸的模式填滿畫面，
不會留下黑邊，
看似完美，
但個人覺得這是最爛的一種，
因為物件通通會變形!
也就是說你的角色或物件會隨著不同比例的解析度變胖子或瘦子@@"
什麼都不做的話，
預設的設定就是這個。

========================
2.Overscan
中文的意思大概是超出部份裁切，
優點是可以在不變形的情況下填滿畫面，
不會留下黑邊，
但是如果因為比例問題超出畫面的話就會被裁切掉，
看不到一部份內容。

========================
3.Letterbox
中文的意思是在不改變比例的情況下放大，
所以就會留下黑邊，
變成在畫面中間一個小畫面是內容，
這個也蠻鳥的，
但是有蠻多開發者跨平台跨解析度的做法會選擇用這種方式，
畢竟這是最快的一種做法。
=========================

基本上想做到完美的universal,沒有仙丹妙藥，
視情況自己手動去調整畫面是絕對必要的工作。

想做到universal，
第3種模式是絕對不可能的，
因為系統已經強制幫你預留黑邊，
必須用會填滿畫面的Stretch或Overscan去做，
個人覺得用Overscan比較好，
我之前自己做的版本也是用Overscan，
因為Stretch會扯到變形，
一但物件變形，
要再做位置的調整是一件很麻煩且容易產生誤差的事。

這次紀錄的template也是必須使用Overscan的模式，
而使用Overscan的方式去製作universal的話，
要先有一個概念，
就是遊戲的主要內容必須放置在一個安全框內，

圖A 不同比例的螢幕框

圖B 用顏色來看更清楚

因為在對應不同比例的解析度的時候，
超出畫面範圍的內容是有可能被裁切掉的。

所以背景圖則必須要是以最大的比例去製作，
用圖B顏色這張圖來說明的話,就是要做到藍色圖片的高度加上紅色圖片的寬度，
這樣不管任何比例的解析度都能看到完整的背景圖。

而遊戲的內容則是放在所有比例交錯的最小安全框內，
也就是綠色的範圍。

然後就是HUD遊戲介面與資訊，
再針對不同的解析度切換到正確的位置，
也就是說,如果做到了前面安全框位置與背景圖的概念，
最主要要處理的其實是HUD的部份。

也就是這次的template提供的功能啦:)

template執行之後會產生如上圖的內容，
黃色色塊代表HUD遊戲介面，
白色色塊代表遊戲內容，
在不同比例的解析度，
黃色色塊(HUD遊戲介面)的座標位置要針對不同的解析度變化，
而且尺寸也必須做放大縮小的處理。
而白色色塊(遊戲內容)則是Oversacn，會因為超出畫面導致左右被切掉一部份。
(所以要有安全框的概念)

這個template打開來會看到4個物件，
基本上只會用到UB(黃色色塊)跟Setup(紅色色塊)，
使用方法非常簡單，
把紅色色塊Setup的元件放到遊戲中被載入的第一個場景，
比如說logo的畫面，
因為紅色色塊裡有著抓取解析度的參數，
所以一定要放在第一個場景,確保優先被載入設定。

再來就是進入黃色色塊裡，
把除了display以外的唯一rule複製到需要當作HUD元件的物件裡，
就可以做到隨著畫面不同而改變座標及尺寸到是正確比例位置的效果了。

原gamesalad國外開發者範本裡提供的參數是紅色框框內的那幾個，
(其他的是我自訂的東西請忽略^^")
基本上把16:9跟4:3的放大縮小比例很完美的考慮進去了。

這個東西很方便，
但是如同原作者所說的，
這不是靈丹妙藥，
基本上套用進去之後，
一定還是有需要自行調整的地方，
裡面提供的參數不適合的話也必須自行變化看看，
要做到完美的universal有很多地方都還是必須人工去檢查。

原開發者也很大方的說了歡迎大家自行修改使用，
所以我把這個範本放在我的網路空間提供給有需要的朋友下載參考，
或是有興趣使用的朋友也可以到原討論串去參與討論或下載，
作者有不定時在更新修改版本.。

這次用了這個方便的東西之後，
節省了不少時間跟腦細胞，
可以更專注在遊戲內容製作上，
其實本週rollTurtle在完成universal的前置作業後，
就已經製作到可以簡單操作展示的程度了，
(還沒有設計關卡,只是能簡單操作..^^")
但是還有很多物件沒有放進去，
等下週內容多一點看起來更有趣些再公開一些實際運作畫面吧!