Call an Angular function from inside Phaser scene

[obrador]

trafficstars

Hi, I need to call an outside Angular function from inside a phaser scene. Can you please show me the way? I found this [https://www.html5gamedevs.com/topic/35570-calling-an-angular-function-from-within-phaser-3-scene/] :

But nothing said there have worked. It's claimed that it can be done with ion-phaser.

Thanks.

[jdnichollsc]

If you assign the phaser code from an angular controller, you should be able to call methods of that controller, example:

import { Component } from '@angular/core'
import * as Phaser from 'phaser'
import { ApiService } from '../services';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
})
export class MyComponent {
  game: Phaser.Game
  initialize = false

  constructor(
    private readonly api: ApiService
  ){}

  initializeGame() {
    const context = this
    context.initialize = true
    context.game  = {
      width: "100%",
      height: "100%",
      type: Phaser.AUTO,
      scene: {
        create() {
          this.helloWorld = this.add.text(0, 0, 'Hello World')
        }
        update () {
          this.helloWorld.angle += 1;
        }
        saveGame() {
          const { angle } = this.helloWorld
          context.api.saveAngle(angle)
        }
      }
    }
  }
}

This is one option, exist a lot of alternatives (injecting the component context, using event emitters instead, etc) 👍 Let me know what you think

[lalalalaluk]

Can you make a example of how to inject the component context to a scene? Injecting Context in the scene in diffirent file.

[jdnichollsc]

Like this?

• boot-scene.ts

import * as Phaser from 'phaser';
import { FirstScene } from 'first-scene.ts';
import { SecondScene } from 'second-scene.ts';

// Angular context
let context: any;

const SCENES = {
  FIRST: 'FirstScene',
  SECOND: 'SecondScene'
}
class BootScene extends Phaser.Scene {
  create() {
    this.scene.add(SCENES.FIRST, FirstScene, true);
    this.scene.add(SCENES.SECOND, SecondScene, false);

    this.scene.run(SCENES.FIRST);
    // Calling Angular functions
    if (context) context.initialized();
  }
}

// Inject Angular context and return scene
export const makeBootScene = (ctx) => {
  context = ctx;
  return BootScene;
}

• app.component.ts

import { Component } from '@angular/core';
import * as Phaser from 'phaser';
import { makeBootScene } from './boot-scene.ts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  game = {
    width: "100%",
    height: "100%",
    type: Phaser.AUTO,
    scene: makeBootScene(this)
  }

  initialized() {
    console.log('Boot Scene initialized!');
  }
}

[lalalalaluk]

you saved my day! it works fine . thank you!

[shashankpenumatcha]

@jdnichollsc Thanks man

[jdnichollsc]

haha you're welcome! 😁