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