美文网首页
Phaser3 对象池随机产生炸弹并销毁 -- HTML网游教程

Phaser3 对象池随机产生炸弹并销毁 -- HTML网游教程

作者: 布袋的世界 | 来源:发表于2018-11-09 15:55 被阅读107次
    效果图 对象池 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 -- 为游戏开发深感自豪

    相关文章

      网友评论

          本文标题:Phaser3 对象池随机产生炸弹并销毁 -- HTML网游教程

          本文链接:https://www.haomeiwen.com/subject/eesoxqtx.html