Phaser中文說明文檔

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）。

父容器和顯示畫布包括如下準則：

一、給遊戲畫布的父元素添加樣式以控制你執拗父容器的大小，並所以而控制顯示畫布的大小和佈局。

二、父元素的 CSS 樣式應該有效地運用最大（和最小）的邊界行爲。

三、 父元素不能應用 padding。若是確實須要使用 padding，那麼把它應用父容器的父容器，或者使用 margin。

四、不該該改變或者指定顯示畫布的 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

按鈕是一個特殊類型的精靈，他能自動創建對指針事件的處理。

這裏是四種按鈕響應的狀態：

一、Over（通過） – 指針移動通過按鈕。這個也就是 hover；

二、Out（離開） – 指針曾經移動通過過按鈕，如今離開了按鈕；

三、Down（按下） – 指針被按鍵按下。例如在觸摸屏上觸摸，或者用鼠標點擊；

四、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

多邊形的點能夠經過多種方式來設置：

一、點對象數組： [new Phaser.Point(x1, y1), …]

二、包含 x/y 公共屬性的對象數組： [obj1, obj2, …]

三、包含表示座標的成對數據的數組： [x1,y1, x2,y2, …]

四、離散的 Point 參數： setTo(new Phaser.Point(x1, y1), …)

五、離散的包含 x/y 公共屬性的對象： setTo(obj1, obj2, …)

六、離散的包含表示座標的成對數據： 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 種不一樣的類型，包括斜坡、凹凸形狀。它目前發展的還算好，可是在擴展性和優化上還須要進一步成熟起來。這裏有一些社區爲它添加的特性：

一、AABB 與 AABB 的碰撞

二、AABB 與 Circle 的碰撞

三、支持 AABB 和 Circle 的「固定」屬性

四、多路碰撞，這樣 AABB 或者圓形就能夠從下往上穿過瓦片，並停在上面

五、用於快速剛體和瓦片組查詢的四叉樹和空間網格

六、內部數學數量優化、減小臨時變量的生成

七、擴展重力和邊界功能，容許分離的 x/y 軸值

八、支持與精靈關聯的剛體的錨點不必定是 0.5

你能夠自由的使用上面的特性，並用你的代碼提交 Pull 請求！必定要包含測試用例哦。

 

輸入 Input

Input Handler

輸入句柄會綁定到一個指定的精靈，並負責管理針對這個精靈的全部輸入事件。

 

Pointer

由鼠標、觸摸和 MSPoint 管理器 使用，也觸摸屏上的一個手指。

 

Mouse

處理鼠標與瀏覽器的各類交互。

這個類捕捉了全部發生在遊戲畫布對象上的鼠標事件，同時也增長了一個鼠標擡起監聽器，用於捕捉鼠標不在遊戲上的鼠標按鍵釋放事件。

 

Keyboard

監控鍵盤輸入、分發鍵盤事件。因爲硬件限制，不少鍵盤沒法處理一些組合按鍵。

 

Key

若是你須要用指定按鍵實現更細的操做，你可使用這個對象。

 

Gamepad

處理遊戲手柄輸入和事件分發。請調用 gamepad.start()。目前還只處於實現階段，而且只有部分瀏覽器支持。

http://www.grycheng.com/?p=1242