Phaser 2.0.4 test environment
Basic Phaser setup for testing
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.0.4/phaser.min.js"></script>
<div id="test"></div>
JavaScript
// Phaser 2.0.4 camera zoom test (with camera bounds checking)
// Use cursors to move the camera, Q to zoom in, A to zoom out
var preload = function(game) {
game.time.advancedTiming = true;
}
var worldScale = 1, player, bgGroup, uiGroup, viewRect, boundsPoint, gameWorld;
var create = function(game) {
// create a reusable point for bounds checking later
boundsPoint = new Phaser.Point(0, 0);
// create our reusable view rectangle
viewRect = new Phaser.Rectangle(0, 0, game.width, game.height);
// create a world group separate from the actual world
gameWorld = game.add.group();
gameWorld.position.setTo(game.world.centerX, game.world.centerY);
// create a group for the clippable world objects
bgGroup = game.add.group(gameWorld);
// create a crapload of squares in the world to show movement/zooming
var sqr, size;
for (var i = 0; i < 2500; i++) {
size = game.rnd.integerInRange(5, 20);
sqr = game.add.graphics(game.rnd.integerInRange(-1000, 1000), game.rnd.integerInRange(-1000, 1000), bgGroup);
sqr.beginFill(0x666666);
sqr.drawRect(size * -0.5, size * -0.5, size, size); // center the square on its position
sqr.endFill();
}
// add a player sprite to give context to the movement
player = game.add.graphics(-15, -15, gameWorld);
player.beginFill(0x00ff00);
player.drawCircle(0, 0, 30);
player.endFill();
// set our world size to be bigger than the window so we can move the camera
game.world.setBounds(-1000, -1000, 2000, 2000);
// move our camera half the size of the viewport back so the pivot point is in the center of our view
// game.camera.x = (game.width * -0.5);
// game.camera.y = (game.height * -0.5);
// an immovable UI element
uiGroup = game.add.group();
var t = game.add.text(16, 16, "My UI!", {
font: "32px Arial",
fill: "#ff0",
align: "center"
});
...