跳转至

Scene场景

另可参看场景一览(思维导图)

Phaser3的场景(Scene)源于Phaser2的State，并包含Phaser2的Game World（游戏对象的生存世界）。 一个完整游戏，在正式游戏场景前常有boot、preload、menu等场景。外部控制场景的细节见Scene.scene(场景管理器)。 场景类的结构通常是：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class SimpleScene extends Phaser.Scene {
    constructor() {
        super(
                {
                key: "myScene",
                physics: {
                    arcade: {
                    gravity: { y: 200 }
                    debug: true
                    }
                }
            }
        )
    }

    init() {
    }
    preload() {
    }
    create() {
    }
    update() {
    }
}

可定制的方法：init(), preload(), create()

SceneConfig场景配置对象参考SceneConfig小抄

new Phaser.Scene(config)#

实例化。

Members#

add/游戏对象工厂#

add: Phaser.GameObjects.GameObjectFactory

指向场景层面的游戏对象工厂函数。只有在场景注入图谱（Injection Map）中定义后才能用。其下的方法通过多个参数生成、添加游戏对象。

1
this.add.sprite(400, 100, 'gems')
  • Members
    • displayList: Phaser.GameObjects.DisplayList
    • scene: Phaser.Scene
    • systems: Phaser.Scenes.Systems
    • updateList: Phaser.GameObjects.UpdateList
  • Methods
    • 各种游戏对象GameObjects生成器（类名对应的小写形式,如sprite）
    • particles粒子
    • path路径
    • quad四边框子。一个预配置的网格（Mesh）游戏对象，由两个三角形/四条边控制一个纹理的变形。
    • renderTexture渲染纹理
    • tween补间动画
    • existing(child)

添加已有的游戏对象，比如客户定制且未在场景中注入的类，不能通过add/make引用其工厂函数，而只能用new生成实例。这些实例就需要通过add.existing(child)添加。 如有必要，会添加到显示列表DisplayList和更新列表UpdateList。

1
2
this.missile = new Missile(scene, 'blue-missile');  
scene.add.existing(this.missile);

对比add、make、new三者的差异：

1
2
3
4
5
6
7
8
// add生成后自动添加到显示列表
const text1 = this.scene.add.sprite(100, 200, 'image1');
// new生成后手动添加到显示列表
const text2 = new Phaser.GameObjects.Sprite(this.scene, 100, 200, "image2");
this.scene.add.existing(text2);
// make通过配置对象生成实例，通过设置`add: boolean`决定是否立即添加到显示列表（缺省添加）
this.scene.make.text({x: 0, y: 0, text: "显示文本", style: { fontFamily: '楷体', fontSize: 64, color: color }}, ture)
this.scene.make.sprite({key:'logo', add: false});

anims/全局动画管理器#

anims: Phaser.Animations.AnimationManager

指向全局的动画管理器。Phaser3生成的动画是全局的，可以应用到不同的对象上。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
this.anims.create({
    key: 'left', // 动画的键值，通过此键值应用动画
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    rames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

player.anims.play('left', true);

cache/全局缓存管理器#

cache: Phaser.Cache.CacheManager

指向全局的缓存管理器。成员和方法：

  • Members
    • audio: Phaser.Cache.BaseCache
    • binary: Phaser.Cache.BaseCache
    • bitmapFont: Phaser.Cache.BaseCache
    • custom: Object. 包含自定义BaseCache条目的对象
    • game: Phaser.Game 指向自身所属的Game实例
    • html: Phaser.Cache.BaseCache
    • json: Phaser.Cache.BaseCache
    • obj: Phaser.Cache.BaseCache 存放加载的WaveFront OBJ文件
    • physics: Phaser.Cache.BaseCache 存放（如加载的）物理学数据
    • shader: Phaser.Cache.BaseCache
    • text: Phaser.Cache.BaseCache
    • tilemap: Phaser.Cache.BaseCache
    • xml: Phaser.Cache.BaseCache
  • Methods
    • addCustom(key)添加自定义键（通过Cache.custom.key取用）
    • destroy()销毁所有缓存
Phaser.Cache.BaseCache的成员和方法#
  • Members
    • entries: Phaser.Structs.Map.
    • events: Phaser.Events.EventEmitter
  • Methods
    • add(key, data)
    • destroy() 销毁本缓存
    • exists(key) 判断键值存在与否（与BaseCache.has的行为一致）
    • get(key)
    • has(key) 与BaseCache.exists的行为一致。
    • remove(key)
  • Events
    • addEvent 条目增添事件
    • removeEvent 条目移除事件

cameras/镜头管理器#

cameras: Phaser.Cameras.Scene2D.CameraManager

指向场景的镜头管理器。

children/显示列表#

children: Phaser.GameObjects.DisplayList

指向场景的显示列表. 指向缓存管理器Phaser.Cache.CacheManager。 生成游戏实例的全局缓存，其中的每个BaseCache实例管理一类已经加载的文件。

@\cache\json file

1
2
3
4
5
6
function preload() {
    this.load.json('jsonData', 'assets/atlas/megaset-0.json');
}
function create() {
    console.log(this.cache.json.get('jsonData'));
}

data/数据管理器#

data: Phaser.Data.DataManager

数据管理器

events/事件发生器#

events: Phaser.Events.EventEmitter

事件发生器

facebook/Facebook即时游戏插件#

**facebook: Phaser.FacebookInstantGamesPlugin

A scene level Facebook Instant Games Plugin. This property will only be available if defined in the Scene Injection Map, the plugin is installed and configured.

game/当前游戏实例#

game: Phaser.Game

指向Game实例。

input/输入管理插件#

input: Phaser.Input.InputPlugin

输入插件

lights/灯光管理器#

lights: Phaser.GameObjects.LightsManager

灯光管理器

load/资源加载插件#

load: Phaser.Loader.LoaderPlugin

资源加载插件。

@loader/game load config

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
function preload ()
{
    var progress = this.add.graphics();
    // 设置'progress'事件的回调函数（绘制进度条）
    this.load.on('progress', function (value) {
        progress.clear();
        progress.fillStyle(0xffffff, 1);
        progress.fillRect(0, 270, 800 * value, 60);
    });
    // 销毁进度条
    this.load.on('complete', function () {
        progress.destroy();
    });
    //  Now let's load a huge stack of files!
    this.load.image('128x128');
    this.load.image('sky', 'assets/sky.png');  // 'sky'是载入后资源的关键字，用以获取资源
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
    // ...
}

make/游戏对象生成器#

make: Phaser.GameObjects.GameObjectCreator

参考Scene.add。 实际指向游戏对象生成函数Phaser.GameObjects.GameObjectCreator。成员与方法的名称与add属性的的相同；但与add不同，make下的方法通过一个配置对象生成游戏对象，并通过变量控制是否添加到显示列表。

1
2
3
4
5
6
var bunny = this.make.sprite({
    x: game.config.width / 2, 
    y: game.config.height / 2, 
    key: 'bunny',
    add: true
}, ture);

matter/Matter物理引擎#

matter: Phaser.Physics.Matter.MatterPhysics

Matter物理引擎。

一个为web准备的精确的2D物理引擎 （a 2D rigid body physics engine for the web ▲● ■）

physics/Arcade物理引擎#

physics: Phaser.Physics.Arcade.ArcadePhysics

Arcade物理引擎

plugins/全局插件管理器#

plugins: Phaser.Plugins.PluginManager

对全局插件管理器的引用。管理插件注册，以及注册后的插件是否插入场景。

registry/数据管理器#

registry: Phaser.Data.DataManager

数据管理器

renderer/渲染器#

renderer: Phaser.Renderer.Canvas.CanvasRenderer|Phaser.Renderer.WebGL.WebGLRenderer

对Phaser渲染器实例的引用。

scale/全局缩放管理器#

scale: Phaser.Scale.ScaleManager

对全局缩放管理器的引用。

scene/场景插件#

scene: Phaser.Scenes.ScenePlugin

场景插件。指向场景插件ScenePlugin。 管理各场景，如用start停止本场景并启动新场景，或用launch并行启动UI场景，或pause、resume、stop本场景。 场景间的层级管理可用方法有：bringToTop, sendToBack, moveUp, moveDown, moveAbove, moveBelow。 场景间通信，先建立引用this.scene.get('SceneB')，如果结合紧密则直接调用方法，如果关系不紧密则监听事件。 参考API文档中的Phaser.Scenes.ScenePlugin、 Let's Talk About Scenes、 phaser-scenes-summary

新建场景时也可传递data对象：

1
this.scene.add("page", Page, true,data)

sound/基础声音管理器#

sound: Phaser.Sound.BaseSoundManager

基础声音管理器。

@audio/HTML5 Audio/play audio file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function preload ()
{
    his.load.audio('theme', [ // 一组可选文件
        'assets/audio/oedipus_wizball_highscore.ogg',
        'assets/audio/oedipus_wizball_highscore.mp3'
    ]);
}
function create ()
{
    var music = this.sound.add('theme');
    music.play();
}

sys/场景的系统#

sys: Phaser.Scenes.Systems

场景系统。千万不要覆盖它。

1
2
3
4
5
// 画布宽高
let w: number = this.scene.sys.canvas.width;
let h: number = this.scene.sys.canvas.height;
// 判断不是桌面系统，而是移动系统
let isDesktop: boolean = this.scene.sys.game.device.os.desktop;

textures/纹理管理器#

textures: Phaser.Textures.TextureManager

纹理管理器。

1
2
// 获取文理管理器中所有纹理的key(数组)
var keys = this.textures.getTextureKeys();

time/时钟#

time: Phaser.Time.Clock

时钟。

tweens/补间动画管理器#

tweens: Phaser.Tweens.TweenManager

补间动画管理器。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const data = [ 0,20, 84,20, 84,0, 120,50, 84,100, 84,80, 0,80 ];
const r4 = this.add.polygon(200, 400, data, 0xff6699);
this.tweens.add({
    targets: r4,
    scaleX: 0.25,
    scaleY: 0.5,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

Methods#

update/更新#

update(time, delta)

它应该被你自己的场景重写。 需要每步（game step）/每帧都更新的内容，可以写在这里。

1
2
3
4
update () {
    // 整组对象都围绕一个中心逐帧旋转
    Phaser.Actions.RotateAround(this.group.getChildren(), { x: 400, y: 300 }, 0.01);
}

published from: Phaser 3 API Documentation - Class: Scene

评论