Camera tests, some of them not finished because of bugs.

Tests/cameras/basic follow.js

@@ -0,0 +1,64 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    var ufo;
+    var speed = 4;
+
+    function init() {
+        game.world.setSize(1280, 600, true);
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+        game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
+        game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
+        game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
+
+        game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
+
+        game.load.start();
+    }
+    function create() {
+        // background images
+        game.add.sprite(0, 0, 'sky')
+            .transform.scrollFactor.setTo(0, 0);
+        game.add.sprite(0, 360, 'ground')
+            .transform.scrollFactor.setTo(0.5, 0.5);
+        game.add.sprite(0, 400, 'river')
+            .transform.scrollFactor.setTo(1.3, 1.3);
+        game.add.sprite(200, 120, 'cloud0')
+            .transform.scrollFactor.setTo(0.3, 0.3);
+        game.add.sprite(-60, 120, 'cloud1')
+            .transform.scrollFactor.setTo(0.5, 0.3);
+        game.add.sprite(900, 170, 'cloud2')
+            .transform.scrollFactor.setTo(0.7, 0.3);
+
+        // ufo spirte
+        ufo = game.add.sprite(320, 240, 'ufo');
+        ufo.animations.add('fly', null, 30, false);
+        ufo.animations.play('fly');
+        ufo.transform.origin.setTo(0.5, 0.5);
+
+        // make camera follows ufo
+        game.camera.follow(ufo);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+        }
+        else {
+            ufo.rotation = 0;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            ufo.y -= speed;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+            ufo.y += speed;
+        }
+    }
+})();

Tests/cameras/camera fade.js

@@ -19,17 +19,24 @@
         circle3 = game.add.sprite(221, 318, 'magenta');
 
         circle1.input.start(0, false, true);
+        circle1.events.onInputUp.add(fade1, this);
 
-        fx = game.camera.fx.add(Phaser.FX.Camera.Shake);
+        fx = game.camera.fx.add(Phaser.FX.Camera.Fade);
     }
     function update() {
-        if (circle1.input.justReleased(0, 20)) {
-            console.log('pressed');
-            fx.start(0.05, 0.5, function() {
-                console.log('fin');
-            });
-        }
     }
     function render() {
+        game.camera.fx.render(game.camera,
+            game.camera.x, game.camera.y,
+            game.camera.width, game.camera.height);
+        game.camera.fx.postRender(game.camera,
+            game.camera.x, game.camera.y,
+            game.camera.width, game.camera.height);
+    }
+    function fade1(pointer) {
+        console.log('pressed');
+        fx.start(0.05, 0.5, function() {
+            console.log('fin');
+        });
     }
 })();

Tests/cameras/camera texture.js

@@ -1,47 +1,19 @@
 /// <reference path="../../Phaser/Game.ts" />
 (function () {
-    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
-
-    var radar;
-    var ships = [];
-
-    var button;
 
     function init() {
         game.world.setSize(800, 600, true);
-        game.load.image('radar-surface', 'assets/tests/radar-surface.png');
+        game.load.image('background', 'assets/misc/water_texture.jpg');
-        game.load.image('ship', 'assets/sprites/asteroids_ship_white.png');
-        game.load.image('enemy-ship', 'assets/sprites/asteroids_ship.png');
-
-        game.load.image('button', 'assets/tests/320x200.png');
 
         game.load.start();
     }
     function create() {
-        for (var i = 0; i < 4; i++) {
+        game.camera.texture.loadImage('background', false);
-            ships.push(game.add.sprite(100 + i * 10, 300 + i * 16, 'ship'));
-        }
-        ships.push(game.add.sprite(160, 320, 'enemy-ship'));
-        radar = game.add.sprite(0, 0, 'radar-surface');
-
-        game.camera.setSize(400, 600);
-        var camera2 = game.add.camera(0, 0, 400, 600);
-        camera2.x = 400;
-
-        button = game.add.sprite(500, 100, 'button');
-        button.input.start(0, false, true);
-    }
-    function update() {
-        if (button.input.justReleased(0, 20)) {
-        }
-
-        for (var i = 0; i < ships.length; i++) {
-            ships[i].x += 1;
-            if (ships[i].x > 400) {
-                ships[i].x = 40;
-            }
-        }
     }
     function render() {
+        Phaser.DebugUtils.context.fillStyle = 'rgb(255, 255, 255)';
+        Phaser.DebugUtils.context.fillText('Draw background image using camera.texture property.',
+            196, 320);
     }
 })();

