Registry Data Exchange
Demonstrates how to use the global Game Registry to share and synchronize data between multiple scenes, allowing a UI scene to automatically update when values change in the game scene.
800 × 600
class SceneA extends Phaser.Scene {
constructor ()
{
super('GameScene');
this.score = 0;
this.lives = 6;
}
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('bg', 'assets/skies/sky4.png');
this.load.image('crate', 'assets/sprites/crate.png');
}
create ()
{
// Store the score and lives in the Game Registry
this.registry.set('score', this.score);
this.registry.set('lives', this.lives);
this.add.image(400, 300, 'bg');
for (let i = 0; i < 64; i++)
{
let x = Phaser.Math.Between(0, 800);
let y = Phaser.Math.Between(0, 600);
let box = this.add.image(x, y, 'crate').setInteractive();
if (i % 2)
{
box.setTint(0xff0000);
}
}
this.input.on('gameobjectup', this.clickHandler, this);
}
clickHandler (pointer, box)
{
if (this.lives === 0)
{
return;
}
// Disable our box
box.input.enabled = false;
box.setVisible(false);
// If the box was tinted red, you lose a life
if (box.tintTopLeft === 16711680)
{
this.lives--;
this.registry.set('lives', this.lives);
}
else
{
this.score++;
this.registry.set('score', this.score);
}
}
}
class SceneB extends Phaser.Scene {
constructor ()
{
super({ key: 'UIScene', active: true });
this.scoreText;
this.livesText;
}
create ()
{
// Our Text object to display the Score
this.scoreText = this.add.text(10, 10, 'Score: 0', { font: '32px Arial', fill: '#000000' });
this.livesText = this.add.text(10, 48, 'Lives: 6', { font: '32px Arial', fill: '#000000' });
// Check the Registry and hit our callback every time the 'score' value is updated
this.registry.events.on('changedata', this.updateData, this);
}
updateData (parent, key, data)
{
if (key === 'score')
{
this.scoreText.setText('Score: ' + data);
}
else if (key === 'lives')
{
this.livesText.setText('Lives: ' + data);
}
}
}
let config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'game-container',
scene: [ SceneA, SceneB ]
};
let game = new Phaser.Game(config);