Reset position on falling sprites

Phaser 3
1

I am new to Phaser 3 ( but very excited :slight_smile: )

I am trying to build a very simple “Endless falling” game where the player has to catch the falling good food items ( apples, carrots, burgers, etc. ) and avoid the rotten ones.

I have made the items fall, but I can’t seem to figure out how to set their position to the top of the game screen when they fall of the bottom ( i.e. they are not catched ), to simulate the continuous falling of food until you catch them all ( f.x. 100 items in total )

I have tried with this.physics.world.wrap which seems do to the trick but that make the items start falling from the middle of the game screen instead from the top out of view which is what I want to achieve.

This is what I got so far

gameScene.preload = function () {

  this.load.image('player', 'assets/images/player.png')
  this.load.image('background', 'assets/images/sky.jpg')
  this.load.spritesheet('goodfood', 'assets/images/spritesheet.png', {
    frameWidth: 32,
    frameHeight: 32,
    spacing: 1
  })
}

gameScene.create = function () {

  //Set background
  this.add.image(400, 300, 'background')

  //Set scoretext
  scoreText = this.add.text(16, 16, 'Score: 0', {
    fontSize: '20px',
    fill: '#000'
  })

  //Create sprites
  player = this.physics.add.image(400, 600, 'player')
  player.setCollideWorldBounds(true)

  //Food  

  goodFood = this.physics.add.group()
  goodFood.createMultiple({
    key: 'goodfood',
    frame: Phaser.Utils.Array.NumberArray(0, 3),
    randomFrame: true,
    repeat: 1,
  })

  goodFood.children.iterate((child) => {

    let y = Phaser.Math.Between(-200, -2000)
    let x = Phaser.Math.Between(0, 800)

    child.setY(y)
    child.setX(x)
    child.setMaxVelocity(200)

  })

  this.physics.add.overlap(goodFood, player, this.collectFood)

  //Add arrow key control for the player
  cursors = this.input.keyboard.createCursorKeys()
}

gameScene.update = function (time, delta) {

  if (cursors.left.isDown) {
    player.setVelocityX(-200)
  } else if (cursors.right.isDown) {
    player.setVelocityX(200)
  } else {
    player.setVelocityX(0)
  }
  this.physics.world.wrap(goodFood, 300)

}

gameScene.collectFood = function (player, foodItem) {
  foodItem.disableBody(true, true);

  score += 1
  scoreText.setText('Score: ' + score)

  if (goodFood.countActive() === 0) {
    alert('You won!')
  }

}

Basically I want the food items to drop from top to bottom and then start from the top again at a new random XY positition, at a continuous rate until they are all catched or the player catches one of the rotten food items.

2

Hi,

When the group iterates on each child to set a position, at the same time you can add an update function on each. In this function, the child checks his position and if it falls of the bottom of the screen, its position is changed to the top.
If you do it this way, don’t forget the group must run update on children with runChildUpdate set to true.

3

Thanks :slight_smile:

Can you give me an example on how I can implement this?

4

Later today, from home, I’ll give an example.

5

That will be more than appreciated :slight_smile:

6

This should work with a simple project. Later, with more complex objects you should create your own classes to obtain a cleaner code.
(Yes, maybe you already know all of this but we are not alone on this forum… :wink:)

  //Food  
  
  // We create the group using a GroupConfig object,
  // here the group will run the update method of every child
  goodFood = this.physics.add.group({

    runChildUpdate: true
  });

  goodFood.createMultiple({

    key: 'goodfood',
    frame: Phaser.Utils.Array.NumberArray(0, 3),
    randomFrame: true,
    repeat: 1,
  });

  goodFood.children.iterate((child) => {

    let y = Phaser.Math.Between(-200, -2000)
    let x = Phaser.Math.Between(0, 800)

    child.setY(y)
    child.setX(x)
    child.setMaxVelocity(200)

    // This is run on each child, if it's active.
    // Set a new position as you like
    child.update = function () {

        if (this.y > 600) {this.y = 0;}
    };

  })
7

That works amazingly! :slight_smile:

Thank you!

I can make the code cleaner when the game is fully working! :slight_smile:

8

Interesting, can you share code? @Morten_Jensen :smiley:
I want to try by my own