Phaser Boilerplate Tutorial Files

GameState.js

import RainbowText from 'objects/RainbowText';
import Star from 'objects/Star';
import Player from 'objects/Player';
import Level1 from 'objects/Level1';

class GameState extends Phaser.State {

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

    create() {
        this.score = 0;

        //  We're going to be using physics, so enable the Arcade Physics system
        this.game.physics.startSystem(Phaser.Physics.ARCADE);

        //  A simple background for our game
        this.game.add.sprite(0, 0, 'sky');

        //  The platforms group contains the ground and the 2 ledges we can jump on
        this.platforms = new Level1(this.game);

        // The player and its settings
        this.player = new Player(this.game, 32, this.game.world.height - 150);

        //  Finally some stars to collect
        this.stars = this.game.add.group();

        //  Here we'll create 12 of them evenly spaced apart
        for (let i = 0; i < 12; i++) {
            //  Create a star inside of the 'stars' group
            let star = new Star(this.game, i * 70, 0);
            this.stars.add(star);
        }

        //  The score
        this.scoreText = new RainbowText(this.game, 16, 16, 'Score: 0');
    }

    update() {
        //  Collide the player and the stars with the platforms
        this.game.physics.arcade.collide(this.player, this.platforms);
        this.game.physics.arcade.collide(this.stars, this.platforms);

        //  Checks to see if the player overlaps with any of the stars, if he does call the collectStar function
        this.game.physics.arcade.overlap(this.player, this.stars, this.collectStar, null, this);
    }

    collectStar(player, star) {
        // Removes the star from the screen
        star.kill();

        //  Add and update the score
        this.score += 10;
        this.scoreText.text = 'Score: ' + this.score;
    }

}

export default GameState;

Level1.js

export default class Level1 extends Phaser.Group {
    constructor(game) {
        super(game);

        //  We will enable physics for any object that is created in this group
        this.enableBody = true;

        this.buildLevel();

        game.add(this);
    }

    buildLevel() {
        // Here we create the ground.
        this.ground = this.create(0, this.game.world.height - 64, 'ground');

        //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
        this.ground.scale.setTo(2, 2);

        //  This stops it from falling away when you jump on it
        this.ground.body.immovable = true;

        //  Now let's create two ledges
        this.ledge1 = this.create(400, 400, 'ground');
        this.ledge1.body.immovable = true;

        this.ledge2 = this.create(-150, 250, 'ground');
        this.ledge2.body.immovable = true;
    }
}

Player.js

export default class Player extends Phaser.Sprite {
    constructor(game, x = 0, y = 0) {
        super(game, x, y, 'dude');

        //  We need to enable physics on the player
        this.game.physics.arcade.enable(this);

        //  Player physics properties. Give the little guy a slight bounce.
        this.body.bounce.y = 0.2;
        this.body.gravity.y = 300;
        this.body.collideWorldBounds = true;

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

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

    update() {
        //  Reset the players velocity (movement)
        this.body.velocity.x = 0;

        if (this.cursors.left.isDown) {
            //  Move to the left
            this.body.velocity.x = -150;

            this.animations.play('left');
        } else if (this.cursors.right.isDown) {
            //  Move to the right
            this.body.velocity.x = 150;

            this.animations.play('right');
        } else {
            //  Stand still
            this.animations.stop();

            this.frame = 4;
        }

        //  Allow the player to jump if they are touching the ground.
        if (this.cursors.up.isDown && this.body.touching.down) {
            this.body.velocity.y = -350;
        }
    }
}

Star.js

export default class Star extends Phaser.Sprite {
    constructor(game, x = 0, y = 0) {
        super(game, x, y, 'star');

        game.physics.arcade.enable(this);

        //  Let gravity do its thing
        this.body.gravity.y = 300;

        //  This just gives each star a slightly random bounce value
        this.body.bounce.y = 0.7 + Math.random() * 0.2;
    }
}