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.add.sprite(0, 0, 'sky');

        platforms =;

        platforms.enableBody = true;

        var ground = platforms.create(0, - 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, - 150, 'dude', 0);

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


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

class Player extends Phaser.Sprite {

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


        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;
        } else if (this.cursors.right.isDown) {
            this.body.velocity.x = 150;
        } else {
            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

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.