HTML 5 遊戲開發:2D 方塊地圖

我最近加入 Mozilla 的「開發者關係 (Developer Relations)」團隊,現正協助撰寫有關 HTML 5 遊戲開發內容並將發佈於 MDN 之上。由於我本來就熱愛遊戲,這工作對我正是如魚得水。我轉用 HTML5 開發遊戲,就是為了讓自己的遊戲有機會觸及更多玩家。如果你覺得遭遇瓶頸,我想順便建議你也像我一樣試試。

我們現正撰寫有關 2D 橫向捲軸地圖的 MDN 文章。不論是經典或新上市的遊戲,2D 地圖一直是極普遍且高人氣的技術。

是下方擷圖就是標準範例:

由 Kenney 提供開放源碼地圖編輯器所設定的遊戲範本

由 Kenney 提供開放源碼地圖編輯器所設定的遊戲範本

 

你看得出來這個遊戲關卡就是用很多小方塊所拼湊而成的吧?這些小方塊就是我們所說的「磚 (Tile)」。很多遊戲都是用這種小方塊以視覺或邏輯的方式所構成的,就像大家耳熟能詳的《瑪莉兄弟 (Super Mario Bros)》、《模擬城市 (SimCity)》、《最終幻想戰略版 (Final Fantasy Tactics) 》、《文明帝國 (Civilization) 》等等。

而〈Tiles and Tilemaps overview〉一文則簡單說明了 2D 方塊遊戲的運作方式。不論你在自己的遊戲 (本身或第三方實作都算) 中如何運用 2D 方塊,或不論是使用何種技術\程式語言,你看完都能有所體會!

我們也有透過 Canvas API 實作 2D 方塊地圖的文章:

除了這些文章之外,還有系列現成展示及其原始碼供你參考。但這裡另外給你可立刻體驗的東西:點擊下圖就能透過方向鍵移動人物。

我們會繼續針對 HTML5 遊戲開發,在 MDN 上提供新的內容讓大家隨時參考。希望你喜歡!

關於作者 Belén Albeza

Belén 是 Mozilla Developer Relations 團隊的工程師與遊戲開發者,關心 Web 標準、高品質的程式碼、是否易於取得、遊戲開發等的大小事。

更多 Belén Albeza 所寫的文章……

 

 

原文連結:HTML 5 games: Tilemaps

 

 

您可能也會喜歡

目前找不到相關文章

共 2 則讀者回應

  1. 參照: HTML5 遊戲開發:3D 碰撞偵測 | 部落格 | Mozilla Taiwan

  2. 參照: HTML5 遊戲開發:3D 碰撞偵測-大雨头条

對此文章發表回應

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