I created a sprite in over 50 random places in my code and only the last sprite has the animation. I am trying to create a dungeon crawler game, and I dont want to initialized 50 different sprites for 1 aspect of the game.
I used this.spikes = this.physics.add.sprite(drawX, drawY, "spikes"); in a loop to create over 50 in random places, then in the update function I tried this.spikes.anims.play("spikes",true);. I have attached all of my code here.
const map = getMap();
//Declare variables at the top of code
let random;
//Create phaser settings
let config = {
type: Phaser.AUTO,
width: 1000,
height: 500,
physics: {
default: 'arcade',
arcade: {
gravity: {
y: 0
},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
//Create phaser game
const game = new Phaser.Game(config);
function preload() {
//Preloading assets needed
this.load.spritesheet("player", "assets/sprites/player.png", {
frameWidth: 16,
frameHeight: 30
});
this.load.spritesheet("spikes", "assets/sprites/spikes.png", {
frameWidth: 16,
frameHeight: 16
});
this.load.image("floor", "assets/tiles/floor.png");
this.load.image("floor_1", "assets/tiles/floor_1.png");
this.load.image("floor_2", "assets/tiles/floor_2.png");
this.load.image("floor_3", "assets/tiles/floor_3.png");
this.load.image("floor_4", "assets/tiles/floor_4.png");
this.load.image("floor_5", "assets/tiles/floor_5.png");
this.load.image("floor_6", "assets/tiles/floor_6.png");
this.load.image("floor_7", "assets/tiles/floor_7.png");
this.load.image("wallLeft", "assets/tiles/wallLeft.png");
this.load.image("wallRight", "assets/tiles/wallRight.png");
this.load.image("wallBottom", "assets/tiles/wallBottom.png");
this.load.image("wallTop", "assets/tiles/wallTop.png");
this.load.image("bg", "assets/tiles/bg.png");
}
function create() {
//Spawn player with restrictions
this.cameras.main.setBackgroundColor('#ffffff');
this.spawnPlayer = (x, y) => {
this.player = this.physics.add.sprite(x, y, "player");
this.player.body.setGravityY(0);
this.physics.add.collider(this.player, this.wall);
this.cameras.main.startFollow(this.player);
this.cameras.main.setZoom(2);
this.player.score = 0;
this.scoreText = this.add.text(0, 0, "Score: " + this.player.score, {
fill: "#000000",
fontSize: "20px",
fontFamily: "Arial Black"
}).setScrollFactor(0);
};
//Declare Static objects
this.wall = this.physics.add.staticGroup();
this.bg = this.physics.add.staticGroup();
this.floor = this.physics.add.staticGroup();
//Generate Map
let mapArr = map.split('.');
let drawX = 0;
let drawY = 0;
mapArr.forEach(row => {
drawX = 0;
for (let a = 0; a < row.length; a++) {
random = Math.floor(Math.random() * (15 - 0) + 1);
if (row.charAt(a) == 0) {
this.bg.create(drawX, drawY, "bg");
} else if (row.charAt(a) == 1) {
this.floor.create(drawX, drawY, "floor");
this.spawnPlayer(drawX, drawY);
} else if (row.charAt(a) == 7) {
if (random == 1) {
this.floor.create(drawX, drawY, "floor_1");
} else if (random == 2) {
this.floor.create(drawX, drawY, "floor_2");
} else if (random == 3) {
this.floor.create(drawX, drawY, "floor_3");
} else if (random == 4) {
this.floor.create(drawX, drawY, "floor_4");
} else if (random == 5) {
this.floor.create(drawX, drawY, "floor_5");
} else if (random == 6) {
this.floor.create(drawX, drawY, "floor_6");
} else if (random == 7) {
this.floor.create(drawX, drawY, "floor_7");
} else if (random == 8) {
this.spikes = this.physics.add.sprite(drawX, drawY, "spikes");
} else {
this.floor.create(drawX, drawY, "floor");
}
} else if (row.charAt(a) == 8) {
this.wall.create(drawX, drawY, "wallBottom");
} else if (row.charAt(a) == 9) {
this.wall.create(drawX, drawY, "wallTop");
} else if (row.charAt(a) == 6) {
this.wall.create(drawX, drawY, "wallRight");
} else if (row.charAt(a) == 5) {
this.wall.create(drawX, drawY, "wallLeft");
} else if (row.charAt(a) == 4) {
this.floor.create(drawX, drawY, "floor");
}
drawX += 16;
}
drawY += 16;
});
//Generate player above map images
this.player.depth = 100;
//Create animations
this.anims.create({
key: "walk",
frames: this.anims.generateFrameNumbers('player', {
start: 4,
end: 7,
first: 4
}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: "stand",
frames: this.anims.generateFrameNumbers('player', {
start: 0,
end: 3,
first: 0
}),
frameRate: 1,
repeat: -1
});
this.anims.create({
key: "spikes",
frames: this.anims.generateFrameNumbers('spikes', {
start: 0,
end: 3,
first: 0
}),
frameRate: 1,
repeat: -1
});
//Declare Keys used in game
this.key_W = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
this.key_A = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
this.key_S = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
this.key_D = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
this.key_Q = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q);
}
function update() {
//Apply animations
this.spikes.anims.play("spikes", true);
//Moving player
if (this.key_A.isDown) {
this.player.setVelocityX(-200);
this.player.anims.play("walk", true);
this.player.flipX = true;
} else if (this.key_D.isDown) {
this.player.setVelocityX(200);
this.player.anims.play("walk", true);
this.player.flipX = false;
} else if (this.key_W.isDown) {
this.player.setVelocityY(-200);
this.player.anims.play("walk", true);
} else if (this.key_S.isDown) {
this.player.setVelocityY(200);
this.player.anims.play("walk", true);
} else {
this.player.anims.play("stand", true);
this.player.setVelocityX(0);
this.player.setVelocityY(0);
}
}
//END OF GAME
