# Adding Objects To Groups

**URL:** <https://phaser.discourse.group/t/adding-objects-to-groups/14068>\
**Category:** Phaser 3\
**Created:** [March 4, 2024, 1:07am UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068 "2024-03-04T01:07:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vegancatter](https://avatars.discourse-cdn.com/v4/letter/v/d6d6ee/32.png) [@vegancatter](https://phaser.discourse.group/u/vegancatter)\
**Post date:** [March 4, 2024, 1:07am UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068/1 "2024-03-04T01:07:10Z")

</div>

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.**

```javascript
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 4, 2024, 4:26pm UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068/2 "2024-03-04T16:26:31Z")

</div>

```js
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.

---

<div class="post-metadata">

**Author:** ![vegancatter](https://avatars.discourse-cdn.com/v4/letter/v/d6d6ee/32.png) [@vegancatter](https://phaser.discourse.group/u/vegancatter)\
**Post date:** [March 4, 2024, 11:14pm UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068/3 "2024-03-04T23:14:33Z")

</div>

how can I add a sprite to ‘pipe’?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 5, 2024, 12:55am UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068/4 "2024-03-05T00:55:12Z")

</div>

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

```js
this.pipes.add(pipe);

```

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

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

```

---

<div class="post-metadata">

**Author:** ![vegancatter](https://avatars.discourse-cdn.com/v4/letter/v/d6d6ee/32.png) [@vegancatter](https://phaser.discourse.group/u/vegancatter)\
**Post date:** [March 5, 2024, 1:56am UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068/5 "2024-03-05T01:56:14Z")

</div>

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

```javascript
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

```javascript
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);
  });
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [March 5, 2024, 2:13am UTC](https://phaser.discourse.group/t/adding-objects-to-groups/14068/6 "2024-03-05T02:13:44Z")

</div>

> [@vegancatter](#):
>
> `var twoPipes = this.physics.add.group(this.pipes);`

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();

```

> [@vegancatter](#):
>
> `this.pipes.create(child)`

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

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

```