效果圖
物件池 Object Pool
scene.js
/// <reference path="../../libs/phaser/phaser.min.js"/>
`use strict`;
var BootScene = new Phaser.Class({
Extends: Phaser.Scene,
initialize: function BootScene() {
Phaser.Scene.call(this, {
key: `Boot`,
active: true // listening resize event;
});
},
init: function () {
console.log(`init bootscene`);
this.particles = {};
},
preload: function () {
this.load.image(`sky`, `assets/space.jpg`);
this.load.spritesheet(`explode`,`assets/explode.png`,{frameWidth:128,frameHeight:128})
},
create: function () {
// this.sound.play(`hitbomb`);
this.background = this.add.sprite(0, 0, `sky`).setOrigin(0, 0);
this.createExplode();
},
update:function(){
// console.log(`bootscene update`);
},
createExplode:function(){
//* single image;
// this.add.sprite(200,200,`explode`,10);
this.anims.create({
key: `explodeAnimation`,
frames: this.anims.generateFrameNumbers(`explode`, { start: 0, end: 16, first: 0 }),
frameRate: 25,
repeat: 0
});
//* pool group
this.exploadGroup = this.add.group();
this.time.addEvent({
delay: 2500, //
repeat: -1,
callbackScope: this,
callback: this.spawnRandomExplode
});
},
spawnRandomExplode:function(){
let x = Phaser.Math.Between(10, this.sys.game.config.width);
let y = Phaser.Math.Between(10,this.sys.game.config.height);
// this.add.sprite(x,y,`explode`).setScale(0.7).play(`explodeAnimation`);
let singleExplode = this.exploadGroup.get(x,y,`explode`); //* get to pool instead of create
singleExplode.setScale(0.7).play(`explodeAnimation`); //* play animation;
singleExplode.setActive(true);
singleExplode.setVisible(true);
// explosion lifespan
this.explosionTimeEvent = this.time.addEvent({
delay: 600, // delay 5s 刪除 this.bomb;
repeat: 0,
callbackScope: this,
callback:function(){
this.exploadGroup.killAndHide(singleExplode);
//* this.explosionTimeEvent.remove(false);
}
});
},
});
效果預覽地址：http://www.iFIERO.com/uploads/phaserjs3/RandomBombEffect
更多遊戲教學：http://www.iFIERO.com — 為遊戲開發深感自豪