JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser/2.2.2/phaser.min.js"></script>
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;
var player;
var bgGroup;
var viewRect;
var boundsPoint;
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 group for the clippable world objects
bgGroup = game.add.group();
// create a crapload of squares in the world to show movement/zooming
var sqr, size;
for (var i = 0; i < 600; i++) {
size = game.rnd.integerInRange(5, 20);
sqr = game.add.graphics(game.rnd.integerInRange(-600, 600), game.rnd.integerInRange(-600, 600), 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);
player.beginFill(0xffffff);
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(-300, -300, 600, 600);
// 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);
}
var update = function(game) {
// movement
if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
game.world.pivot.y -= 5;
player.y -= 5;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
game.world.pivot.y += 5;
player.y += 5;
}
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
game.world.pivot.x -= 5;
player.x -= 5;
}
...