Phaser 案頭和手機遊戲HTML5架構__HTML

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()

架構將在文檔中，使用預設參數建立一個800x600像素大小的Canvas元素，作為 遊戲的畫布。

√ 指定遊戲尺寸

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

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，學習頁面的截圖如下所示，對剛玩遊戲的朋友應該有些協助：