Kill spirte if its out of canvas

[qvintusgud]

Hi, 

 

I'm trying to make a game where you will try to collect point by clicking on some icons. 

in the create function I have have this part to generate new icons 

timedDiamond = this.time.addEvent({
  delay: Phaser.Math.Between(600, 6000),
  callback: this.newDiamond,
  callbackScope: this,
  loop: true
});

And the newDiamond function looks like this

newDiamond(){
  
  const z = Phaser.Math.FloatBetween(0.4, 1.8);
  const rand = Math.floor(Math.random() * Math.floor(4));
  let diamondX;
  let diamondY;
  let diamondVelocityX;
  let diamondVelocityY;

  if(rand == 0){
    diamondX =  Phaser.Math.Between(0, canvasWidth); 
    diamondY = -10; 
    if (diamondX > (canvasWidth/2)){
      diamondVelocityX = -100;
    } else {
      diamondVelocityX = 100;
    }
    diamondVelocityY = -200;

  } else if ( rand == 1){
      diamondX =  -10; 
      diamondY = Phaser.Math.Between(0, canvasHeight);
    if (diamondX > (canvasWidth/2)){
      diamondVelocityX = -100;
    } else {
      diamondVelocityX = 100;
    }
    diamondVelocityY = -200;
  } else if ( rand == 2){
      diamondX =  Phaser.Math.Between(0, canvasWidth); 
      diamondY = canvasHeight+10; 
    if (diamondX > (canvasWidth/2)){
      diamondVelocityX = -100;
    } else {
      diamondVelocityX = 100;
    }
    diamondVelocityY = -200;
  } else if ( rand == 3){
    diamondX =  canvasWidth+10; 
    diamondY = Phaser.Math.Between(0, canvasHeight);
    if (diamondX > (canvasWidth/2)){
      diamondVelocityX = -100;
    } else {
      diamondVelocityX = 100;
    }
    diamondVelocityY = -200;
  }

  let diamond = this.physics.add.sprite(diamondX, diamondY, 'diamant').setScale(z);
  
  diamond.setVelocityX(diamondVelocityX);
  diamond.setVelocityY(diamondVelocityY);
  diamond.setAngularVelocity(300);
  diamond.setInteractive();
  diamond.on('pointerdown', function(pointer){
    this.scene.hitDiamond(diamond);
  });
}

 

 

How can I remove icons if they are out of the canvas? I guess it running slow after a while because its to many icons? 

sorry for my english, but let me now if the question needs to be explained better :) 

 

best regard, 

 

 

[iKest]

just look for outOfBounds in physics arcade and pool in gameObject groups examples on labs.phaser.io

[qvintusgud]

hi, do you mean I should find it somewhere here? http://labs.phaser.io/index.html?dir=physics/arcade/&q= 

I tried to use the search function and searched for outOfBounds but I can't find anything?

[iKest]

http://labs.phaser.io/edit.html?src=src\physics\arcade\world bounds event.js

 

[qvintusgud]

Okay, in that example it looks like it have a 48 balls and those have physics to bounce when they hit the end of the world. 

What I trying to do is an infinite loop that create  new balls randomly, and when they going under canvas height I would like them to disappear.

Because of the game running slower after a while I think that all objects still are in the memory and needs to be removed

[iKest]

http://labs.phaser.io/index.html?dir=pools/&q=

[qvintusgud]

Sweet I tried to modify the code a little bit, 

But I get some problem when the first object is set to false ( this.setActive(false); this.setVisible(false); ) I cant create new objects anymore, 

Any ideas why? 

Here is my new code:

let evils;
let info;
let bg;
let canvasHeight;

class GameScene extends Phaser.Scene {
  constructor(){
    super({
      key: 'GameScene'
    });
  }

  preload () {

    bg = this.add.image(400, 300, 'sky');
    bg.setInteractive();


    this.load.image('ship', 'assets/evil.png');
  }

  create () {
    canvasHeight = this.sys.canvas.height;
    let Evil = new Phaser.Class({

      Extends: Phaser.GameObjects.Image,

      initialize:

      function Evil (scene)
      {
        console.log('fire evil');
        Phaser.GameObjects.Image.call(this, scene, 400 ,400, 'ship');

        this.speed = Phaser.Math.GetSpeed(500, 1);
      },
      fire: function(x, y)
      {
        this.setPosition(x, y - 50);

        this.setActive(true);
        this.setVisible(true);
      },
      update: function(time, delta)
      {
        this.y += .1 * delta;

        if (this.y < -50 || this.y > (canvasHeight + 50))
        {
         this.setActive(false);this.setVisible(false);
        }
      }

    });

    evils = this.add.group({
      classType: Evil,
      maxSize: 300,
      runChildUpdate: true
    });

    info = this.add.text(0, 300, 'Click to add objects', { fill: '#00ff00' });
    bg.on('pointerdown', function(pointer){
      let evil = evils.get();
    });
  }

  update (time, delta){


    info.setText([
      'Used: ' + evils.getTotalUsed(),
      'Free: ' + evils.getTotalFree()
    ]);

  }

}

export default GameScene;

 

 

[qvintusgud]

Think I solved it Forgot to use fire to make new ones