Jump to content

Phaser and Angular - access this.game from the DOM


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...