Jump to content

Phaser and Angular - access this.game from the DOM


GrandSchtroumpf
 Share

Recommended Posts

Hi there,

I am trying to create an Phaser/Angular2 game in Typescript with the canvas in background and the DOM at the front.
I would like to do either :
1 - Change the state when I click on a button from the DOM.
2 - Or change the state when I open a component with Angular2 with the constructor of the class (in Angular2 a component is based on a class).

The problem I have is that I cannot access the Phaser.game element from a fonction triggered from the DOM or in the constructor of the class.

0 : I define the Phaser.Game object on a first class, I start the first state and I go to the page "/loader" with the angular route :

import {Component} from '@angular/core';
import {LoaderComponent} from '/loader.ts';
import { ROUTER_DIRECTIVES, Routes, Router } from '@angular/router';

@Component({
  template: '<router-outlet></router-outlet><div id="content"></div>',
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  {path: '/loader', component: LoaderComponent}
])

export class GameComponent extends Phaser.Game{

 constructor(){
  super('100%','100%',Phaser.AUTO,'content', {create : this.create});
 }

 create(){
  this.state.add('Loader', LoaderComponent);
  this.state.start('Loader');
  this.router.navigate(['/loader']);
 }
}

1 : In the first state I create a button and console.log this.game

import {Component} from '@angular/core';

@Component({
  template : '<button (click)="log()">Log</button>'
})

export class LoaderComponent extends Phaser.State{
  public game:Phaser.Game;
  
  constructor (){
    super();
    console.log(this.game); //return null
  } 
  
  preload(){}
  
  create(){
     console.log(this.game); //return the right Phaser.Game object
  }
  
  log(){
    console.log(this.game); //return null
    //this.game.state.start('NewState'); //Not working obviously
  }
}

I guess this is because the Phaser.Game is liked to the Phaser.State object accessible from preload and create, but how can I access this object from the constructor or at least the fonction 'log()' ?
Thanks for your help =)

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...