Adding Objects To Groups

Phaser 3
1

Hey guys I’m making a flappy bird game. I want to spawn pipes. I heard about groups and want to know how to add pipes to make them move and detect collisions with a player sprite.
You don’t need to write all the code need to show small bits of making groups adding and adding collisions to them thanks
Please Do Not Send Me An Example they are tough to understand.

function preload() {
  this.load.spritesheet('player-sheet', 'assets/player-sheet.png', {frameWidth: 16, frameHeight: 16});
  this.load.image('pipe', 'assets/pipe.png');
}        

function create() {
  // GENERAL //

  this.spacebarkey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)

  // this.PLAYER //
  this.player = [];
  this.player.x = 400;
  this.player.y = 300;
  this.player.sprite = this.physics.add.sprite(player.x, player.y, 'player-sheet', 0);
  this.player.sprite.setGravityY(950);

  // PIPES //

  this.pipes = this.add.group();
  
}

function update() {
  // PLAYER //
  if (Phaser.Input.Keyboard.JustDown(this.spacebarkey)) {
    this.player.sprite.setVelocity(0, -500)
  }

  if (this.player.sprite.y < 0 || this.player.sprite.y > config.height) {
    this.scene.restart();
  }
}
2 
this.pipes = this.physics.add.group();

this.pipes.create(0, 0, 'pipe');

this.physics.add.overlap(
  this.player.sprite,
  this.pipes,
  (playerSprite, pipe) => {
    // …
  }
);

Be patient with the examples. Keep trying and you’ll get better at understanding them.

3

how can I add a sprite to ‘pipe’?

4

If you’ve already created a sprite, you can add it to the group:

this.pipes.add(pipe);

Or you can work on the sprite created by the group:

const pipe = this.pipes.create(0, 0, 'pipe');
5

I did that but after I tried to make the pipes move I got this error in phaser.js:1:

Uncaught TypeError: Cannot read properties of undefined (reading 'setCollideWorldBounds')
    at initialize.createCallbackHandler (phaser.js:1:646743)
    at initialize.add (phaser.js:1:241318)
    at initialize.addMultiple (phaser.js:1:241594)
    at initialize [as constructor] (phaser.js:1:238256)
    at new initialize (phaser.js:1:646577)
    at initialize.group (phaser.js:1:642623)
    at initialize.update (game.js:72:37)
    at initialize.step (phaser.js:1:966940)
    at initialize.update (phaser.js:1:954010)
    at initialize.step (phaser.js:1:76119)

here is the code I used

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  backgroundColor: '#4488aa',

  scene: {
    preload: preload,
    create: create,
    update: update
  },

  physics: {
    default: 'arcade',
    arcade: {
        debug: true
    }
  }
};

const game = new Phaser.Game(config);

function preload() {
  this.load.spritesheet('player-sheet', 'assets/player-sheet.png', {frameWidth: 16, frameHeight: 16});
  this.load.image('top-pipe', 'assets/top-pipe.png');
  this.load.image('btm-pipe', 'assets/btm-pipe.png');
}     

function create() {
  // GENERAL //

  this.spacebarkey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)

  // this.PLAYER //
  this.player = [];
  this.player.x = 400;
  this.player.y = 300;

  const jumpAnim = {
    key: 'jump',
    defaultTextureKey: "player-sheet",
    duration: 1,
    frames: [
      {frame: 0, duration: 1 },
      { frame: 1, duration: 50},
      { frame: 2, duration: 75},
      { frame: 1, duration: 20},
      {frame: 0, duration: 1 }

    ]
  };

  this.anims.create(jumpAnim);

  this.player.sprite = this.physics.add.sprite(this.player.x, this.player.y, 'player-sheet', 0);
  this.player.sprite.setScale(4);
  this.player.sprite.smoothed = false;
  this.player.sprite.setGravityY(950);

  // PIPES //

  this.pipes = this.physics.add.group();
}

function update() {
  // PLAYER //
  if (Phaser.Input.Keyboard.JustDown(this.spacebarkey)) {
    this.player.sprite.play("jump", true)
    this.player.sprite.setVelocity(0, -500)

    var twoPipes = this.physics.add.group(this.pipes);
    var yOffset = ((Math.random() - 0.5) * 100) * 2

    twoPipes.create(700, -50, 'top-pipe');
    twoPipes.create(700, 650, 'btm-pipe');

    twoPipes.children.iterate(function(child) {
      child.setScale(4)
      child.setPosition(child.x , child.y + yOffset)
      this.pipes.create(child)
    })

    //this.pipes.create(twoPipes)

  }

  if (this.player.sprite.y < 0 || this.player.sprite.y > config.height) {
    this.scene.restart();
  }

  // Pipes //

  this.pipes.children.iterate(function(pipe) {
    pipe.setPosition(pipe.x - 1, pipe.y);
  });
}
6

This would put a group inside a group, which isn’t allowed (and is giving the error). You could make an empty group instead:

var twoPipes = this.physics.add.group();

This is the wrong argument for create(), but you could use add():

this.pipes.add(child);

Beware that physics groups apply some defaults to the bodies added to them, so you may want to avoid putting the pipes in multiple groups. From the code so far it doesn’t look like you need twoPipes, you could just do

const topPipe = pipes.create(700, -50, 'top-pipe');
const bottomPipe = pipes.create(700, 650, 'btm-pipe');