Scene场景
另可参看场景一览(思维导图)
Phaser3的场景(Scene)源于Phaser2的State,并包含Phaser2的Game World(游戏对象的生存世界)。 一个完整游戏,在正式游戏场景前常有boot、preload、menu等场景。外部控制场景的细节见Scene.scene(场景管理器)。 场景类的结构通常是:
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)中定义后才能用。其下的方法通过多个参数生成、添加游戏对象。
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)
- 各种游戏对象GameObjects生成器(类名对应的小写形式,如
添加已有的游戏对象,比如客户定制且未在场景中注入的类,不能通过add
/make
引用其工厂函数,而只能用new
生成实例。这些实例就需要通过add.existing(child)
添加。
如有必要,会添加到显示列表DisplayList和更新列表UpdateList。
this.missile = new Missile(scene, 'blue-missile');
scene.add.existing(this.missile);
对比add
、make
、new
三者的差异:
// 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生成的动画是全局的,可以应用到不同的对象上。
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
- entries: Phaser.Structs.Map.
- 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
function preload() {
this.load.json('jsonData', 'assets/atlas/megaset-0.json');
}
function create() {
console.log(this.cache.json.get('jsonData'));
}
data/数据管理器#
数据管理器
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实例。
input/输入管理插件#
input: Phaser.Input.InputPlugin
输入插件
lights/灯光管理器#
lights: Phaser.GameObjects.LightsManager
灯光管理器
load/资源加载插件#
load: Phaser.Loader.LoaderPlugin
@loader/game load config
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
下的方法通过一个配置对象生成游戏对象,并通过变量控制是否添加到显示列表。
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
一个为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
sound/基础声音管理器#
sound: Phaser.Sound.BaseSoundManager
基础声音管理器。
@audio/HTML5 Audio/play audio file
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/场景的系统#
场景系统。千万不要覆盖它。
// 画布宽高
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
纹理管理器。
// 获取文理管理器中所有纹理的key(数组)
var keys = this.textures.getTextureKeys();
time/时钟#
时钟。
tweens/补间动画管理器#
tweens: Phaser.Tweens.TweenManager
补间动画管理器。
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/更新#
它应该被你自己的场景重写。 需要每步(game step)/每帧都更新的内容,可以写在这里。
update () {
// 整组对象都围绕一个中心逐帧旋转
Phaser.Actions.RotateAround(this.group.getChildren(), { x: 400, y: 300 }, 0.01);
}
published from: Phaser 3 API Documentation - Class: Scene