Call an Angular function from inside Phaser scene

[obrador]

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! 😁