Phaser.js開發小遊戲之Phaser.js介紹
歷史
在 canvas
還沒出現之前,基本上瀏覽器上的小遊戲都是用 Flash
開發的,Flash
大家知道現在瀏覽器已經開始拋棄它了,主要原因是安全和效能問題。但是在 2014 年之前,基本上所有的頁遊(包括現在的一部分)都是用 Flash
開發的。
還有一些用 原生JavaScript
或者 jQuery
開發的遊戲專案就是操作 DOM
了,大家也知道操作 DOM
效能很不好,所以大家對用 JavaScript
開發遊戲並不是很感興趣。
我記得大概是從 2014 年開始,移動端越來越受歡迎了,canvas
在移動端的優勢就體現出來了,當初幾個很火的小遊戲:神經貓、2048、微信打飛機...開始走向各個廠商和開發人員的眼中了,同時越來越多的 H5 遊戲框架如雨後春筍般一個個地冒出來,連 Pixi.js
到了 2020 年,經過市場的洗禮,基本上 H5 遊戲框架也穩定下來了,比如 Phaser.js、白鷺、cocos2d-js、Three.js、Createjs、Babylon.js...基本上 2D、3D的遊戲業務需求都可以滿足。
可見 H5 端的遊戲只會越來越豐富,應用場景也會越來越複雜,現在還有 WMS
開發 3D 遊戲...
為什麼選擇 Phaser.js
我選擇 Phaser.js
主要是出於以下的一些原因:
- 非常流行,在國內外都有很多開發人員推薦
- 支援
JS
和TS
- 支援
Canvas
和WebGL
模式切換 - 定位很明確,主要針對 PC 和 H5 遊戲開發
- 文件非常完善,案例豐富(英文文件內容豐富)
- 持續更新,到現在是 Phaser 3。只有持續維護更新才會更吸引人
相對而言,Phaser.js
的上手是非常方便的
開發過程中的感想
第一點:上手簡單
只需要有 JavaScript
開發經驗,在專案中引用 phaser.js
檔案,不需要做其他處理了,一個小遊戲的開發 100 行左右就可以解決,當然,複雜的遊戲工作量肯定就不小了。
如果沒有過 H5 遊戲開發經驗的前端人員,對 JavaScript
比較熟悉的話,不超過一個星期就可以掌握,獨立開發小遊戲了。
第二點:文件和案例完善
API
的介紹非常完善,基本上每個類和API 都有很詳細的說明,如果要下載離線的就要到 phaser3-docs 下載下來然後到 /docs
目錄中雙擊 index.html
檔案開啟
案例 裡面有非常豐富並且容易上手的案例,有的可以直接線上編譯,有的還是需要下載才能看,官方直接提供了案例的下載包 phaser3-examples
第三點:上手案例為中文
上手的第一個案例已經被翻譯為中文了,裡面的內容和步驟對新手而言完全就是非常簡單