Phaser + Typescript Sprite wont initialize

[ppfeiler]

Hi.

 

I have a big problem with my Phaser project. I use Phaser + Typescript. I use this tutorial: http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/

 

If I use the following code, I get this error: "Uncaught TypeError: Cannot set property 'gravity' of null"

class FlappyBirdsGame {    game: Phaser.Game;    bird;    constructor(renderDiv: String) {        this.game = new Phaser.Game(400, 490, Phaser.AUTO, renderDiv, { preload: this.preload, create: this.create, update: this.update });        this.game.state.add('main', this);    }    preload() {        this.game.stage.backgroundColor = '#71c5cf';        this.game.load.image('bird', 'assets/bird.png');    }    create() {        this.bird = this.game.add.sprite(100, 245, 'bird');        this.bird.body.gravity = 1000;        var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        spaceKey.onDown.add(this.jump, this);    }    update() {        if (this.bird.inWorld == false) {            this.restartGame();        }    }    jump() {        this.bird.body.velocity.y = -350;    }    restartGame() {        this.game.state.start('main');    }}window.onload = () => {    var game = new FlappyBirdsGame('content');}

What is the problem? If I run this code, the "bird" is displayed.

 

You can see the source also on git: https://github.com/ppfeiler/FlappyBirdClon

 

Thank you

 

[lokhmakov]

In documentation Phaser.Sprite writen:

 

By default Sprites won't add themselves to any physics system and their physics body will be null. To enable them for physics you need to call game.physics.enable(sprite, system) where sprite is this object and system is the Physics system you want to use to manage this body. Once enabled you can access all physics related properties via Sprite.body

[ppfeiler]

In documentation Phaser.Sprite writen:

 

By default Sprites won't add themselves to any physics system and their physics body will be null. To enable them for physics you need to call game.physics.enable(sprite, system) where sprite is this object and system is the Physics system you want to use to manage this body. Once enabled you can access all physics related properties via Sprite.body

 

Hi,

 

thank you for the answer. But I get now the following error:

 

Uncaught Error: listener is a required param of add() and should be a Function.

 

I use the following code:

 

class FlappyBirdsGame {    game: Phaser.Game;    bird: Phaser.Sprite;    constructor(renderDiv: String) {        this.game = new Phaser.Game(400, 490, Phaser.AUTO, renderDiv, { preload: this.preload, create: this.create, update: this.update });        this.game.state.add('main', this);    }    preload() {        this.game.stage.backgroundColor = '#71c5cf';        this.game.load.image('bird', 'assets/bird.png');    }    create() {        this.bird = this.game.add.sprite(100, 245, 'bird');        this.game.physics.enable(this.bird, Phaser.Physics.ARCADE);        this.bird.body.gravity = 1000;        var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        spaceKey.onDown.add(this.jump, this);    }    update() {        if (this.bird.inWorld == false) {            this.restartGame();        }    }    jump() {        this.bird.body.velocity.y = -350;    }    restartGame() {        this.game.state.start('main');    }}window.onload = () => {    var game = new FlappyBirdsGame('content');}

[clark]

This is related to 

Uncaught Error: listener is a required param of add() and should be a Function.

spaceKey.onDown.add(this.jump, this);

But I do not understand the reason why this error exists? this.jump is a function......

[ppfeiler]

Okay. Hmm... If I comment the "var spacekey ..." and run the code, the square should fall down, but it does nothing... Is there a problem with the Physics?

class FlappyBirdsGame {    game: Phaser.Game;    bird: Phaser.Sprite;    constructor(renderDiv: String) {        this.game = new Phaser.Game(400, 490, Phaser.AUTO, renderDiv, { preload: this.preload, create: this.create, update: this.update });        this.game.state.add('main', this);    }    preload() {        this.game.stage.backgroundColor = '#71c5cf';        this.game.load.image('bird', 'assets/bird.png');    }    create() {        this.bird = this.game.add.sprite(100, 245, 'bird');        this.game.physics.enable(this.bird, Phaser.Physics.ARCADE);        this.bird.body.gravity = 1000;        //var spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);        //spaceKey.onDown.add(this.jump, this);    }    update() {        if (this.bird.inWorld == false) {            this.restartGame();        }    }    jump() {        this.bird.body.velocity.y = -350;    }    restartGame() {        this.game.state.start('main');    }}window.onload = () => {    var game = new FlappyBirdsGame('content');}

[lokhmakov]

This is related to 

Uncaught Error: listener is a required param of add() and should be a Function.

spaceKey.onDown.add(this.jump, this);

But I do not understand the reason why this error exists? this.jump is a function......

Because context of call "create" is Phaser.Game, but u think that FlappyBirdsGame.

For normal work on project, you need to use separate classes for Game, States and other, like this:

 

module SlashSystem {    export class Game extends Phaser.Game {        static screen: string = 'small';        static srx: number = Math.max(window.innerWidth,window.innerHeight);        static sry: number = Math.min(window.innerWidth,window.innerHeight);        static logicWidth = window.innerWidth;        static logicHeight = window.innerHeight;        static r = Game.logicWidth / Game.logicHeight;        static gameWidth: number;        static gameHeight: number;        static viewX: number;        static viewY: number;        static viewWidth: number;        static viewHeight: number;        //dirty: boolean = true;        static calcSize() {            if (Game.srx >= 360){                Game.screen = 'small';                Game.gameWidth = 360;            }            if (Game.srx >= 480){                Game.screen = 'normal';                Game.gameWidth = 480;            }            if (Game.srx >= 720){                Game.screen = "large";                Game.gameWidth = 720;            }            if (Game.srx >= 940){                Game.screen = "xlarge";                Game.gameWidth = 1024;            }            if (Game.srx >= 1200){                Game.screen = "xxlarge";                Game.gameWidth = 480;            }            var device = new Phaser.Device(<any>null);            if (device.desktop){                Game.screen = "xxlarge";                Game.gameWidth = window.innerWidth;            }            device = null;            Game.gameHeight = Game.gameWidth / Game.r;        }        static convertWidth (value) {            return value / Game.logicWidth * Game.gameWidth;        }        static convertHeight (value) {            return value / Game.logicHeight * Game.gameHeight;        }        bFontsReady: boolean = false;        constructor() {            super(Game.gameWidth, Game.gameHeight, Phaser.CANVAS, 'game', null);            this.state.add('boot', Boot, false);            this.state.add('preloader', Preloader, false);            this.state.add('sector', Sector, false);            this.state.start('boot');        }    }