Typescript and "this" scope

[Massemassimo]

Hey guys,

 

this is not a phaser question but typescript related. But since my project uses phaser I believe it might be easier for you guys to help than if I ask the question on stackoverflow.

 

So here we go:

 

I followed the officially linked typescript tutorial and created an "advanced" class setup, having multiple classes (each in its own file) wrapped by one module.

Since I wanted to execute my "jump" code for my player in more than one location...

if ((this.body.blocked.down || this.body.blocked.left || this.body.blocked.right) && (this.game.time.now > jumpTimer)) {            this.body.velocity.y = -this.jumpheight;            this.jumptimer = this.game.time.now + this.minjumptime;            this.canusedoublejump = true;        }        else if ((this.hasdoublejump) && (this.canusedoublejump)) {            this.body.velocity.y = -this.jumpheight;            this.jumptimer = this.game.time.now + this.minjumptime;            this.canusedoublejump = false;        }

(this works fine)

 

...I created a function and pasted the code in it...

function jump() {     this.body.velocity.y = -jumpHeight;     jumpTimer = this.game.time.now + minJumpTime;}

(this will break)

 

... in order to call it like this...

if ((this.body.blocked.down || this.body.blocked.left || this.body.blocked.right) && (this.game.time.now > jumpTimer)) {            jump();            this.canusedoublejump = true;        }        else if ((this.hasdoublejump) && (this.canusedoublejump)) {            jump();            this.canusedoublejump = false;        }

... which will break because "this.body.." in the jump function is undefined.

 

How can I tell typescript that I am talking about the player when using "this" within the function?

 

Sorry for the pretty newbish question, but dabbling in c# (+XNA) seemingly didn't prepare me for typescript.

[adamyall]

It's hard to tell without seeing your whole file, but if that jump function is in the class definition, try removing the "function" keyword. What I think is happening is that you are making that jump function a member variable of the type function (In JavaScript Syntax, not TypeScript syntax btw). Therefore when you call the function, "this" is referring to the function itself, not to the class that you have added it to.

[Massemassimo]

Edit: Fixed.

 

Thanks to adamyall I fixed it. I put the function directly inside the class (not another function like update()). I tried that earlier but it failed because I forgot to add "this" infront of the function call ( this.jump(); ). Now, with "this" infront, it works just fine.

 

Thanks adam, sorry again for the weird, non-phaser related beginners question.

 

The rest of this stuff is obsolete but I just leave it here for the giggles if anyone cares.

 

 

 

 

Original message:

 

The jump function is inside the update() function. The full code is below, just for the heck of it, maybe it helps.

 

Working player.ts version:

module Sidescroller01 {    var jumpTime = 250;    var jumpHeight = 150;    var jumpTimer = 0;    var minJumpTime = 250;    export class Player extends Phaser.Sprite {        private hasDoubleJump: boolean;        private canUseDoubleJump: boolean;        constructor(game: Phaser.Game, x: number, y: number) {            super(game, x, y, 'player', 0);            this.anchor.setTo(0.5, 0.5);            this.animations.add('walk', [0, 1, 2, 3], 10, true);            game.add.existing(this);            this.hasDoubleJump = true;            this.canUseDoubleJump = true;        }        create() {            this.body.collideWorldBounds = true;                    }        update() {            var cursors = this.game.input.keyboard.createCursorKeys();            var jumpButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);                        this.body.velocity.x = 0;            if (jumpButton.isDown && (this.game.time.now > jumpTimer)) {                if ((this.body.blocked.down || this.body.blocked.left || this.body.blocked.right)) {                    this.body.velocity.y = -jumpHeight;                    jumpTimer = this.game.time.now + minJumpTime;                    this.canUseDoubleJump = true;                }                else if ((this.hasDoubleJump) && (this.canUseDoubleJump)) {                    this.body.velocity.y = -jumpHeight;                    jumpTimer = this.game.time.now + minJumpTime;                    this.canUseDoubleJump = false;                }            }            if (cursors.left.isDown) {                this.body.velocity.x = -150;                this.animations.play('walk');                if (this.scale.x == 1) {                    this.scale.x = -1;                }            }            else if (cursors.right.isDown) {                this.body.velocity.x = 150;                this.animations.play('walk');                if (this.scale.x == -1) {                    this.scale.x = 1;                }            }            else {                this.animations.frame = 0;            }                    }    }}

NOT working player.ts version:

module Sidescroller01 {    var jumpTime = 250;    var jumpHeight = 150;    var jumpTimer = 0;    var minJumpTime = 250;    export class Player extends Phaser.Sprite {        private hasDoubleJump: boolean;        private canUseDoubleJump: boolean;        constructor(game: Phaser.Game, x: number, y: number) {            super(game, x, y, 'player', 0);            this.anchor.setTo(0.5, 0.5);            this.animations.add('walk', [0, 1, 2, 3], 10, true);            game.add.existing(this);            this.hasDoubleJump = true;            this.canUseDoubleJump = true;        }        create() {            this.body.collideWorldBounds = true;                    }        update() {            var cursors = this.game.input.keyboard.createCursorKeys();            var jumpButton = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);                        this.body.velocity.x = 0;            function jump() {                this.body.velocity.y = -jumpHeight;                jumpTimer = this.game.time.now + minJumpTime;            }            if (jumpButton.isDown && (this.game.time.now > jumpTimer)) {                if ((this.body.blocked.down || this.body.blocked.left || this.body.blocked.right)) {                    jump();                    this.canUseDoubleJump = true;                }                else if ((this.hasDoubleJump) && (this.canUseDoubleJump)) {                    jump();                    this.canUseDoubleJump = false;                }            }            if (cursors.left.isDown) {                this.body.velocity.x = -150;                this.animations.play('walk');                if (this.scale.x == 1) {                    this.scale.x = -1;                }            }            else if (cursors.right.isDown) {                this.body.velocity.x = 150;                this.animations.play('walk');                if (this.scale.x == -1) {                    this.scale.x = 1;                }            }            else {                this.animations.frame = 0;            }                    }    }}

The latter throws an error in function jump(): this.body undefined.

[adamyall]

Glad I was able to steer you in the right direction!

I'm really liking typescript with Phaser, it forces you to write cleaner code. I'm glad that Phaser is so versatile, but I'd like to see more people using TypeScript, because seeing the completion and inheritances will clarify the structure of Phaser immensely. So kudos for going that route.

Btw, my next few blog posts at adam-holden.com are going to be related to TypeScript with Phaser.

/self promotion

[clark]

I look forward to reading it adamyall, promote away

[Rhuantavan]

Adam looking forward to Typescript-Phaser tutorials!