How to change Scenes in a callback function?

Phaser 3
1

Hi There,

Big Noobie here so likely an easy question. Here is my Code

import Phaser from 'phaser'

export default class TitleScreen extends Phaser.Scene 
{
    
    preload()
    {
        
    }

    create()
    {
        const title = this.add.text(400, 250, 'Kevins Amazing First Game',{fontSize: 50, fontFamily: 'Times New Roman'})
        title.setOrigin(0.5,3)

        const startButton = this.add.rectangle(400, 400, 150, 75, 0xBFBFBF).setInteractive()
        startButton.on('pointerover', function(){startButton.fillColor = 0xDFDCDC})
        startButton.on('pointerout', function(){startButton.fillColor = 0xBFBFBF})
        startButton.on('pointerdown', function(){startButton.fillColor = 0xBFBFBF})
        startButton.on('pointerup', function(){startButton.fillColor = 0xDFDCDC; this.scene.stop('titleScreen'); this.scene.start('gameScene')})

        const startText = this.add.text(startButton.x, startButton.y, 'START', {fontSize: 25}).setOrigin(0.5)
    }
    update()
    {

    }
}

I want the 'titleScreen' scene to stop and the 'gameScene' scene to start when I click a start button. Right now, I am getting this error:

*TypeError: this.scene.stop is not a function*
*    at Rectangle.<anonymous> (TitleScreen.js:20)*

However, when I try the this.scene.stop and this.scene.start functions in the update() method, they both work fine. Why can I not use this.scene.stop and this.scene.start in the pointerup callback function?

Thanks
2

I figured this one out. I needed to define the scope in the callback function as “this”