New to Phaser, trying to break the player into it's own class.

[CodedGames]

So I went through the basic platformer tutorial and one thing I don't like is that everything is thrown into the create an update methods. I'd like to clean that up a bit by breaking the player into it's own class:

/**
 * Created by Robert on 1/4/18.
 */


/**
 * Create the game and define the size of the window.
 *
 * Phase.AUTO will use WebGL if the browser supports it
 * otherwise uses HTML5 canvas.
 *
 * @type {Phaser.Game}
 */
var game = new Phaser.Game(800, 600, Phaser.AUTO);

/**
 * Create the game state.
 *
 * Preload: Where you load assets.
 *
 * Create: Called once at start.
 *
 * Update: Called every frame.
 *
 * @type {{preload: GameState.preload, create: GameState.create, update: GameState.update}}
 */
var GameState = {
    preload: function () {

        game.load.image('sky', 'assets/sky.png');
        game.load.image('ground', 'assets/platform.png');
        game.load.image('star', 'assets/star.png');
        game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

    },
    create: function () {

        game.physics.startSystem(Phaser.Physics.ARCADE);

        game.add.sprite(0, 0, 'sky');

        platforms = game.add.group();

        platforms.enableBody = true;

        var ground = platforms.create(0, game.world.height - 64, 'ground');

        ground.scale.setTo(2, 2);

        ground.body.immovable = true;

        var ledge = platforms.create(400, 400, 'ground');

        ledge.body.immovable = true;

        ledge = platforms.create(0, 50, 'ground');

        ledge.body.immovable = true;

        /**
         * Create the player.
         */
        player = new Player(game, 32, game.world.height - 150, 'dude', 0);

    },
    update: function () {
        var hitPlatform = game.physics.arcade.collide(player, platforms);
        player.update(hitPlatform);

    }
};

game.state.add('GameState', GameState);
game.state.start('GameState');


class Player extends Phaser.Sprite {

    constructor(game, x, y, sprite, frame) {
        super(game, x, y, sprite, frame);

        game.add.sprite(this);
        game.physics.arcade.enable(this);

        this.body.bounce.y = 0.2;
        this.body.gravity.y = 300;
        this.collideWorldBounds = true;

        this.animations.add('left', [0, 1, 2, 3], 10, true);
        this.animations.add('right', [5, 6, 7, 8], 10, true);

        this.cursors = game.input.keyboard.createCursorKeys();
    }

    update(hitPlatform) {
        this.velocity.x = 0;

        if (this.cursors.left.isDown) {
            this.body.velocity.x = -150;
            this.animations.play('left');
        } else if (this.cursors.right.isDown) {
            this.body.velocity.x = 150;
            this.animations.play('right');
        } else {
            this.animations.stop();
            this.frame = 4;
        }

        if (this.cursors.up.isDown && this.body.touching.down && hitPlatform) {
            this.body.velocity.y = -350;
        }
    }
}

Here is my code, I keep getting an error saying:

TypeError: undefined is not an object (evaluating 'this.velocity.x = 0') for the first line of Player's update method. I'm not seeing what is wrong here. Any help would be really appreciated.

[samme]

Should be this.body.velocity.x.

[CodedGames]

Ok awesome, the game will now run. That got rid of that error message. The only problem I'm running into now is that the player is not showing up in the game. Is that valid to call game.add.sprite(this); in the constructor of player? The object is getting instantiated, I can see that it is in the proper position using console.log but it doesn't seem to be affected by gravity and cannot move around. The sprite itself is also not being drawn.

 

Edit: Got it, you have to call game.add.existing instead of sprite.