Tests/cameras/edit-template.js

@@ -1,47 +0,0 @@
-/// <reference path="../../Phaser/Game.ts" />
-(function () {
-    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
-
-    var circle1, circle2, circle3;
-    var button;
-
-    function init() {
-        game.world.setSize(800, 600, true);
-        game.load.image('blue', 'assets/tests/blue-circle.png');
-        game.load.image('yellow', 'assets/tests/yellow-circle.png');
-        game.load.image('magenta', 'assets/tests/magenta-circle.png');
-
-        game.load.image('button', 'assets/tests/320x200.png');
-
-        game.load.start();
-    }
-    function create() {
-        circle1 = game.add.sprite(114, 34, 'blue');
-        circle2 = game.add.sprite(426, 86, 'yellow');
-        circle3 = game.add.sprite(221, 318, 'magenta');
-
-        circle1.input.start(0, false, true);
-        circle1.input.enableDrag(false);
-
-        circle2.input.start(0, false, true);
-        circle2.input.enableDrag(false);
-
-        circle3.input.start(0, false, true);
-        circle3.input.enableDrag(false);
-
-        button = game.add.sprite(500, 100, 'button');
-        button.input.start(0, false, true);
-    }
-    function update() {
-        if (button.input.justReleased(0, 20)) {
-            console.log('<1>: (' + circle1.x + ', ' + circle1.y + ')');
-            console.log('<2>: (' + circle2.x + ', ' + circle2.y + ')');
-            console.log('<3>: (' + circle3.x + ', ' + circle3.y + ')');
-        }
-    }
-    function render() {
-        circle1.input.renderDebugInfo(32, 32);
-        circle2.input.renderDebugInfo(32, 160);
-        circle3.input.renderDebugInfo(32, 296);
-    }
-})();

Tests/cameras/follow styles.js

@@ -0,0 +1,99 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var ufo,
+        speed = 4;
+
+    var btn0, btn1, btn2, btn3;
+    var style = 'default';
+
+    function init() {
+        game.world.setSize(1280, 800, true);
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+        game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
+        game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
+        game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
+
+        game.load.spritesheet('button', 'assets/buttons/follow-style-button.png', 224, 70);
+
+        game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
+
+        game.load.start();
+    }
+    function create() {
+        // background images
+        game.add.sprite(0, 0, 'sky')
+            .transform.scrollFactor.setTo(0, 0);
+        game.add.sprite(0, 360, 'ground')
+            .transform.scrollFactor.setTo(0.5, 0.1);
+        game.add.sprite(0, 400, 'river')
+            .transform.scrollFactor.setTo(1.3, 0.16);
+        game.add.sprite(200, 120, 'cloud0')
+            .transform.scrollFactor.setTo(0.3, 0.1);
+        game.add.sprite(-60, 120, 'cloud1')
+            .transform.scrollFactor.setTo(0.5, 0.1);
+        game.add.sprite(900, 170, 'cloud2')
+            .transform.scrollFactor.setTo(0.7, 0.1);
+        // ufo spirte
+        ufo = game.add.sprite(360, 240, 'ufo');
+        ufo.animations.add('fly', null, 30, false);
+        ufo.animations.play('fly');
+        ufo.transform.origin.setTo(0.5, 0.5);
+
+        // make camera follows ufo
+        game.camera.follow(ufo);
+
+        // follow style switch buttons
+        btn0 = game.add.button(16, 40, 'button', lockonFollow, 0, 0, 0);
+        btn1 = game.add.button(16, 120, 'button', platformerFollow, 1, 1, 1);
+        btn2 = game.add.button(16, 200, 'button', topdownFollow, 2, 2, 2);
+        btn3 = game.add.button(16, 280, 'button', topdownTightFollow, 3, 3, 3);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+        }
+        else {
+            ufo.rotation = 0;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            ufo.y -= speed;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+            ufo.y += speed;
+        }
+    }
+    function render() {
+        if (game.camera.deadzone) {
+            Phaser.DebugUtils.renderRectangle(game.camera.deadzone, 'rgba(240, 112, 111, 0.4)');
+        }
+        // game.camera.renderDebugInfo(400, 16);
+        Phaser.DebugUtils.context.fillStyle = '#fff';
+        Phaser.DebugUtils.context.fillText('Click buttons to switch between different styles.', 360, 32);
+        Phaser.DebugUtils.context.fillText('Current style: ' + style, 360, 48);
+    }
+    function lockonFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_LOCKON);
+        style = 'STYLE_LOCKON';
+    }
+    function platformerFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_PLATFORMER);
+        style = 'STYLE_PLATFORMER';
+    }
+    function topdownFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_TOPDOWN);
+        style = 'STYLE_TOPDOWN';
+    }
+    function topdownTightFollow() {
+        game.camera.follow(ufo, Phaser.Camera.STYLE_TOPDOWN_TIGHT);
+        style = 'STYLE_TOPDOWN_TIGHT';
+    }
+})();

