GrandSchtroumpf Posted May 29, 2016 Share Posted May 29, 2016 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 More sharing options...
Recommended Posts