作者：channingbreeze

日期：2017-03-04

Phaser实战系列教程第一课，以飞机大战为素材，讲述了Phaser中游戏的基本概念，Phaser中关键的几个类，Phaser中的场景的深入理解，Phaser中加载资源的一些策略和Phaser中屏幕适配的一些策略！

目录：

l  Phaser游戏中的一些主要对象及概念

l  深入理解场景

l  资源加载常见策略

l  适配不同分辨率手机常用策略

Phaser游戏中的一些主要对象及概念

Game对象：整个游戏的核心

World对象：游戏世界，可以无限大，是一个虚拟的世界。默认和舞台一样大。

Stage对象：舞台对象，是我们看到的区域。他是所有可显示对象的根节点。

Camara对象：相机对象，可以在世界中移动，改变我们的视野区域。

State对象：场景对象，对应游戏中的一个场景，场景直接可以切换。

Sprite对象：精灵对象，对应游戏中的一个角色，甚至任何东西。

Cache对象：缓存对象，对应Phaser中的缓存系统。

Group对象：组对象，可以把有相同行为的Sprite放在一个组里，方便管理。

Tween对象：用来进行渐变动画的对象。

Animation对象：用来进行帧动画的对象。

Physics对象：Phaser中的物理引擎。物理引擎用来模拟物理世界的重力，速度，阻力，碰撞等等。Phaser中默认提供了3种物理引擎，还可以通过插件接入其他物理引擎。

game.add：对象工厂

game.cache：缓存

game. camera：照相机

game.debug：调试工具

game.device：设备

game.input：输入

game.load：加载器

game.plugins：插件

game.scale：缩放(适配)

game.sound：音频

game. stage：舞台

game.state：场景

game.time：定时器

game.tweens：动画

game.world：世界

深入理解场景

场景其实就是一个对象，要包含preload，create或者update中任意一个成员，并且该成员必须是函数。

我们也可以定义一个函数作为场景？

为什么可以用函数？翻看源码：

if (state instanceof Phaser.State)
{
    newState = state;
}
else if (typeof state === 'object')
{
    newState = state;
    newState.game = this.game;
}
else if (typeof state === 'function')
{
    newState = new state(this.game);
}

原来当state是function的时候，内部调用了new state(this.game);生成了一个对象。

State的生命周期：

init() -> preload() -> create() -> update() -> shutdown()

init：当场景启动的时候就会调用init，注意，这时候还没有加载任何资源。

preload：在这里进行资源加载。不要在这里使用你加载的对象，他们可能还没有加载完成。

create：资源加载完成后，会回调create。

update：这里是游戏的主循环。

shutdown：当你跳转到其他场景时，会调用shutdown

场景创建好之后，怎么在游戏中使用呢？

game.state.add：添加场景

game.state.start：进入场景

场景的重入要注意的事项

start(key, clearWorld, clearCache, parameter)

场景重入的时候，可以指定是否将world中的对象清除。但是，如果绑定在state上的属性，还会存在。详见视频。

加载资源

game.load.image

game.load.spritesheet

game.load.audio

……

setPreloadSprite可以设置资源加载精灵，资源加载精灵会根据资源加载的情况，自动裁剪自身宽度。

获取加载进度

可以在onFileComplete这个回调函数中进行，每一个资源加载完成后，都会调用这个函数，它的参数：progress, file key, success?, total loaded files, total files

加载完成会调用onLoadComplete函数。

在游戏中需要加载资源：

手动调用game.load.start

重复加载：重复的资源不会被重新加载。

适配不同分辨率手机常用策略

一般先确定游戏尺寸，根据尺寸设计素材大小和游戏资源位置。

需要适配不同分辨率手机的时候，使用scaleManager。

EXACT_FIT：拉伸，充满屏幕

SHOW_ALL：按比例缩放，一边充满屏幕

USER_SCALE：自定义尺寸

转载请注明出处：http://www.phaser-china.com/tutorial-detail-10.html