Tests/cameras/multi camera.js

@@ -0,0 +1,63 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var zombieCamera;
+
+    var zombie;
+    var walkSpeed = 2,
+        direction = 1;
+
+    function init() {
+        game.world.setSize(1280, 600, true);
+        game.load.image('ground', 'assets/tests/ground-2x.png');
+        game.load.image('river', 'assets/tests/river-2x.png');
+        game.load.image('sky', 'assets/tests/sky-2x.png');
+
+        game.load.spritesheet('zombie', 'assets/sprites/metalslug_monster39x40.png', 39, 40);
+
+        game.load.start();
+    }
+    function create() {
+        // background images
+        game.add.sprite(0, 0, 'sky');
+        game.add.sprite(0, 360, 'ground');
+        game.add.sprite(0, 400, 'river');
+
+        // zombie spirte
+        zombie = game.add.sprite(480, 336, 'zombie');
+        zombie.animations.add('walk', null, 30, true);
+        zombie.animations.play('walk');
+
+        // create a small camera which looks at the zombie
+        zombieCamera = game.add.camera(0, 0, 800, 600);
+        zombieCamera.x = 420;
+        zombieCamera.y = 240;
+        zombieCamera.setPosition(0, 0);
+        zombieCamera.setSize(200, 200);
+    }
+    function update() {
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            zombieCamera.x -= 2;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            zombieCamera.x += 2;
+        }
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+            zombieCamera.y -= 2;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+            zombieCamera.y += 2;
+        }
+        // zombie wandering update
+        zombie.x += walkSpeed * direction;
+        if (zombie.x > 540 || zombie.x < 440) {
+            direction *= -1;
+            zombie.transform.scale.setTo(direction, 1);
+        }
+    }
+    function render() {
+        game.camera.renderDebugInfo(32, 32);
+        zombieCamera.renderDebugInfo(32, 128);
+    }
+})();

Tests/cameras/radar template.js

@@ -0,0 +1,47 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
+
+    var radar;
+    var ships = [];
+
+    var button;
+
+    function init() {
+        game.world.setSize(800, 600, true);
+        game.load.image('radar-surface', 'assets/tests/radar-surface.png');
+        game.load.image('ship', 'assets/sprites/asteroids_ship_white.png');
+        game.load.image('enemy-ship', 'assets/sprites/asteroids_ship.png');
+
+        game.load.image('button', 'assets/tests/320x200.png');
+
+        game.load.start();
+    }
+    function create() {
+        for (var i = 0; i < 4; i++) {
+            ships.push(game.add.sprite(100 + i * 10, 300 + i * 16, 'ship'));
+        }
+        ships.push(game.add.sprite(160, 320, 'enemy-ship'));
+        radar = game.add.sprite(0, 0, 'radar-surface');
+
+        game.camera.setSize(400, 600);
+        var camera2 = game.add.camera(0, 0, 400, 600);
+        camera2.x = 400;
+
+        button = game.add.sprite(500, 100, 'button');
+        button.input.start(0, false, true);
+    }
+    function update() {
+        if (button.input.justReleased(0, 20)) {
+        }
+
+        for (var i = 0; i < ships.length; i++) {
+            ships[i].x += 1;
+            if (ships[i].x > 400) {
+                ships[i].x = 40;
+            }
+        }
+    }
+    function render() {
+    }
+})();