CodedGames

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.