Phaser 介紹
Phaser 是一款專門用於桌面及移動 HTML5 2D 游戲開發的開源免費框架，提供 JavaScript和 TypeScript 雙重支持，內置游戲對象的物理屬性，采用 Pixi.js 引擎以加快 Canvas 和WebGL 渲染，基於瀏覽器支持可自由切換。
本文將對以下類進行簡單介紹：
|
Core 核心 |
Game |
游戲 |
| Group | 組 | |
| World | 世界 | |
| Loader | 載入器 | |
| Time | 時間 | |
| Camera | 攝像機 | |
| State Manager | 狀態管理器 | |
| Tween Manager | 補間動畫管理器 | |
| Sound Manager | 聲音管理器 | |
| Input Manager | 輸入管理器 | |
| Scale Manager | 縮放管理器 | |
|
Game Objects 游戲對象 |
Factory (game.add) | 工廠 |
| Creator (game.make) | 創建者 | |
| Sprite | 精靈 | |
| Image | 圖像 | |
| Sound | 聲音 | |
| Emitter | 發射器 | |
| Particle | 粒子 | |
| Text | 文本 | |
| Tween | 補間動畫 | |
| BitmapText | 位圖文字 | |
| Tilemap | 瓦片地圖 | |
| BitmapData | 位圖數據 | |
| RetroFont | 復古字體 | |
| Button | 按鈕 | |
| Animation | 動畫 | |
| Graphics | 圖形 | |
| RenderTexture | 渲染紋理 | |
| TileSprite | 瓦片精靈 | |
| Geometry
幾何圖形
|
Circle | 圓 |
| Rectangle | 矩形 | |
| Point | 點 | |
| Line | 直線 | |
| Ellipse | 橢圓 | |
| Polygon | 多邊形 | |
|
Physics 物理引擎 |
Arcade Physics | Arcade 物理引擎 |
| Body | 剛體 | |
| P2 Physics | P2 物理引擎 | |
| Body | 剛體 | |
| Spring | 彈簧 | |
| CollisionGroup | 碰撞組 | |
| ContactMaterial | 接觸物質 | |
| Ninja Physics | Ninja 物理引擎 | |
| Body | 剛體 | |
|
Input 輸入 |
Input Handler | 輸入處理 |
| Pointer | 指針 | |
| Mouse | 鼠標 | |
| Keyboard | 鍵盤 | |
| Key | 按鍵 | |
| Gamepad | 游戲手柄 |
核心 Core
Game
Game 對象是游戲的核心，它提供了一個快速調用公共函數和處理啟動過程的渠道。
Group
Group（組）是一個用於顯示各種對象（包括 Sprites 和 Images）的容器。
Group 將顯示/場景圖組成了邏輯樹的結構，應用到 Group 上的變換會應用到它的子對象上。
例如。當 Group 被移動/旋轉/縮放時，所有的子對象同時也會被移動/旋轉/縮放。
此外，Group 也提供了對快速對象池和對象回收的支持。
Group 可以顯示對象，同時也可能作為其他組的子對象。
World
一個游戲只擁有一個 World(世界)。World 是一個抽象空間，所有游戲對象都生存在 World中。它它可以是任意尺寸大小，不受舞台的邊界限制。你可以通過相機來查看世界。所有的游戲對象都以基於世界的坐標而生存在 World 中。默認情況下，World 的尺寸大小與舞台一致。
Loader
Loader（加載器）用於處理所有外部內容的加載，例如圖像、聲音、紋理圖集和數據文件。
它把 Image()載入和 XMLHttpRequest 對象結合在一起，提供了載入進度顯示和載入完成的回調功能。
Time
這是一個核心內部游戲時鍾。
它維護了一個消逝時間，計算已消逝的時間值。這可用於游戲對象的運動、補間動畫，還處理一個標准的定時器池。
要創建一個普通的定時事件，可使用 Phaser.Timer。
Camera
Camera（攝像機）是觀察游戲世界的視野。它有一個確定的位置和大小，並且只渲染在它視野范圍內的對象。游戲啟動時候，會自動創建一個跟舞台相同大小的攝像機。通過改變Phaser.Camera.x/y 的值可以在世界中移動攝像機。
State Manager
狀態管理器負責載入、設置、切換游戲狀態。
Tween Manager
Phaser.Game 維護了一個單一的 TweenManager 實例，所有補間動畫對象都是由它創建和更新的。補間被鈎入游戲時鍾中，使系統暫停，並根據游戲狀態而調整。
TweenManager 主要是基於 tween.js（http://soledadpenades.com）。區別是：補間動畫屬於游戲的 TweenManager 實例，而不是一個全局 TWEEN 對象。它提供了一些包裝了信號的回調方法，還有一些用於修補關於屬性和完成錯誤的問題。完整的貢獻者名單請參見：https://github.com/sole/tween.js。
Sound Manager
聲音管理器負責通過傳統的 HTML 音頻標簽或 Web 音頻（需瀏覽器支持）來播放音頻。注意：在 Linux 的 Firefox25 及以上版本中，如果你在 about:config 中禁用了 media.gstreamer，則無法播放 mp3 或 m4a 文件。音頻文件的類型及其編碼方式是極其重要的。不是所有的瀏覽器能播放所有的格式。這里有一份很好的參考：http://hpr.dogphilosophy.net/test/。
如果你在某個頁面上沒有正確的刷新 Phaser 游戲（例如在 AngularJS 項目中），你會很快從AudioContext 節點跑飛掉。如果在創建 game 前在 window 對象上創建了一個全局的PhaserGlobal 變 量 ， 則 當 game銷 毀 時 ， 當 前 的 AudioContext會 保 存 到window.PhaserGlobal.audioContext，並且在 game 重啟后重用這個變量。
Input Manager
Phaser.Input 是所有輸入設備的管理器，包括鼠標、鍵盤、觸摸和 MSPointer。 輸入管理器在主游戲循環中會自動被更新。
Scale Manager
ScaleManager 對象控制了縮放、大小變化和游戲大小與顯示畫布之間的對齊操作。
游戲大小是游戲的邏輯尺寸，顯示畫布作為 HTML 元素也有其自己的尺寸。
縮放的計算受包圍在外面的父容器的大小（顯示畫布的父容器/元素的大小）影響很大。
畫布的父容器的有效 CSS 規則對於縮放管理器的操作來說扮演了一個很重要的角色。
顯示畫布或者游戲尺寸，依賴於縮放模式，被更新以使得能夠最好的適應父容器尺寸。
在全屏模式或者 parentIsWindow 模式，父容器尺寸就是可視化視圖（參見 getParentBounds）。
父容器和顯示畫布包括以下准則：
1、給游戲畫布的父元素添加樣式以控制你固執父容器的大小，並因此而控制顯示畫布的大小和布局。
2、父元素的 CSS 樣式應該有效地運用最大（和最小）的邊界行為。
3、 父元素不能應用 padding。如果確實需要使用 padding，那么把它應用父容器的父容器，或者使用 margin。
4、不應該改變或者指定顯示畫布的 CSS 樣式（例如邊緣留空，大小），因為這可能會被ScaleManager 更新掉。
游戲對象 Game Objects
Factory (game.add)
GameObjectFactory 是一個使用 game.add 來創建很多常見游戲對象的快速方法。
創建出來的對象會自動被添加到適當的管理器、世界、或者用戶指定的組中。
Creator (game.make)
GameObjectCreator 是一個創建游戲對象的快速方法，但是並並不會把對象添加到游戲世界中。對象創建者可以被 game.make 訪問。
Sprite
精靈是游戲的生命體，幾乎可用於所有的可視化物體。
基本上，精靈是有一套坐標和渲染在畫布上的紋理所組成。精靈也包括了一些額外的屬性，例如物理移動（通過 Sprite.body）、輸入處理（通過 Sprite.input）、事件（通過 Sprite.events）、動畫（通過 Sprite.animations），攝像機選擇等等。
Image
圖像是一個輕量級對象，你可以使用它來顯示任何不需要物理引擎或者動畫的任務東西。它可以旋轉、縮放、剪切，並接收輸入事件。它可以完美的用於標識、背景、簡單的按鈕和其他非精靈類圖形。
Sound
聲音類
Emitter
Emitter 是一個使用 Arcade 物理引擎的輕量級粒子發射器。它可用於一次性的爆炸，或者像雨、火那樣的連續性效果。它所有真正做的就是在設定的時間間隔里發射出 Particle（粒子）對象，並相應的修正他們的位置和速度。
Particle
Particles（粒子）是精靈的擴展類，它由粒子發射器（例如 Phaser.Particles.Arcade.Emitter）發射出去。
Text
文本對象創建了一個本地的隱藏 Canvas 對象，先把文本渲染上去，然后再把紋理渲染上去。正因為如此，你只能顯示當前已經被載入的，且對於瀏覽器有效的字體。它不會為你載入字體 。 這 里 有 一 個 列 表 羅 列 了 不 同 移 動 瀏 覽 器 支 持 的 默 認 字 體 ：http://www.jordanm.co.uk/tinytype
Tween
Tween（補間）允許你在一個指定的時間周期內更改一個目標對象的一個或多個屬性。這個可用於讓移動精靈 alpha 通道變化（即透明度變化）、縮放或者移動。使用 Tween.to 或者Tween.from 來設置 tween 值。你可以在同一個 Tween 上多次調用 Tween.to 來對同一個對象創建多個 tween。補充一下，以這種方式指定的 tween 會變成子 tween，並且會按次序播放。你可使用用 Tween.timeScale 和 Tween.reverse 來控制這個 Tween 及其所有子 tween 的回放。
BitmapText
BitmapText（位圖文字）對象包含了一個紋理文件和一個描述字體布局的 XML 文件。
在 Windows 上，你可以使用免費軟件 BMFont: http://www.angelcode.com/products/bmfont/
在 OS X 上，我們建議使用 Glyph Designer: http://www.71squared.com/en/glyphdesigner
對於網頁，有很好的 Littera: http://kvazars.com/littera/
Tilemap
Phaser.Tilemap（瓦片地圖）可以用一個 JSON 文件或者 CSV 文件來填充數據。第一個參數是傳入一個緩存鍵值。當要使用瓦片數據時，你只需要提供這個鍵值。當使用 CSV 數據時，你必須提供這個鍵值和瓦片的寬、高數據。如果你想創建一個空的瓦片地圖，想后面再填充，你可以不指定任何參數然后再調用 Tilemap.create，或者也可以在這里傳入地圖和瓦片的尺寸。注意，所有的瓦片地圖在計算尺寸時都使用一個基本的瓦片尺寸，但是 TilemapLayer可能會有自己獨立的優先級更高的瓦片尺寸。瓦片地圖要使用 TilemapLayer 來渲染並顯示出來。它不會自己直接添加到顯示列表里。一個地圖可能會有多個層次。你可以對地圖數據進行復制、粘貼、填充操作，也可以把瓦片移來移去。
BitmapData
BitmapData（位圖數據）對象包含了一個 Canvas 元素，你可以通過一些普通的 Canvas 上下文操作在這個元素上繪制任何你喜歡的東西。單一的 BitmapData 可以被用來作為一個或多個圖像或者精靈的紋理。所以，如果你需要動態創建精靈的紋理，這是個很好的選擇。
RetroFont
Retro Font（復古字體）類似於 BitmapFont（位圖字體），他使用紋理來渲染字體。然而與BitmapFont 不同的是，RetroFont 里的每一個文字的尺寸都是一樣的。這個與 sprite sheet（精靈表）類似。你通常可以在一些老的 8 位、16 位游戲中查到字體表。
Button
按鈕是一個特殊類型的精靈，他能自動建立對指針事件的處理。
這里是四種按鈕響應的狀態：
1、Over（經過） – 指針移動經過按鈕。這個也就是 hover；
2、Out（離開） – 指針曾經移動經過過按鈕，現在離開了按鈕；
3、Down（按下） – 指針被按鍵按下。例如在觸摸屏上觸摸，或者用鼠標點擊；
4、Up（抬起） – 指針在被按鈕按下后又釋放了。
Animation
一 個 Animation （ 動 畫 ） 實 例 包 含 了 一 個 單 一 的 動 畫 和 用 於 播 放 的 空 間 。 它 通 過AnimationManager 來創建，由多個 Animation.Frame 對象組成，屬於某個單一的游戲對象（例如：精靈）。
Graphics
Graphics（圖形）對象
RenderTexture
RenderTexture（渲染紋理）是一個特殊的問題，它允許任何顯示對象在它上面渲染。它允許你把許多復雜的對象渲染在一個單一的方框內（利用 WebGL），然后再用作其他顯示對象的紋理。這個生成紋理是實時的。
TileSprite
TileSprite（瓦片精靈）是個有着重復紋理的精靈。紋理可以被滾動、縮放，並且自動包裹邊緣。請注意，TileSprites 和普通的精靈默認沒有輸入處理方法和物理引擎剛體，兩者都必須要啟用后才會具有這些特性。
幾何圖形 Geometry
Circle
通過指定中心坐標（指定 x 和 y 參數）和直徑參數來創建圓形。如果你沒有指定參數，那么x，y，直徑半徑默認為 0。
Rectangle
通過指定左上角（指定 x 和 y 參數）、寬、高參數來創建一個矩形。如果沒有指定參數，則矩形的 x，y，寬，高都默認是 0。
Point
點對象表示的是二維坐標系統上的一個位置， 表示水平方向，y 表示垂直方向。var myPoint= new Phaser.Point(); 這段代碼在(0,0)上創建了一個點。你也可以把這個作為一個二維向量，你可以在這個類中找到一些不同的向量相關函數。
Line
通過指定起始點和結束點來創建一條直線。
Ellipse
通過指定橢圓外接矩形的左上角坐標（指定 x 和 y 參數）、寬、高來創建一個橢圓。
Polygon
多邊形的點可以通過多種方式來設置：
1、點對象數組： [new Phaser.Point(x1, y1), …]
2、包含 x/y 公共屬性的對象數組： [obj1, obj2, …]
3、包含表示坐標的成對數據的數組： [x1,y1, x2,y2, …]
4、離散的 Point 參數： setTo(new Phaser.Point(x1, y1), …)
5、離散的包含 x/y 公共屬性的對象： setTo(obj1, obj2, …)
6、離散的包含表示坐標的成對數據： setTo(x1,y1, x2,y2, …)
物理引擎 Physics
Arcade Physics
Arcade 物理引擎。包含了一些碰撞、重疊、運動等函數。
Body
剛體是一個單一的精靈，所有的物理操作都是針對這個剛體，而不是針對精靈本身。例如，你設置的速度、加速度、邊界值都是針對的剛體。
P2 Physics
P2 物理引擎。你可以用來創建材料、監聽事件、在物理仿真中添加剛體。
Body
P2 物理引擎的剛體。注意，當剛體綁定到一個精靈的時候，為了避免在移動設備上單像素抖動，我們強烈建議使用精靈的尺寸並包含兩個軸，例如，要使用 128×128 而不是 127×127。另外，在 P2 剛體的時候，它的 x/y 軸錨點為 0.5，也就是剛體的中心位置。
Spring
創建一根線性的連接兩個剛體的彈簧。彈簧有靜止長度、阻尼、剛度等屬性。
CollisionGroup
碰撞組
ContactMaterial
定義一種物理材料
Ninja Physics
Ninja 物理引擎。本引擎由 Metanet 軟件公司制作並用於 Flash，由 Richard Davey 發布JavaScript 版本。它允許使用 AABB（軸對齊矩形邊界框）和圓形瓦片碰撞。瓦片可以是任意 34 種不同的類型，包括斜坡、凹凸形狀。它目前發展的還算好，但是在擴展性和優化上還需要進一步成熟起來。這里有一些社區為它添加的特性：
1、AABB 與 AABB 的碰撞
2、AABB 與 Circle 的碰撞
3、支持 AABB 和 Circle 的“固定”屬性
4、多路碰撞，這樣 AABB 或者圓形就可以從下往上穿過瓦片，並停在上面
5、用於快速剛體和瓦片組查詢的四叉樹和空間網格
6、內部數學數量優化、減少臨時變量的生成
7、擴展重力和邊界功能，允許分離的 x/y 軸值
8、支持與精靈關聯的剛體的錨點不一定是 0.5
你可以自由的使用上面的特性，並用你的代碼提交 Pull 請求！一定要包含測試用例哦。
輸入 Input
Input Handler
輸入句柄會綁定到一個指定的精靈，並負責管理針對這個精靈的所有輸入事件。
Pointer
由鼠標、觸摸和 MSPoint 管理器 使用，也觸摸屏上的一個手指。
Mouse
處理鼠標與瀏覽器的各種交互。
這個類捕捉了所有發生在游戲畫布對象上的鼠標事件，同時也增加了一個鼠標抬起監聽器，用於捕捉鼠標不在游戲上的鼠標按鍵釋放事件。
Keyboard
監控鍵盤輸入、分發鍵盤事件。由於硬件限制，很多鍵盤無法處理一些組合按鍵。
Key
如果你需要用指定按鍵實現更細的操作，你可以使用這個對象。
Gamepad
處理游戲手柄輸入和事件分發。請調用 gamepad.start()。目前還只處於實現階段，並且只有部分瀏覽器支持。
http://www.grycheng.com/?p=1242