Phaser current version test environment

Basic Phaser setup for testing

by Lewis Lane

HTML

<script src="https://rawgit.com/photonstorm/phaser/master/build/phaser.min.js"></script>
<div id="test"></div>

JavaScript

// Phaser current version test environment
// Positioning objects relative to other scaled objects (with scale/addChild trick)

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

var BasicGame = function(game) {};

BasicGame.Boot = function (game) {
    // nothing here
};

// initialise up our endTime var
var endTime = 0;

BasicGame.Boot.prototype = 
{
    preload: function() {
      game.time.advancedTiming = true;
    },
	create: function() 
	{
        // cheaty graphics to save loading images
        var circle = game.make.graphics();
        circle.beginFill(0xff0000);
        circle.drawCircle(30, 30, 30);
        circle.boundsPadding = 0;
        circle.cacheAsBitmap = true;
        
        // create our sprite
        this.s = game.add.sprite(game.world.centerX - 100, game.world.centerY, circle._cachedSprite.texture);
        this.s.anchor.set(0.5);
        
        // create our number and set the anchor to central - also, generate it 4x bigger than is needed so it scales nicely
        var num = game.add.text(0, 0, "1", { font: "128px Arial", fill: "#ffffff", align: "center" });
        num.anchor.set(0.5);
        // reduce the scale of the number to quarter of the size, so when it scales up it keeps its fidelity
        num.scale.set(0.25);
        // add the number to the player sprite, so we can forget about having to move/scale it any more
        this.s.addChild(num);
        
        // create our player name and also set the anchor to central
        var name = game.add.text(0, 20, "Player", { font: "16px Arial", fill: "#ffffff", align: "center" });
        name.anchor.setTo(0.5, 0);
        
        // put references to the name and number on the sprite
        this.s.num = num;
        this.s.name = name;
        
        // tween the sprite's scale up and down
        game.add.tween(this.s.scale).to({x: 3, y: 3}, 2000, Phaser.Easing.Quadratic.InOut, true, false, Infinity, true);
        
        // tween it left and right just to...