Sign in to follow this  
Massemassimo

Typescript and "this" scope

Recommended Posts

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. :(

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.