Failing to re-create phaser 3 game instance using angular 7

Phaser 3
1

I am initializing phaser 3 game component using angular 7. Below is the html code I am using -

<phaser-component [gameConfig]="alphacrossGameConfig" (gameReady)="onGameReady($event)"></phaser-component>

And, the ts file has the following code -

      public readonly alphacrossGameConfig  = {
      type: Phaser.AUTO,
      scale: {
          mode: Phaser.Scale.FIT,
          width: window.innerWidth * window.devicePixelRatio,
          height: window.innerHeight * window.devicePixelRatio,
          parent: 'alphaCross'
      },
      physics: {
          default: 'arcade',
      },
      backgroundColor: '#000000',
      banner: true
         }
    
     public onGameReady(game: Phaser.Game): void {
        console.log("inside on game ready ", game)
        console.log("this.alphacrossBackground ", this.alphacrossBackground)
        game.scene.add('Scene', this.alphacrossBackground, true)
        this.alphacrossBackground.alphacrossGameComp = this;
    }

On first time, phaser game is initializing correctly and I am entering the game scene. But once I leave the game room and trying to re-enter the room( or re-initializing phaser game component), I am getting the following error -

"ERROR TypeError: Cannot set property 'game' of null
    at PluginManager.addToScene (phaser.js:69109)
    at Systems.init (phaser.js:33612)
    at SceneManager.createSceneFromInstance (phaser.js:72938)
    at SceneManager.add (phaser.js:72583)
    at AlphacrossGameComponent.push../src/app/component/alphacross-game/alphacross-game.component.ts.AlphacrossGameComponent.onGameReady (alphacross-game.component.ts:36)
    at Object.eval [as handleEvent] (AlphacrossGameComponent.html:1)
    at handleEvent (core.js:23107)
    at callWithDebugContext (core.js:24177)
    at Object.debugHandleEvent [as handleEvent] (core.js:23904)
    at dispatchEvent"

And the following error as well -

ERROR CONTEXT

on html code

I am using the following code to leave the game lobby -

 this.game.destroy(true,true);
 this.sys.game.destroy(true);

Any help is really appreciated. Thanks!

2

Use only

this.game.destroy(true);
3

Using…
But still getting the same issue.

4

What is on phaser.js:69109?

Set a breakpoint there, examine the values, and step backwards.

You need to find where the null is coming from.

5

The error is being thrown in the following lines -
In ts code -

    game.scene.add('Background', this.background, true)

And, in html code -

<phaser-component [gameConfig]="gameConfig" (gameReady)="onGameReady($event)"></phaser-component>

Cannot find any issue in phaser.js file.
I am getting error on redirecting to this page second time. Things are working fine on first time.

I have made phaser scene as

@Injectable({
    providedIn: 'root'
})

Is it any thing related to this? I have used the code from this link - https://github.com/jit-talukdar/phaser-angular-7

Need urgent help!

6

Your service that extends Phaser.Scene is injected as a singletone, so after destroying a game, and creating new one Angular DI providing You destroyed scene. Try remove providedIn: ‘root’ from injection config and inject service on component level:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [GameplayService]
})
7

What’s on line 69109 of phaser.js?

8

It worked! Thank you.

1 Like