我在代码中的50多个随机位置创建了一个精灵，只有最后一个精灵有动画.我怎样才能把它们都做成动画呢? &

Question

我在代码中的50多个随机位置创建了一个精灵，只有最后一个精灵有动画。我正在尝试创造一款地下城爬行游戏，我不想为游戏的一个方面初始化50个不同的精灵。

我用this.spikes = this.physics.add.sprite(drawX, drawY, "spikes");在循环中创建超过50个随机位置，然后在更新函数中，我尝试了this.spikes.anims.play("spikes",true);。我在这里附上了我所有的代码。

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

Answer 1

我认为尖峰不起作用。问题是您正在调用组上的play函数。，根据您的版本，当前函数名称是playAnimation

解决方法是删除update函数中的this.spikes.anims.play("spikes", true);行，并在create函数

中添加这行

this.spikes.playAnimation('spikes');

这应该可以解决问题，如果问题与spike精灵有关。

更新:

1. 创建this.spikes为Group

   ...
   this.spikes = this.physics.add.staticGroup();
   ...
   

2. 并更改行:

   this.spikes = this.physics.add.sprite(drawX, drawY, "spikes");
   

   this.spikes.create(drawX, drawY, "spikes");
   

3. 然后在create函数的末尾添加playAnimation调用

   this.spikes.playAnimation('spikes');