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

架構将在文檔中，使用預設參數建立一個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

，學習頁面的截圖如下所示，對剛玩遊戲的朋友應該有些幫助：