Returning to Scenes: How To Stop this.anims.create attempting to create duplicate keys?

[AdamRyanGameDev]

I am having some problems with my sprite animations as I move between scenes.

Each scene ran ok until I returned to it

On my first playthrough, when i returned to the scene i was informed, via console.log, that the various animations' keys "were undefined or already in use"

(so after using the github docs (....docs/animations_AnimationManager.js.html) I added the if config.key || this.anims.has(key) check. 

However  it does not play and my console.log now outputs the following RED ERROR:

Uncaught TypeError: Cannot read property 'getFirstTick' of null
    at initialize.play (phaser.min.js:1)
    at initialize.play (phaser.min.js:1)
    at scene1.create (PHASER3codePrinter.php:57)
    at initialize.create (phaser.min.js:1)
    at initialize.loadComplete (phaser.min.js:1)
    at initialize.h.emit (phaser.min.js:1)
    at initialize.processComplete (phaser.min.js:1)
    at initialize.removeFromQueue (phaser.min.js:1)
    at initialize.processUpdate (phaser.min.js:1)
    at Image.data.onload (phaser.min.js:1)

Here is my code in create()

create(){...
if (!config.selectable2ANIMS0 || this.anims.has(config.selectable2ANIMS0)){ 
    var skip = 1;
}else{ this.anims.create({
	key: 'selectable2ANIMS0',
	frames: [
		{ key: 'selectable2ANIMATION0'},
		{ key: 'selectable2ANIMATION1'},
		{ key: 'selectable2ANIMATION2'},
		{ key: 'selectable2ANIMATION3'},
		{ key: 'selectable2ANIMATION4'},
	],
	frameRate: 8.0,
	repeat: -1
  });
}
selectable2 =this.add.sprite(51.5, 61, 'selectable2').play('selectable2ANIMS0');
						
...}

Here is my scene calling (proof of concept for checking scenes)

this.input.keyboard.on('keyup',function(e){
	
		if(e.key=='1'){
			this.scene.start('scene1');
		}
		if(e.key=='2'){
			this.scene.start('scene2');
		}
		
		if(e.key=='3'){
			this.scene.start('scene3');
		}
		if(e.key=='4'){
			this.scene.start('scene4');
		}
		if(e.key=='5'){
			this.scene.start('scene5');
		}
	},this);}

 

Anyone got any ideas?

[rich]

There are a couple options. First, I would create the animations as part of your Preload process. Animations are global, retained between Scenes, and only need making once. So I've been making mine during preload (which I never return to)

However, if you need to have the creation code in a Scene you're going back to, then you're on the right track with the code above, but `anims.has()` takes a string-based key, not the Animation itself, as its parameter. Also, it's a method of the 'anims' Map, which means you'd need to do something like 'this.anims.anims.has(string)' - alternatively, it's probably easier to do 'this.anims.get(string)' and if it returns undefined then no animation exists.

[AdamRyanGameDev]

Thanks Rich! 

Keep up the great work!

 

[AdamRyanGameDev]

Hmm playing around and tried to move the create() to preload, as so:

preload(){...

//load images
this.load.image('sprite48ANIMATION0', 'media/jake1.png');
this.load.image('sprite48ANIMATION1', 'media/jake2.png');
this.load.image('sprite48ANIMATION2', 'media/jake3.png');
this.load.image('sprite48ANIMATION3', 'media/jake4.png');
this.load.image('sprite48ANIMATION4', 'media/jake5.png')

//create
this.anims.create({
        key: 'sprite48ANIMS3',
        frames: [
             { key: 'sprite48ANIMATION0'},
              { key: 'sprite48ANIMATION1'},
              { key: 'sprite48ANIMATION2'},
              { key: 'sprite48ANIMATION3'},
              { key: 'sprite48ANIMATION4'},
        ],
        frameRate: 10.0,
        repeat: -1
});

...}

 

but I got a console.log

phaser.min.js:1 Uncaught TypeError: Cannot read property 'texture' of undefined

any ideas?

[rich]

Sorry I meant that I create my animations in my Preloader Scene, which is a Scene dedicated entirely to preloading assets and setting up animations at the beginning of the game.Then I move to the next Scene after this (which in my case is a MainMenu, but what it is doesn't matter)

[AdamRyanGameDev]

AH ok! I thought it was a tad strange (that-s why i included load images to show it was before create!) ha ha

Thanks again!

[Adrock42]

@AdamRyanGameDev You can remove animations as part of a clean up function before leaving a scene.  It's the best way I've got to work so far.  

this.anims.remove(key);

@rich, Can you give an example of making a preloader scene.  

[JesusJoseph]

The best way is to set the animation in the preload Scene as @rich mentioned. This way we are not creating the animation every time the scene load.

Please note that we need to create the animation inside the create function inside Preload and not inside preload function

 

[samme]

It's just any scene that runs exactly once and loads the animation's assets.

https://github.com/samme/kristal-quest/blob/84a246e5b1d5e5dc2295cdb9eb26986172313ef6/app.js#L262

[Flowan]

On 5/19/2018 at 1:27 AM, JesusJoseph said:

Please note that we need to create the animation inside the create function inside Preload and not inside preload function

 

I couldn't get this working. Thank you for this answer, very useful. Solved my issue.