The Wayback Machine - https://web.archive.org/web/20201205122643/https://github.com/proyecto26/ion-phaser/issues/15
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Call an Angular function from inside Phaser scene #15

Closed
obrador opened this issue Mar 16, 2020 · 4 comments
Closed

Call an Angular function from inside Phaser scene #15

obrador opened this issue Mar 16, 2020 · 4 comments

Comments

@obrador
Copy link

@obrador obrador commented Mar 16, 2020

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
Copy link
Member

@jdnichollsc jdnichollsc commented Mar 30, 2020

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
Copy link

@lalalalaluk lalalalaluk commented Apr 9, 2020

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

@jdnichollsc
Copy link
Member

@jdnichollsc jdnichollsc commented Apr 9, 2020

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
Copy link

@lalalalaluk lalalalaluk commented Apr 10, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.