Error with functions

Phaser 3
1

my lines of code give me an error when I try giving the group this.pipes a child using the .create() function. The error msg disappears when I a different way of running the function shown at the bottom.

The method that gives error:

function create () {
  this.pipes = this.physics.add.group();

  var spawnPipeTimer = this.time.addEvent({
    delay: 5000,
    callback: spawnPipe,
    callScope: this,
    loop: true
  
  });

  function spawnPipe() {
    var yOffset = ((Math.random() - 0.5) * 100) * 2

    var top_pipe = this.pipes.create(800, -50 + yOffset, 'top-pipe');
    var btm_pipe = this.pipes.create(800, 650 + yOffset, 'btm-pipe');

    top_pipe.setScale(4)
    top_pipe.setPosition(top_pipe.x , top_pipe.y + yOffset)
    this.pipes.add(top_pipe)

    btm_pipe.setScale(4)
    btm_pipe.setPosition(btm_pipe.x , btm_pipe.y + yOffset)
    this.pipes.add(btm_pipe)
  }
}

Error Msg:

 Uncaught TypeError: Cannot read properties of undefined (reading 'create')

The Error Msg disappears when I use this method why is that?

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

  var spawnPipeTimer = this.time.addEvent({
    delay: 5000,
    callback: () => {
      var yOffset = ((Math.random() - 0.5) * 100) * 2
  
      var top_pipe = this.pipes.create(800, -50 + yOffset, 'top-pipe');
      var btm_pipe = this.pipes.create(800, 650 + yOffset, 'btm-pipe');
  
      top_pipe.setScale(4)
      top_pipe.setPosition(top_pipe.x , top_pipe.y + yOffset)
      this.pipes.add(top_pipe)
  
      btm_pipe.setScale(4)
      btm_pipe.setPosition(btm_pipe.x , btm_pipe.y + yOffset)
      this.pipes.add(btm_pipe)
    },
    callScope: this,
    loop: true
  
  });
2

this.pipes only exists within the create method, so using this.pipes within the spawnPipe method is naturally undefined. The arrow function’s ‘this’ points to that of create, so it can access this.pipes.

4

Changing ‘callScope’ to ‘callbackScope’ might make it work.

5

thxsm