Phaser current version test environment

Basic Phaser setup for testing

by Lewis Lane

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.1.0/phaser.min.js"></script>
<div id="test"></div>

JavaScript

// Phaser current version test environment
// Translating pointer position to an arbitrary grid ('board game' mechanics)

var game = new Phaser.Game(600, 400, Phaser.AUTO, 'test');

var BasicGame = function(game) {};

BasicGame.Boot = function (game) {};

var CELL_SIZE = 32,
    BOARD_WIDTH = 8,
    BOARD_HEIGHT = 8;

var board, boardPos, cursor;

BasicGame.Boot.prototype = 
{
    preload: function() {
         game.time.advancedTiming = true;
    },
	create: function() {
        // Create the chequered background for the board - note the texture will be 2x2 cells in size
        var checkerBmp = this.game.add.bitmapData(CELL_SIZE * 2, CELL_SIZE * 2);
        checkerBmp.rect(0, 0, CELL_SIZE * 2, CELL_SIZE * 2, '#333');
        checkerBmp.rect(0, 0, CELL_SIZE, CELL_SIZE, '#ddd');
        checkerBmp.rect(CELL_SIZE, CELL_SIZE, CELL_SIZE, CELL_SIZE, '#ddd');
        
        // Create a yellow square 'cursor' to show which cell our cursor is over
        var selectBmp = this.game.add.bitmapData(CELL_SIZE, CELL_SIZE);
        selectBmp.rect(0, 0, CELL_SIZE, CELL_SIZE, '#ff0');
        
        // Create the board TileSprite
        board = this.game.add.tileSprite(0, 0, BOARD_WIDTH * CELL_SIZE, BOARD_HEIGHT * CELL_SIZE, checkerBmp);
        // Position the board centrally within the game world
        board.x = game.world.centerX - (board.width * 0.5);
        board.y = game.world.centerY - (board.height * 0.5);
        
        // Create a point to store our current board position
        boardPos = new Phaser.Point(0, 0);
        
        // Add the cursor sprite
        cursor = this.game.add.sprite(0, 0, selectBmp);
        // Add a nice little cursor pulsing effect
        cursor.alpha = 0.5;
        this.game.add.tween(cursor).to({alpha: 0.2}, 500, Phaser.Easing.Quadratic.InOut, true, 0, Infinity, true);
    },
    update: function() {
        // Every frame, work out the board position by first subtracting the pointer position from
        // the board position...