Phaser.Text not working on TypeScript

[mikkoh85]

Hi all!

I am new on Phaser, just got it working with my FireLoop project. FireLoop generates Angular 2 project with Angular CLI. I made my own TypeScript game into that and it works just great, well almost. I have the following code in my project:

/// <reference path="../../../node_modules/phaser/typescript/phaser.d.ts" />
import { SessionInterface, Session, FireLoopRef } from '../shared/sdk/models';
import { RealTime } from '../shared/sdk/services';
import { LoopBackConfig } from '../shared/sdk';


export class SimpleGame {
    session: Session;
    sessions: Session[] = new Array<Session>();
    sessionRef : FireLoopRef<Session>;

    game: Phaser.Game;
    sessionsText: Phaser.Text;

     constructor(private rt: RealTime) {
       this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });
       this.rt.onReady().subscribe(() => {
         this.sessionRef = this.rt.FireLoop.ref<Session>(Session);
         this.sessionRef.on('change').subscribe((sessions: Session[]) => {
           this.sessions = sessions;
           this.updateText();
          });
          // this.sessionRef.stats().subscribe((stats: any) => console.log("stats:", stats));
        });
        this.rt.onDisconnect().subscribe((error: string) => {
          console.log('Disconnected', error);
        });
        this.rt.onUnAuthorized().subscribe((error: string) => {
          console.log('UnAuthorized', error);
        });
        this.rt.onAuthenticated().subscribe((error: string) => {
          console.log('Authenticated', error);
        });
    }
  
    create() {
        let text = "Hello World!";
        let headerStyle = { font: "65px Arial", fill: "#ff0000", align: "center" };
        let textStyle = { font: "24px Arial", fill: "#ff0000", align: "center" };
        this.game.add.text(0, 0, text, headerStyle);
        this.sessionsText = this.game.add.text(0, 100, "Initializing...", textStyle);
    }

    updateText() {
      let sessionsString: string;
      if (this.sessions) { 
        sessionsString = 
          "Hosts: " + this.sessions.map(session => session.host) + 
          ", Clients: " + this.sessions.map(session => session.client); 
        console.log(sessionsString, this.sessionsText);
        this.sessionsText.setText(sessionsString);
      }
    }
}

 

  The problem is with sessionText variable. When I console.log it right at the end of "create"-function, it seems to be proper object. Anyhow when I try to console.log it anywhere else, it is undefined. So, this setText line never works:

this.sessionsText.setText(sessionsString);

Instead, it gives an error. So, I guess it isn't saving the variable at the create like it's supposed to. Any solutions. Here's also a screenshot:

[mikkoh85]

I found out that instead of having this: 

this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create });

I needed this:

this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', this);

So, it is now working.

[rich]

Also if you're using Phaser CE make sure you get 2.7.9 as 2.7.8 has a bug in the Text class.

[mikkoh85]

Yep. I learnt it the hard way yesterday. I reported the bug there and started using 2.7.7. I saw the fork request coming to 2.7.9.

Now I also created own class for game state like this:

export class TankExample extends Phaser.State {
  rt: RealTime;
  sessions: Session[] = new Array<Session>();
  sessionRef : FireLoopRef<Session>;  

  init(rt: RealTime) {
    this.rt = rt;
    console.log("TankExample init");

    this.rt.onReady().subscribe(() => {
      this.sessionRef = this.rt.FireLoop.ref<Session>(Session);
      this.sessionRef.on('change').subscribe((sessions: Session[]) => {
        this.sessions = sessions;
        console.log("Game sessions:", this.sessions);
      });
    });
  }

  preload() {
    console.log("TankExample preload");
  }

  create() {
    console.log("TankExample create");
  }
}

..passing in that RealTime object like this on game class / constructor:

import { RealTime } from '../shared/sdk/services';


export class SimpleGame {

    game: Phaser.Game;

     constructor(private rt: RealTime) {
       this.game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game-content');
       this.game.state.add("TankExample", TankExample, false);
       this.game.state.start("TankExample", true, false, rt);
     }
}

..and it works just great. I am following the tank tutorial right now.

 

Thank you for this great engine, @rich I'm going to build some multiplayer HTML5 games with it.