為 Firefox OS 電視打造遊戲 (下)

隨著 Firefox OS 著眼於連網裝置的趨勢,現正是針對大型螢幕開發遊戲的時候。松下電器 (Panasonic) 現已發售多款 Firefox OS 智慧電視,而相較於一般人所習慣的智慧型手機畫面,我將透過本文簡單介紹該如何對應大型電視螢幕開發 HTML5 遊戲。

在〈為 Firefox OS 電視打造遊戲 (上)〉一文中,我 (作者 Andrzej Mazur) 稍微解釋過第一版羅傑斯隊長的開發背景,與其所對應的執行裝置。但時至今日,逐漸普及的連網裝置讓遊戲平台也更為多元。一起來看看該如何讓電視遙控器也能化身遊戲搖桿,直接在大螢幕電視上享受遊戲!


動手開發

近幾年已有許多有關如何針對 Firefox OS 智慧型手機打造自己的 HTML5 遊戲等的資源。但隨著新媒介不斷問世,相關方式也不盡相同 (以下將討論某些例外),所以你大方向仍是可依照這些說明文章所述來做。但要針對 Panasonic 的 Firefox OS 電視開發遊戲,就需要 Firefox Nightly 與 WebIDE。你可參閱本篇 MDN 文章,透過 WebIDE 遠端除錯的方式,逐步將遊戲推送至電視之中。

考量大型螢幕

放在客廳的電視,當然與手裡握的智慧型手機大不相同。而針對新的媒介,遊戲與其他 App 的設計方式也勢必有所不同。而從我們的 Web 建構經驗可知,不論是在智慧型手機、平板電腦、筆記型電腦、電腦螢幕上,遊戲都能因應目前的螢幕尺寸自行調整,所以電視螢幕也不會是問題。

尺寸縮放

Phaser 只要一行程式碼就能解決尺寸縮放:

該行程式碼將負責遊戲 Canvas 所對應的畫面空間並維持長寬比 (Aspect ratio),因此不致於胡亂延伸成錯誤比例。當然有其他的調整方式,但這個是最簡單、最普遍的方式,且小螢幕手機到大螢幕電視都適用。唯一要考量的就是解析度和執行效能之間的問題,最好能兼顧遊戲的執行與畫質都在可接受的範圍。至於解析度的部份,就要先看看你所要建構的遊戲類型、會有多少程式碼、畫面上執行的複雜程度等等,所以又是不同的考量要點。

控制方式

我利用遙控器來模擬鍵盤,所以如果你已經有自己的遊戲,也能利用現成的控制方式:

 

本範例已經設定了上下左右方向鍵 (如果你是用桌機上測試遊戲,就同樣對應鍵盤的上下左右鍵),且稍後即可檢查是否到位。這些方向鍵與遙控上的箭頭均為相同的按鍵碼,所以能輕鬆實作並測試之。遊戲期間只要按下向右鍵,太空船也會跟著右移。遙控器上可找到對應的功能鍵:

captainrogers2-remote

四個方向鍵也有其相對應的按鍵碼,但你該如何檢查遙控器上的其他按鍵呢?只要單純的 JavaScript 就能辦到:

 

如此只要你按下遙控器上的按鍵,就能看到相對的按鍵程式碼列於主控台上,方便你指派其在遊戲中所對應的動作。你也能參閱〈對應鍵盤的電視遙控器控制按鈕〉一文就能輕鬆完成。

最佳化

另外必須注意的是,電視與其他類似裝置均有其硬體限制。若要讓遊戲運作順暢,就必須遵守某些說明並測試效能,以克服可能的瓶頸。可參閱〈Power Surge〉一文中的相關訣竅。

開放源碼

在準備新版〈Captain Rogers〉的遊戲展示時,我決定要完全開放自己在 Enclave Games 所用私人範本的原始碼,以利大家開發遊戲。你現在就能上 GitHub 找到 Enclave Phaser 範本。我另有其他的遊戲開發專案,如 Monster Wants CandyCyber Orb,同時把這些遊戲都放在頁面上方便開發者取用還蠻不錯的。所以我另外透過 open.enclavegames.com 列出我最感興趣的開放源碼專案。

2014 MWC 到 2016 CES

在西班牙巴塞隆納的世界行動通訊大會 (Mobile World Congress,MWC) 2014 上,我就透過多款 Firefox OS 智慧型手機展示了第一版隊長遊戲。從那時開始,我就常與人討論 Firefox OS 的遊戲開發問題,也讓隊長遊戲作為案例研討之用。新版遊戲已經在賭城消費性電子展 (Consumer Electronics Show,CES) 的 Firefox OS 電視上現身,就是松下電器 (Panasonic) 所發表的新款 UHD 電視。如果你有任何疑問或想法,歡迎隨時到 Twitter 上找我

 

── By Andrzej Mazur

 

 

原文連結:Building games for Firefox OS TV

 

 

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

  1. 參照: 為 Firefox OS 電視打造遊戲 (上) | 部落格 | Mozilla Taiwan

對此文章發表回應

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