phaser3における爆発のエフェクトを理解したい
解決したいこと
phaser3で作成されたシューティングゲームで、explosion（爆発）のエフェクトがどのようにできているか知りたいです。
Githubに公開されているシューティングゲームのソースコードを元にゲーム開発を勉強しています。
爆発のエフェクトをデザインしたいと思っているのですが、そもそも爆発がどのように作成されているかがわかりません。
発生している問題
こちらのソースコードをgit cloneして利用しています。
https://github.com/phalado/JS-Capstone!
爆発場面の載ったGIFです。
以下の横長の画像を動かしているのはわかるのですが、その方法が知りたいです。（content内のsprExplosion.pngです）
以下は関係がありそうな部分です。
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 }),
};
どのように爆発を作っているのか、どなたかご教授いただけますと幸いです。
0
