listener functions.. how do i properly use them?

[Nokdu]

Hi i'm kinda new to phaser.io..

 

i've been trying out some typescript stuff.. and i've come across some questions.. (and this might be just a typescript question...)

 

let's say i want to do function a when keyboard up is pressed.. 

 

i'm using typescript.. so.. let's just say this..

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(a, this);

so.. a here is a "static" function.. which isn't inside a class... 

 

i've got 2 questions here..

 

1. is there a way to pass a parameter to the function a?

 

2. is there a way to pass he listener function so that it could be  

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(this.a, this);

?

 

thank you 

[1-800-STAR-WARS]

1. A few ways, but the easiest is probably:

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () {   a(param1, param2);}, this);

2. That might work how you've done it if the scope is correct - but it'd be better as:

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(YourClass.prototype.a, this);

The second argument, in your case 'this', is the context in which the first argument will be called with.

[Nokdu]

1. A few ways, but the easiest is probably:

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () {   a(param1, param2);}, this);

2. That might work how you've done it if the scope is correct - but it'd be better as:

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(YourClass.prototype.a, this);

The second argument, in your case 'this', is the context in which the first argument will be called with.

Oh. I okay I understand how 1 works now.

Just to be clear. The the in 2 has to be the same class as YourClass?

 

edit:

I tried your solution for 2

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(YourClass.prototype.a, this);

but seems like it didn't work as i was suspecting

 

here is the source that i am currently looking at(typescript)

///<reference path="phaser.d.ts" />class MyGame {    // variables    game: Phaser.Game;    spritemap: { [chartype: string]: Phaser.Sprite } = {};    direction: { [key: number]: string };    iCurdir: number;    // the constructor    constructor() {        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create, update: this.update }, true, true);        console.log('constructor : ' + this.spritemap);    }    preload() {        // load all the needed images here..        this.game.load.spritesheet('char1', './assets/vx_chara01_a.png', 32, 48, 96);        this.spritemap = {};        this.direction = {};        this.direction[0] = 'up';        this.direction[1] = 'down';        this.direction[2] = 'left';        this.direction[3] = 'right';        this.iCurdir = 0;    }    create() {        //         console.log('create : ' + this.spritemap);        for (var i = 0; i < 8; ++i) {            var sCharType = 'chartype' + i;            var iRow = i % 4;            var iCol = Math.floor(i / 4);            this.spritemap[sCharType] = this.game.add.sprite(0 + i * 32, 0, 'char1');            var iModifier = iRow * 3 + iCol * 48;            this.spritemap[sCharType].animations.add('down', [0 + iModifier, 1 + iModifier, 2 + iModifier, 1 + iModifier], 4);            this.spritemap[sCharType].animations.add('left', [12 + iModifier, 13 + iModifier, 14 + iModifier, 13 + iModifier], 4);            this.spritemap[sCharType].animations.add('right', [24 + iModifier, 25 + iModifier, 26 + iModifier, 25 + iModifier], 4);            this.spritemap[sCharType].animations.add('up', [36 + iModifier, 37 + iModifier, 38 + iModifier, 37 + iModifier], 4);            this.spritemap[sCharType].animations.play('down', 4, true);        }        // hook keys        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () { MyGame.prototype.changeDir('up'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onDown.add(function () { MyGame.prototype.changeDir('down'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onDown.add(function () { MyGame.prototype.changeDir('left'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onDown.add(function () { MyGame.prototype.changeDir('right'); }, this);    }    update() {    }    changeDir(direction:string) {        for (var key in this.spritemap) {            this.spritemap[key].animations.play(direction, 4, true);        }        this.iCurdir = (this.iCurdir + 1) % 4;        console.log('key pressed');    }}window.onload = () => {    var game = new MyGame();};

if i do it this way.. the variables in this(such as iCurdir, spritemap) seem to all be undefined (or NaN) everytime i call them.

 

what could i be doing wrong here?

Edited February 4, 2014 by Nokdu

[qdrj]

Hi,

 

There is a problem with context and 'this'. Try "arrow function" feature of TypeScript.

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(() => { this.changeDir('up') }); 

[Nokdu]

 

Hi,

 

There is a problem with context and 'this'. Try "arrow function" feature of TypeScript.

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(() => { this.changeDir('up') }); 

Have no idea why.. but that doesn't seem to work too. 

 

still says something about undefined.. 

 

oh well guess i'll just have to stick with changing flags.. 

 

thank you all for your help

[1-800-STAR-WARS]

// hook keys        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () { MyGame.prototype.changeDir('up'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onDown.add(function () { MyGame.prototype.changeDir('down'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onDown.add(function () { MyGame.prototype.changeDir('left'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onDown.add(function () { MyGame.prototype.changeDir('right'); }, this);

You've confused the two syntaxes here! I think this should work:

// hook keys        this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () { this.changeDir('up'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.DOWN).onDown.add(function () { this.changeDir('down'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT).onDown.add(function () { this.changeDir('left'); }, this);        this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT).onDown.add(function () { this.changeDir('right'); }, this);

[threeninenineone]

On 04/02/2014 at 2:59 AM, 1-800-STAR-WARS said:

1. A few ways, but the easiest is probably:

this.game.input.keyboard.addKey(Phaser.Keyboard.UP).onDown.add(function () {   a(param1, param2);}, this);

 

What are the other ways of doing this and what are the pros/cons?

This method works for me, I'm just curious if there is a better way mostly.