phaserで横長の画像がアニメーションになる原理を知りたい
解決したいこと
この↑の横長の画像を↓の動画のようなアニメーションにする方法を知りたい。
発生している問題・エラー
こちらのソースコードをgit cloneして利用しています。
https://github.com/phalado/JS-Capstone!
該当するソースコード
以下は関係がありそうな部分です。
Entities.js 内
import Phaser from 'phaser';
class Entity extends Phaser.GameObjects.Sprite {
constructor(scene, x, y, key, type) {
super(scene, x, y, key);
this.scene = scene;
this.scene.add.existing(this);
this.scene.physics.world.enableBody(this, 0);
this.setData('type', type);
this.setData('isDead', false);
}
explode(canDestroy) {
if (!this.getData('isDead')) {
this.setTexture('sprExplosion');
this.setData('score', 0);
this.play('sprExplosion');
const sound = Phaser.Math.Between(0, this.scene.sfx.explosions.length - 1);
this.scene.sfx.explosions[sound].play();
if (this.shootTimer !== undefined) {
if (this.shootTimer) {
this.shootTimer.remove(false);
}
}
this.setAngle(0);
this.body.setVelocity(0, 0);
this.on('animationcomplete', () => {
if (canDestroy) {
this.destroy();
} else {
this.setVisible(false);
}
}, this);
this.setData('isDead', true);
}
}
}
export default Entity;
SceneMain.js 内
preload() {
this.load.image('sprBg0', 'content/sprBg0.png');
this.load.image('sprBg1', 'content/sprBg1.png');
this.load.image('deathStar', 'content/deathStar.png');
this.load.spritesheet('sprExplosion', 'content/sprExplosion.png', {
frameWidth: 32,
frameHeight: 32,
});
this.anims.create({
key: 'sprExplosion',
frames: this.anims.generateFrameNumbers('sprExplosion'),
frameRate: 20,
repeat: 0,
});
this.anims.create({
key: 'sprPlayer',
frames: this.anims.generateFrameNumbers('sprPlayer'),
frameRate: 20,
repeat: -1,
});
this.sfx = {
explosions: [
this.sound.add('sndExplode0', { volume: 0.1 }),
this.sound.add('sndExplode1', { volume: 0.1 }),
],
laser: this.sound.add('sndLaser', { volume: 0.1 }),
r2d2Scream: this.sound.add('r2d2Scream', { volume: 0.1 }),
useForce: this.sound.add('useForce', { volume: 0.3 }),
vaderBreath: this.sound.add('vaderBreath', { volume: 0.1 }),
};
自分で試したこと
前回の質問で、[this.play('sprExplosion');]でアニメーションしているのはわかったのですが、そのドキュメントやソースコードを読んでも、「どのようにして横長の画像があのアニメーションになっているのか」が解明しません。
0 likes