[SOLVED] Animations fail when switching back and forth between scenes

Phaser 3
1

I am building a browser game using Phaser 3. I’ve already built the game using Phaser 2, but I am coming back to it to update it to Phaser 3.
My issue lies in scene switching. I have a title screen and a credits screen which I want to switch between when I click certain text on screen. The game starts on the title screen scene and switching to the credits scene works fine. However, when I try to change back to title screen scene, I get the following error:
image
I am really stuck on what could be causing this. The same animation plays fine when the title screen loads the first time…

Here’s a snippet of my title scene:

class Title extends Phaser.Scene {
	constructor() {
		super("gameTitle");
	}

	preload() {
		this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js');
	}

	create() {
		this.background = this.add.image(0,0,"titleScreen");
		this.background.setOrigin(0,0);
		
		//start button
		this.pressStart = this.add.sprite(config.width/2, 350, "start");
		this.pressStart.setScale(1.5);
		this.anims.create({
			key:"blink",
			frames: this.anims.generateFrameNumbers('start',{
				start: 0,
				end: 1
			}),
			frameRate: 2,
			repeat: -1
		});
		this.pressStart.setInteractive();
		
		//credits text
		this.creditsLabel = this.add.text(config.width/2, 565, "[credits]", {font:"25px Arial", fill: "yellow"}).setInteractive();
		this.creditsLabel.on('pointerdown', function (event) {
			// ...
			console.log("Title to credits");
			this.scene.start('credits');
		  }, this);
	    }

    	update() {
//this is where the console tells me the error lies
    		this.pressStart.anims.play('blink',true);
    	}
}

Here’s a snippet of my credits scene:

class Credits extends Phaser.Scene {
	constructor() {
		super('credits');
	}


	create() {
    //background
    this.creditsBg = this.add.image(0,0,"creditsBg");
    this.creditsBg.setOrigin(0,0);

//credits sprites and labels were here

//back
this.backLabel = this.add.text(config.width/2, 565, ("[back]"), {
  font: "48px Arial",
  fill: "#ffffff",
  align: "center"
}).setOrigin(0.5,0).setInteractive();
this.backLabel.on('pointerdown', function (event) {
  console.log("Credits to title");
  this.scene.start('gameTitle');
		  }, this);
	}
}

any help would be appreciated

2

oh yeah, my scenes are loaded in the following way in game.js:

var config = {
  type: Phaser.AUTO,
  mode:Phaser.Scale.FIT,
  width: 1024,
  height: 640,
  backgroundColor: 0x000000,
  scene:[Boot, Title, Credits],
  pixelArt: true,
};

var game = new Phaser.Game(config);
3

UPDATE:
I removed the animation on the title screen. Now switching back and forth between the scenes works just fine and the animations in the credits scene work just fine… which makes this problem even more odd. Maybe it’s something to do with the way I wrote the animation on the title screen.

I’ll keep at it unless anyone else has any tips

4

Hey PandaJam, a couple things should probably be changed. First, the code below creates and caches the animation, so this code should only be called once and never again. I would suggest putting this in a boot or preload scene.

this.anims.create({
			key:"blink",
			frames: this.anims.generateFrameNumbers('start',{
				start: 0,
				end: 1
			}),
			frameRate: 2,
			repeat: -1
		});

Second, the below code plays the animation in its’ own update loop, so you don’t need to call this on update.
this.pressStart.anims.play('blink',true);

1 Like
5

Ah! That worked! I moved the anims.play bit in the create() part and it now works without fail!
Thank you for the heads up about the animation update loops. I must still be working on Phaser 2 terms out of habit :sweat_smile: