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