Drop items every 2seconds & clear it 10 seconds later

Phaser 3
1

I want to drop items ( stars ) every 5 seconds, (this is working) and clear all the stars a few seconds later…

timedEvent = this.time.addEvent({ delay: 2000, callback: dropStars, callbackScope: this, loop: true });
timedEvent2 = this.time.addEvent({ delay: 4000, callback: clearStars, callbackScope: this, loop: true });

This works at times but not every time , sometimes , there was no collision and the stars falls off the screen …

What is the correct ways to clear the drop items, I use stars.clear() …

Detail codes and functions at link below :-

https://pastebin.com/7RDE4qa1

2

Hey Stanley, one way to remove the stars completely from your scene after they have fallen is to call the .clear() function, but also make sure you pass in true for both of the arguments. The first argument removes it from the scene and the second one destroys the child.

So simply change stars.clear() to stars.clear(true, true)

3

Thanks for the pointer on clear(true true)…

It is still not working …

Is there a similar JS setInterval() functions I can use to periodically clear all the stars in update() ?

4

So I looked over your code and the gist of why this doesn’t work is that:

  1. in your create function, you should create the stars group
  2. in createStars, call stars.create(...)

Minimal implementation:

var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    backgroundColor: '#7d7d7d',
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics: {
        default: 'arcade',
    },
};

const game = new Phaser.Game(config);


function preload() {
    this.load.image('star', 'assets/sprites/aqua_ball.png');
    this.load.image('tomato', 'assets/sprites/tomato.png');
}
 
function create() {
 
timedEvent = this.time.addEvent({ delay: 2000, callback: dropStars, callbackScope: this, loop: true });
timedEvent2 = this.time.addEvent({ delay: 4000, callback: clearStars, callbackScope: this, loop: true });

this.player = this.physics.add.sprite(5,5, 'star');
this.stars = this.physics.add.group({defaultKey: 'tomato'})
this.physics.add.overlap(this.player, this.stars,collectStars, null, this );
}  
 
 
function collectStars(player, stars) {
    //TODO: add your code here
}
 
function dropStars ()
{
    this.stars.createMultiple({
        key: 'tomato',
        repeat: 20,
        setXY: { x: 0, y: Phaser.Math.Between(0, 200), stepX: Phaser.Math.Between(100, 400) }
    })
// not entirely sure what this is for
// game.physics.add.collider(platformLayer, stars);
// game.physics.add.collider(groundLayer, stars);
 
}
 
function clearStars() {
    this.stars.clear(true,true);
}
 
function update() {}
5

Thanks it is now working…

What is the differences between stars ( global variables) vs this.stars ??

player = this.physics.add.sprite(200, 200, 'player');
player.setBounce(0.1); // our player will bounce from items

vs

this.player = this.physics.add.sprite(200, 200, 'player');
this.player.setBounce(0.1); // our player will bounce from items

This part confuses me a bit …
Is there an article I can read about “this” ??

6

To have an adequate understanding of this, I’d recommend You don’t know JS: this & object prototypes, and its predecessor, You don’t know JS: Scope and Closures.

Mind you, these are relatively long books, but spending time on them is worth it.

As for your question on global stars and this.stars, I think you can find your answer by thinking about a project as you add more features. Suppose you have 10-20 Scenes and different groups. How would using globals feel in such a project?