Prototype spritesheet strange behaviour texture replace another, why?

Phaser 3
1

hi,

I made a simple class Sprite with an animation of spritesheet.

https://jsfiddle.net/espace3d/e7xdtv4m/39/

I have 2 objects : ambulance and police, the texture are joined to this post.

ambulance

police

When i create my objects, i wait 1000 before play the spritesheet and the problem is that the “police texture” supplant the “ambulance texture”…

Why ? Could you help me please ?

Thanks in advance.

var police;
var ambulance;

class Sprite extends Phaser.GameObjects.Sprite {
	constructor (scene,x,y,texture)
	{
		super(scene, x, y,texture);
            this.texture=texture
            this.scene.anims.create({
			key: 'pinpon',
			frames: this.scene.anims.generateFrameNumbers(this.texture, {frames:[0,0,1,1]}),
			frameRate: 8,
			repeat: -1,
	});
       setTimeout(()=>{this.anim_pinpon()},1000)
    // this.anim_pinpon()
		scene.add.existing(this)
	}
    anim_pinpon(){
      this.anims.play('pinpon')
    }
}

config = {
	type: Phaser.CANVAS,
	width: 400,
	height: 400,
	backgroundColor: '#0d1018',
	physics: {
		default: 'matter',
		matter: {
			debug: true,
			gravity: {
                y: 3
      },
    }
	},
	callbacks: {
		postBoot: function (game) {
		}
	},
	scene: {
		preload: preload,
		create: create,
    update: update,
	}
};

var game = new Phaser.Game(config);

function preload() {
	this.load.spritesheet("police", "https://i.postimg.cc/ZKQQdhKH/police.png",{
       frameWidth: 50,
       frameHeight :50,
  });
	this.load.spritesheet("ambulance", "https://i.postimg.cc/BZYYrGD3/ambulance.png",{
      frameWidth: 50,
      frameHeight :50, 
  });
}

function create() {     
	police = new Sprite(this,100,100,"police")
    ambulance = new Sprite(this,300,100,"ambulance")
}

function update() {
}
2

Hi Im relatively new too Phaser, but are the animations keys global, therefore your overwriting ?
, so by passing the anim key name along with the texture for eg `
police = new Sprite(this,100,100,“police”,poice_anim)
then change the constructor to constructor (scene,x,y,texture,vehicle_type)
then key: vehicle_type and finally this.anims.play(‘vehicle_type’)

2 Likes
3

It works like this :
https://jsfiddle.net/fua4q9kd/

Is that you indicate ?
Good job for your 1st post :wink:

5

and also more simple

https://jsfiddle.net/nfLz2bsd/

6

Well I’m glad I could sort of help :grin: or at least point in the correct direction

7

Remove

this.texture=texture
8

No it didn’t work

9

https://jsfiddle.net/3q9ad681/

10

okay with :

this.setName(texture);

thanks for this tip :slight_smile: