Phaser Game Snippets - Phaser Games

These snippets are parts that I use frequently to build games in phaser.
They include (or will include) things such as game screens, common text groups, and any other multi-line groups of code I feel I need to rapidly build phaser games.

Score Text and Label

Description:adds text fields for score

Example:

 this.scoreText = game.add.text(game.world.centerX, 0, "0");
        this.scoreText.fill = "#ffffff";
        this.scoreText.fontSize = 64;
        this.scoreText.anchor.set(0.5, 0.5);

        this.scoreLabel = game.add.text(game.world.centerX, 0, "score");
        this.scoreLabel.fill = "#ffffff";
        this.scoreLabel.fontSize = 32;
        this.scoreLabel.anchor.set(0.5, 0.5);

        this.scoreLabel.y=this.scoreLabel.height/2;
        this.scoreText.y=this.scoreLabel.y+this.scoreLabel.height;

Title Screen

Description:A Title screen template

Example:

var StateTitle = {

    preload: function () {
		
        game.load.spritesheet('buttons', 'images/ui/buttons.png', 265, 74);
    },

    create: function () {
		

        //START BUTTON
        this.btnStart = game.add.button(game.world.centerX, game.world.height - 150, "buttons", this.startGame, this, 7, 6, 7);
        this.btnStart.anchor.set(0.5, 0.5);
	
    }
    , startGame: function () {
        game.state.start("StateMain");
    }
    , update: function () {

    }

}

Game Over Screen

Description:A Game Over screen template

Example:use this spritesheet for the buttons in the game over and title screens

var StateOver = {

    preload: function () {
        
        game.load.spritesheet('buttons', 'images/ui/buttons.png', 265, 74);

    },

    create: function () {
        

        //Play Again BUTTON
        this.playAgain = game.add.button(game.world.centerX, game.world.centerY, "buttons", this.startGame, this, 1, 0, 1);
        this.playAgain.anchor.set(0.5, 0.5);
        
       
    }
    , startGame: function () {
        game.state.start("StateMain");
    }
    , update: function () {

    }

}

On Screen Buttons

Description:use this to add the arrow sprite sheet to your game.

Example:

//place in preload
game.load.spritesheet("arrow", "images/arrowButtons.png", 60, 60, 4);

//place in create

//arrow buttons
        this.upArrow = game.add.sprite(0, 0, "arrow");
        this.downArrow = game.add.sprite(0, 50, "arrow");
        this.leftArrow = game.add.sprite(-50, 25, "arrow");
        this.rightArrow = game.add.sprite(50, 25, "arrow");

        this.upArrow.anchor.set(0.5, 0.5);
        this.downArrow.anchor.set(0.5, 0.5);
        this.leftArrow.anchor.set(0.5, 0.5);
        this.rightArrow.anchor.set(0.5, 0.5);


        this.upArrow.frame = 0;
        this.downArrow.frame = 1;
        this.leftArrow.frame = 2;
        this.rightArrow.frame = 3;

        this.buttonGroup = game.add.group();
        this.buttonGroup.add(this.upArrow);
        this.buttonGroup.add(this.downArrow);
        this.buttonGroup.add(this.leftArrow);
        this.buttonGroup.add(this.rightArrow);

        this.buttonGroup.fixedToCamera = true;
        this.buttonGroup.cameraOffset.setTo(game.width - this.buttonGroup.width/2, game.height - this.buttonGroup.height);

Keyboard Arrows

Description:detects keyboard arrows. Place in update function

Example:

if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
        
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        
    } else
    if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
    {
        
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
    {
        
    }