Typescript Input.onDown problem

[Cybercell]

Hi!

 

I have been running into a problem with the Input.onDown event.

 

Once my code is inside the create function and I add the SayHi function to the onDown event it throws a error.

 

Sample code:

class GameInitializer {    game: Phaser.Game;    constructor() {        this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'content', { create: this.create });    }    create() {        console.log(typeof (this.SayHi));//undefined        this.game.input.onDown.add(this.SayHi);//Uncaught Error: Phaser.Signal: listener is a required param of add() and should be a Function.    }    SayHi() {        console.log("hi");    }}window.onload = () => {    var game = new GameInitializer();};

I have tried to figure out what the problem is and noticed that this.SayHi is undefined but have no clue why that is.

 

So my question is how should I go about and fix this?

 

Thanks in advance.

[Tom Atom]

Hi, you are passing new state object to constructor ({ create: this.create }), that has only create method - this object does not have SayHi() method...

 

Simply change it like this - pass reference to current object:

constructor() {     this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'content', this);}

Or even better structure your classes like this - divide game from state(s) - in GameInitializer class you can then add as meny states as you need and keep your game tidy:

class GameInitializer extends Phaser.Game{    game: Phaser.Game;    constructor() {        super(window.innerWidth, window.innerHeight, Phaser.AUTO, 'content', null);        this.state.add("MyState", MyState);        this.state.start("MyState", true, false);    }}class MyState extends Phaser.State {    constructor() {        super();    }    create() {        console.log(typeof (this.SayHi));//undefined        this.game.input.onDown.add(this.SayHi, this);//Uncaught Error: Phaser.Signal: listener is a required param of add() and should be a Function.    }    public SayHi(): void {        console.log("hi");    }}window.onload = () => {    var game = new GameInitializer();};

[Cybercell]

 

Hi, you are passing new state object to constructor ({ create: this.create }), that has only create method - this object does not have SayHi() method...

 

Simply change it like this - pass reference to current object:

constructor() {     this.game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'content', this);}

Or even better structure your classes like this - divide game from state(s) - in GameInitializer class you can then add as meny states as you need and keep your game tidy:

class GameInitializer extends Phaser.Game{    game: Phaser.Game;    constructor() {        super(window.innerWidth, window.innerHeight, Phaser.AUTO, 'content', null);        this.state.add("MyState", MyState);        this.state.start("MyState", true, false);    }}class MyState extends Phaser.State {    constructor() {        super();    }    create() {        console.log(typeof (this.SayHi));//undefined        this.game.input.onDown.add(this.SayHi, this);//Uncaught Error: Phaser.Signal: listener is a required param of add() and should be a Function.    }    public SayHi(): void {        console.log("hi");    }}window.onload = () => {    var game = new GameInitializer();};

 

Hi Tom,

 

Thanks for the answer! ;D

 

I have read more about game states and I am following this tutorial: http://www.photonstorm.com/phaser/advanced-phaser-and-typescript-projects

 

Thanks again.