xxxxxxxxxx
var Menu = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function Menu ()
{
Phaser.Scene.call(this, 'menu');
},
create: function ()
{
this.add.text(10, 10, 'Press 1, 2 or 3', { font: '16px Courier', fill: '#00ff00' });
this.input.keyboard.once('keyup-ONE', function () {
this.scene.start('demo', { id: 0, image: 'acryl-bladerunner.png' });
}, this);
this.input.keyboard.once('keyup-TWO', function () {
this.scene.start('demo', { id: 1, image: 'babar-phaleon-coco.png' });
}, this);
this.input.keyboard.once('keyup-THREE', function () {
this.scene.start('demo', { id: 2, image: 'babar-pym-wait.png' });
}, this);
this.events.on('shutdown', this.shutdown, this);
},
shutdown: function ()
{
// We need to clear keyboard events, or they'll stack up when the Menu is re-run
this.input.keyboard.shutdown();
}
});
var Demo = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function Demo ()
{
Phaser.Scene.call(this, { key: 'demo' });
},
init: function (data)
{
console.log('init', data);
this.imageID = data.id;
this.imageFile = data.image;
},
preload: function ()
{
this.load.image('pic' + this.imageID, 'assets/pics/' + this.imageFile);
},
create: function ()
{
this.add.text(10, 10, 'Click to Return', { font: '16px Courier', fill: '#00ff00' });
this.add.image(400, 300, 'pic' + this.imageID).setScale(2);
this.input.once('pointerup', function () {
this.scene.start('menu');
}, this);
}
});
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d8d',
pixelArt: true,
parent: 'phaser-example',
scene: [ Menu, Demo ]
};
var game = new Phaser.Game(config);
xxxxxxxxxx
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.spritesheet('mummy', 'assets/animations/mummy37x45.png', { frameWidth: 37, frameHeight: 45 });
}
create ()
{
// Frame debug view
this.frameView = this.add.graphics({ fillStyle: { color: 0xff00ff }, x: 32, y: 32 });
// Show the whole animation sheet
this.add.image(32, 32, 'mummy', '__BASE').setOrigin(0);
const config = {
key: 'walk',
frames: this.anims.generateFrameNumbers('mummy'),
frameRate: 6,
yoyo: false,
repeat: -1
};
this.anim = this.anims.create(config);
this.sprite = this.add.sprite(400, 250, 'mummy').setScale(4);
// Debug text
this.progress = this.add.text(100, 420, 'Progress: 0%', { color: '#00ff00' });
this.input.keyboard.on('keydown-SPACE', function (event) {
this.sprite.play('walk');
}, this);
this.input.keyboard.on('keydown-Y', function (event) {
this.sprite.anims.yoyo = !this.sprite.anims.yoyo;
}, this);
this.input.keyboard.on('keydown-Q', function (event) {
this.sprite.playReverse('walk');
}, this);
this.input.keyboard.on('keydown-R', function (event) {
this.sprite.anims.reverse();
}, this);
this.input.keyboard.on('keydown-P', function (event) {
if (this.sprite.anims.isPaused)
{
this.sprite.anims.resume();
}
else
{
this.sprite.anims.pause();
}
}, this);
}
update ()
{
this.updateFrameView();
const debug = [
'SPACE to play the animation, Q to play reverse,',
'R to revert at any time, P to pause/resume,',
'Y to toggle yoyo',
'',
'Yoyo: ' + this.sprite.anims.yoyo,
'Reverse: ' + this.sprite.anims.inReverse,
'Progress: ' + this.sprite.anims.getProgress() * 100 + '%',
'Accumulator: ' + this.sprite.anims.accumulator,
'NextTick: ' + this.sprite.anims.nextTick
];
this.progress.setText(debug);
}
updateFrameView ()
{
if (this.sprite.anims.isPlaying)
{
this.frameView.clear();
this.frameView.fillRect(this.sprite.frame.cutX, 0, 37, 45);
}
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#4d4d4d',
pixelArt: true,
scene: [ Example ]
};
const game = new Phaser.Game(config);
xxxxxxxxxx
class Example extends Phaser.Scene
{
constructor ()
{
super();
}
preload ()
{
this.load.spritesheet('mummy', 'assets/animations/mummy37x45.png', { frameWidth: 37, frameHeight: 45 });
}
create ()
{
// Frame debug view
this.frameView = this.add.graphics({ fillStyle: { color: 0xff00ff }, x: 32, y: 32 });
// Show the whole animation sheet
this.add.image(32, 32, 'mummy', '__BASE').setOrigin(0);
const config = {
key: 'walk',
frames: this.anims.generateFrameNumbers('mummy'),
frameRate: 6,
yoyo: false,
repeat: -1
};
this.anim = this.anims.create(config);
this.sprite = this.add.sprite(400, 250, 'mummy').setScale(4);
// Debug text
this.progress = this.add.text(100, 420, 'Progress: 0%', { color: '#00ff00' });
this.input.keyboard.on('keydown-SPACE', function (event) {
this.sprite.play('walk');
}, this);
this.input.keyboard.on('keydown-Y', function (event) {
this.sprite.anims.yoyo = !this.sprite.anims.yoyo;
}, this);
this.input.keyboard.on('keydown-Q', function (event) {
this.sprite.playReverse('walk');
}, this);
this.input.keyboard.on('keydown-R', function (event) {
this.sprite.anims.reverse();
}, this);
this.input.keyboard.on('keydown-P', function (event) {
if (this.sprite.anims.isPaused)
{
this.sprite.anims.resume();
}
else
{
this.sprite.anims.pause();
}
}, this);
}
update ()
{
this.updateFrameView();
const debug = [
'SPACE to play the animation, Q to play reverse,',
'R to revert at any time, P to pause/resume,',
'Y to toggle yoyo',
'',
'Yoyo: ' + this.sprite.anims.yoyo,
'Reverse: ' + this.sprite.anims.inReverse,
'Progress: ' + this.sprite.anims.getProgress() * 100 + '%',
'Accumulator: ' + this.sprite.anims.accumulator,
'NextTick: ' + this.sprite.anims.nextTick
];
this.progress.setText(debug);
}
updateFrameView ()
{
if (this.sprite.anims.isPlaying)
{
this.frameView.clear();
this.frameView.fillRect(this.sprite.frame.cutX, 0, 37, 45);
}
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#4d4d4d',
pixelArt: true,
scene: [ Example ]
};
const game = new Phaser.Game(config);