從 Game Jam 到行動裝置與 Firefox OS

遊戲開發活動「Game Jams」即聚集了多位遊戲開發者,期能在極短時間內一同開發遊戲。我極愛參加此類活動。就我之前參加 Game Jam 所開發的〈Metal vs Hipsters〉遊戲來看,移植到行動 Web Firefox OS 上實在是很酷。

移植到行動裝置

剛開始是針對桌機打造 HTML5 遊戲,因此就會有解析度固定、透過鍵盤控制等特點。若要將之移植為行動裝置版本的遊戲,就必須進行小幅度 (當然也有大幅度!) 的調整。

gaming

此遊戲使用了開放源碼的遊戲引擎「Phaser」,因此本文所提供的部份程式碼亦利用了 Phaser 的 API。

你可在這裡確認並把玩最後的行動版本。

遊戲的視覺呈現

我所用的第一組工具,就是 Firefox 的「適應性設計檢視模式 (Responsive Design View)」。此工具可讓你切割畫面並模擬不同的螢幕尺寸。只要到 Firefox 瀏覽器上找到「工具 (Tools)」>「網頁開發者 (Web Developer)」>「適應性設計檢視模式 (Responsive Design View)」即可。

另外一個工具就是實際的智慧型手機了!我先找到一支 Android 手機,並在其內安裝了多款瀏覽器。我先在 localhost 中執行遊戲,再將手機連上自己的 Wi-Fi 網路,就能用我的電腦 IP 存取遊戲了。

當然接著就發生了第一個問題……

尺寸調整

適應性設計檢視模式中,這個遊戲在 320×480 解析度未加以調整的畫面如下:

unscaled

 

解決方法則是使用 Phaser 的 ScaleManager 來調整遊戲解析度,使其能切合整個螢幕 (依需要也可使用寬螢幕模式):

 


你參與過遊戲開發活動「Game Jam」嗎?你自己是不是已經有一些桌機遊戲,想要再更進一步將遊戲移植成手機就能開啟的 Web/HTML5 遊戲,藉以接觸到更多消費者呢?如果你對上述三個問題的答案都是肯定的,那就更不能錯過原文內的範例程式碼與移植心得喔!

 

 

 

原文連結:From game jam to mobile and Firefox OS

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *