跳转至

说明#

这是根据Phaser3 API文档中各类之页面右侧的目录整理的,略作说明,或增加代码示例。可做便览之用。

Phaser 3 API Documentation - Class: 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() {
    }
}

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

Phaser. Scene#

new Scene(config)#

Members#

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生成器(类名对应的小写形式)
    • 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);

对比addmakenew三者的差异:

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 :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',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

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

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 :Phaser.Cameras.Scene2D.CameraManager#

指向场景的镜头管理器。

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 :Phaser.Data.DataManager#

数据管理器

events :Phaser.Events.EventEmitter#

事件发生器

game :Phaser.Game#

指向Game实例。

impact :Phaser.Physics.Impact.ImpactPhysics#

Impact物理引擎

注:ImpactJS与Arcade近似,是一个很流行的老牌H5游戏框架,但2014年后似乎不再更新。

input :Phaser.Input.InputPlugin#

输入插件

lights :Phaser.GameObjects.LightsManager#

灯光管理器

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 :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 :Phaser.Physics.Matter.MatterPhysics#

Matter物理引擎。

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

physics :Phaser.Physics.Arcade.ArcadePhysics#

Arcade物理引擎

registry :Phaser.Data.DataManager#

数据管理器

scene :Phaser.Scenes.ScenePlugin#

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

sound :Phaser.Sound.BaseSoundManager#

基础声音管理器。

@audio/HTML5 Audio/play audio file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function preload ()
{
    this.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 :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 :Phaser.Textures.TextureManager#

纹理管理器。

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

time :Phaser.Time.Clock#

时钟。

tweens :Phaser.Tweens.TweenManager#

补间动画管理器。

Methods#

update(time, delta)#

它应该被你自己的场景重写。

published from :Phaser 3 API Documentation - Class: Scene