Phaser桌面和手機遊戲HTML5框架

Phaser是一個流行的2D開源遊戲框架，可以用來開發桌面或手機瀏覽器HTML5遊戲，適合側視或頂視風格：

Phaser同時支援Canvas和WebGL渲染引擎，預置了完備的精靈動畫、輸入 管理、瓦片地圖、補間動畫、資源載入器、物理系統、粒子系統等特性，幾乎能夠 滿足你開發一個2D遊戲的任何需求：

Phaser最值得稱道的是它的外掛機制，以及由此而衍生出的Phaser生態 社群。例如，藉助於isometric外掛，你可以開發出具有（偽）3D效果的遊戲：

Phaser的下一個版本是3.0（剛釋出），因此目前2.x版本的維護由社群繼續，被稱為Phaser CE —— Community Edition。

Phaser框架的絕大部分功能，都打包在單一phaser.js檔案中。我們只需要 在宿主HTML檔案中引入這個框架檔案，就可以開始使用Phaser：

<script src="lib/phaser.js"></script>

幾乎所有的框架API，都定義在Phaser名稱空間之下。例如，我們通過例項化Phaser.Game類來啟動框架：

var game = new Phaser.Game()

框架將在文件中，使用預設引數建立一個800×600畫素大小的Canvas元素，作為 遊戲的畫布。

√ 指定遊戲尺寸

當然，我們可以自行指定遊戲的大小。例如，設定遊戲大小為700×300畫素：

var game = new Phaser.Game(700,300)

√ 指定渲染器

Phaser採用經過修改的Pixi庫作為底層渲染實現，因此可以支援canvas 和webgl。在預設情況下，Phaser將自動進行選擇，不過我們可以在啟動 框架時指定期望採用的渲染引擎。例如，下面的程式碼啟用了Canvas渲染器：

var game = new Phaser.Game(700,300,Phaser.CANVAS)

Phaser支援的渲染器選項包括：
Phaser.AUTO ： 讓框架自動選擇渲染器
Phaser.CANVAS：使用Pixi的Canvas渲染器
Phaser.WEBGL：使用Pixi的WebGL渲染器
Phaser.WEBGL_MULTI：使用Pixi的WebGL渲染器，並啟用多紋理支援模式
Phaser.HEADLESS：無頭渲染。使用Pixi的Canvas渲染器，但不把canvas元素 新增到DOM中，也不進行實際的渲染

√ 指定遊戲畫布父元素

預設情況下，Phaser會將建立的canvas元素插入到文件的body元素尾部。 不過我們可以顯式地指定其父元素。

例如，下面的程式碼將在屬性id為ezgame的DOM元素中建立遊戲畫布：

var game = new Phaser.Game(700,300,Phaser.AUTO,`ezgame`)

也可以傳入一個HTML元素來指定遊戲畫布的父元素。例如：

var host=document.queryrSelector(`#ezgame`)
var game=new Phaser.Game(700,300,Phaser.AUTO,host)

如果指定一個空的id，框架就會使用body元素作為遊戲畫布的父元素。 例如：

new  Phaser.Game(700,300,Phaser.AUTO,``)。

需要注意的是，遊戲畫布的父元素應當將padding設定為0，否則框架在計算 尺寸時會產生偏差。

寫了個phaser的教程，www.hubwiz.com/course，學習頁面的截圖如下所示，對剛玩遊戲的朋友應該有些幫助：