Merge pull request #71 from webeled/dev

More examples migrated across.

examples/camera/follow styles.php

@@ -71,9 +71,6 @@
 
         game.camera.follow(ufo);
 
-        
-
-
         // follow style switch buttons
         btn0 = game.add.button(6, 40, 'button', lockonFollow,this, 0, 0, 0);
         btn1 = game.add.button(6, 120, 'button', platformerFollow,this, 1, 1, 1);

examples/groups/add to group 1.php

@@ -0,0 +1,63 @@
+<?php
+    $title = "Adding to group using 'add'";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render });
+
+   var friendAndFoe,
+        enemies;
+
+    function preload() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        
+    }
+    function create() {
+
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+
+        // Use game.add (GameObjectFactory) to create sprites, those
+        // newly created ones will be added to game.world.group
+        // automatically. While you can still use new to allocate and
+        // only add them to your own groups.
+         var ufo = game.add.sprite(200, 240, 'ufo');
+        friendAndFoe.add(ufo);
+
+
+        // Create some enemies using new keyword.
+        // (Don't forget to pass game as the first parameter.)
+        var enemy;
+        for (var i = 0; i < 16; i++) {
+
+            enemy = new Phaser.Sprite(game,
+                360 + Math.random() * 200, 120 + Math.random() * 200,
+                'baddie');
+
+            enemies.add(enemy);
+        }
+
+    }
+    function render() {
+
+        game.debug.renderText('ufo added to game.world.group and "friendAndFoe" group', 20, 24);
+        game.debug.renderText('others ONLY added to "enemies" group', 20, 40);
+
+    }
+
+
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>
+

examples/groups/add to group 2.php

@@ -0,0 +1,56 @@
+<?php
+    $title = "Adding to group using create";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render });
+
+   function preload() {
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        
+    }
+
+    var friendAndFoe,
+        enemies;
+
+    function create() {
+        // Create some local groups for later use.
+        friendAndFoe = game.add.group();
+        enemies = game.add.group();
+
+        // You can directly create a sprite and add it to a group
+        // using just one line. 
+        friendAndFoe.create(200, 240, 'ufo');
+
+        // Create some enemies.
+        for (var i = 0; i < 8; i++) {
+            createBaddie();
+        }
+
+        // Tap to create new baddie sprites.
+        game.input.onTap.add(createBaddie, this);
+    }
+    function createBaddie() {
+
+        enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200,'baddie');
+    }
+
+    function render() {
+
+        game.debug.renderText('Tap screen or click to create new baddies.', 16, 24);
+    }
+
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>
+

examples/groups/bring to top 2.php

@@ -0,0 +1,101 @@
+<?php
+    $title = "Bringing to top and game indexes";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render });
+
+    function preload() {
+
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_karamoon.png');
+        game.load.image('snot', 'assets/pics/nslide_snot.png');
+        game.load.image('atari1', 'assets/sprites/atari130xe.png');
+        game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
+        game.load.image('coke', 'assets/sprites/cokecan.png');
+        game.load.image('disk', 'assets/sprites/oz_pov_melting_disk.png');
+        
+
+    }
+
+    var group1,
+        group2,
+        coke,
+        disk;
+
+    function create() {
+
+        //  Create a background image
+        game.add.sprite(0, 0, 'beast');
+
+        //  Create a Group that will sit above the background image
+        group1 = game.add.group();
+
+        //  Create a Group that will sit above Group 1
+        group2 = game.add.group();
+
+        //  Now let's create some random sprites and enable them all for drag and 'bring to top'
+        for (var i = 0; i < 10; i++)
+        {
+
+            var tempSprite = game.add.sprite(game.stage.randomX, game.stage.randomY, 'atari1');
+
+            tempSprite.name = 'atari' + i;
+            tempSprite.input.start(i, true);
+            tempSprite.input.enableDrag(false, true);
+
+            group1.add(tempSprite);
+
+            //  Sonics
+
+            var tempSprite=game.add.sprite(game.stage.randomX, game.stage.randomY, 'sonic');
+
+            tempSprite.name = 'sonic' + i;
+            tempSprite.input.start(10 + i, true);
+            tempSprite.input.enableDrag(false, true);
+
+            group2.add(tempSprite);
+        }
+
+        //  Add 2 control sprites into each group - these cannot be dragged but should be bought to the top each time
+        coke = group1.create(100, 100, 'coke');
+        disk = group2.create(400, 300, 'disk');
+
+        //  Create a foreground image - everything should appear behind this, even when dragged
+        var snot = game.add.sprite(game.world.centerX, game.world.height, 'snot');
+        snot.anchor.setTo(0.5, 1);
+
+        //  You can click and drag any sprite but Sonic sprites should always appear above the Atari sprites
+        //  and both types of sprite should only ever appear above the background and behind the 
+
+    }
+
+    function update() {
+
+        if (game.input.keyboard.justReleased(Phaser.Keyboard.ONE))
+        {
+            coke.bringToTop();
+        }
+
+        if (game.input.keyboard.justReleased(Phaser.Keyboard.TWO))
+        {
+            disk.bringToTop();
+        }
+
+    }
+
+    function render() {
+        game.debug.renderInputInfo(32, 32);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>
+

examples/groups/bring to top.php

@@ -0,0 +1,46 @@
+ 
+ <?php
+    $title = "Bring to Top using parent container";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render : render });
+
+    var container;
+
+    function preload() {
+        game.load.spritesheet('button', 'assets/buttons/number-buttons.png', 160, 160);
+        
+    }
+    function create() {
+        // Container for sorting the buttons, which we'll use to make buttons
+        // to the top later.
+        container = game.add.group();
+
+        // Add buttons to container.
+        container.add(game.add.button(200, 100, 'button', bringMeToTop, this, 0, 0, 0));
+        container.add(game.add.button(300, 100, 'button', bringMeToTop, this, 1, 1, 1));
+        container.add(game.add.button(100, 200, 'button', bringMeToTop, this, 2, 2, 2));
+        container.add(game.add.button(400, 200, 'button', bringMeToTop, this, 3, 3, 3));
+        container.add(game.add.button(300, 300, 'button', bringMeToTop, this, 4, 4, 4));
+        container.add(game.add.button(200, 300, 'button', bringMeToTop, this, 5, 5, 5));
+    }
+    function render() {
+
+       game.debug.renderText('Tap or click buttons to bring it to the top.', 32, 32);
+    }
+    function bringMeToTop(btn) {
+        container.bringToTop(btn);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/call all.php

@@ -0,0 +1,52 @@
+ 
+ <?php
+    $title = "Calling a function on all members of the group";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render : render });
+
+    function preload() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
+        
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // Enable input.
+            item.input.start(0, true);
+            item.events.onInputUp.add(kill);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+            item.input.start(0, true);
+            item.events.onInputUp.add(kill);
+        }
+        // Add a button to revive all the items.
+        game.add.button(270, 400, 'reviveBtn', reviveAll, this, 0, 0, 0);
+    }
+    function kill(item) {
+        item.kill();
+    }
+    function reviveAll() {
+        game.world.group.callAll('revive');
+    }
+    function render() {
+
+        game.debug.renderText('Tap or click an item to kill it, and press the revive button to revive them all.', 160, 500);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/create group.php

@@ -0,0 +1,57 @@
+ 
+ <?php
+    $title = "Add a new sprite and log what happened";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create});
+
+     function preload() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
+        
+
+    }
+
+    var firstGroup;
+
+    function create() {
+
+        //  Here we'll create a new Group
+        firstGroup = game.add.group();
+
+        //  And add some sprites to it
+        for (var i = 0; i < 10; i++)
+        {
+            //  Create a new sprite at a random screen location
+            var newSprite = new Phaser.Sprite(game, game.stage.randomX, game.stage.randomY, 'sonic');
+
+            //  This set-ups a listener for the event, view your console.log output to see the result
+            newSprite.events.onAddedToGroup.add(logGroupAdd);
+
+            //  Add the sprite to the Group
+            firstGroup.add(newSprite);
+        }
+
+    }
+
+    function logGroupAdd(sprite, group) {
+
+        console.log('Sprite added to Group', group.ID, 'at z-index:', group.getIndex(sprite));
+
+
+
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/display order.php

@@ -0,0 +1,64 @@
+ 
+ <?php
+    $title = "Retaining the display order when a sprite is dead";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+   function preload() {
+
+        game.load.image('atari1', 'assets/sprites/atari130xe.png');
+        game.load.image('atari2', 'assets/sprites/atari800xl.png');
+        game.load.image('card', 'assets/sprites/mana_card.png');
+
+        
+
+    }
+
+    var items;
+    card;
+
+    function create() {
+
+        items = game.add.group();
+
+        //  Items are rendered in the depth order in which they are added to the Group
+
+        items.create(64, 100, 'atari1');
+        card = items.create(240, 80, 'card');
+        items.create(280, 100, 'atari2');
+
+        game.input.onTap.addOnce(removeCard, this);// obviously the event can be fired only once
+
+    }
+
+    function removeCard() {
+
+        //  Now let's kill the card sprite
+        card.kill();
+
+        game.input.onTap.addOnce(replaceCard, this);
+
+    }
+
+    function replaceCard() {
+
+        //  And bring it back to life again - I assume it will render in the same place as before?
+        var bob = items.getFirstDead();
+
+        bob.revive();
+
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/for each.php

@@ -0,0 +1,50 @@
+ 
+ <?php
+    $title = "iterating over a group";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render : render });
+
+    var baseAlphaIncSpeed= 0.006;
+
+    function preload() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        
+    }
+    function create() {
+        // Add some items.
+        for (var i = 0; i < 3; i++) {
+            game.add.sprite(290, 98 * (i + 1), 'item', i)
+                .alphaIncSpeed = baseAlphaIncSpeed * (i + 1);
+            game.add.sprite(388, 98 * (i + 1), 'item', i + 3)
+                .alphaIncSpeed = baseAlphaIncSpeed * (i + 4);
+        }
+    }
+    function update() {
+        // Animating alpha property of each item using forEach() method.
+        game.world.group.forEach(function(item) {
+            // Update alpha first.
+            item.alpha -= item.alphaIncSpeed;
+            // Check for switch between increasing and descreasing.
+            if (item.alpha < 0.001 || item.alpha > 0.999) {
+                item.alphaIncSpeed *= -1;
+            }
+        });
+    }
+    function render() {
+
+        game.debug.renderText('Alpha of items is always changing.', 280, 480);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/get first.php

@@ -0,0 +1,72 @@
+ 
+ <?php
+    $title = "Getting the first child";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render});
+
+    function preload() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
+        
+    }
+
+    var timer,
+    	cycle;
+
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item beside the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+
+        // Set a timer so we can perform an action after a delay.
+        timer = 0;
+        cycle = 1000;
+        
+    }
+    function update() {
+    	
+
+       
+        
+        if (game.time.now > timer) {
+
+        	 // Update timer.
+            timer = game.time.now +cycle;
+            
+            // Get the first alive item and kill it.
+            var item = game.world.group.getFirstAlive();
+
+            if(item){
+
+            	item.kill();
+            }
+            
+
+        }
+
+    }
+    function render() {
+
+        game.debug.renderText('One item will be killed each second.', 280, 420);
+        // Get living and dead number of a group.
+        game.debug.renderText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 440);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/group as layer.php

@@ -0,0 +1,91 @@
+ 
+ <?php
+    $title = "Using groups to handle indexes inside of your game";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+        function preload() {
+        game.world.setSize(1280, 800);
+
+        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);
+
+        
+    }
+    function create() {
+        // Create the sky layer, behind everything and donot move.
+        var skyLayer = game.add.group();
+        skyLayer.z = 0;
+        // Create the cloud layer, only beyond the sky.
+        var cloudLayer = game.add.group();
+        cloudLayer.z = 1;
+        // Create the ground, behind the river and beyond clouds.
+        var groundLayer = game.add.group();
+        groundLayer.z = 2;
+        // Create the sprite layer. This should behind the river,
+        // and beyond the ground, cloud and sky layer.
+        var spriteLayer = game.add.group();
+        spriteLayer.z = 3;
+        // Create the river layer, beyond everything.
+        var riverLayer = game.add.group();
+        riverLayer.z = 4;
+
+        // Add sky background to skyLayer.
+        var sky = new Phaser.Sprite(game, 0, 0, 'sky');
+        sky.scrollFactor.setTo(0, 0);
+        skyLayer.add(sky);
+
+        // Add clouds to cloudLayer.
+        var cloud0 = new Phaser.Sprite(game, 200, 120, 'cloud0');
+        cloud0.scrollFactor.setTo(0.3, 0.1);
+        var cloud1 = new Phaser.Sprite(game, -60, 120, 'cloud1');
+        cloud1.scrollFactor.setTo(0.5, 0.1);
+        var cloud2 = new Phaser.Sprite(game, 900, 170, 'cloud2');
+        cloud2.scrollFactor.setTo(0.7, 0.1);
+        cloudLayer.add(cloud0);
+        cloudLayer.add(cloud1);
+        cloudLayer.add(cloud2);
+
+        // Add ground sprite to groundLayer.
+        var ground = new Phaser.Sprite(game, 0, 360, 'ground');
+        ground.scrollFactor.setTo(0.5, 0.1);
+        groundLayer.add(ground);
+
+        // Add river to riverLayer.
+        var river = new Phaser.Sprite(game, 0, 400, 'river');
+        river.scrollFactor.setTo(1.3, 0.16);
+        riverLayer.add(river);
+
+        // Add sprites to spriteLayer.
+        var ufo = new Phaser.Sprite(game, 360, 240, 'ufo');
+        ufo.anchor.setTo(0.5, 0.5);
+        spriteLayer.add(ufo);
+    }
+    function render() {
+        
+        game.debug.renderText('sky layer:    z = 0', 16, 20);
+        game.debug.renderText('cloud layer:  z = 1', 16, 36);
+        game.debug.renderText('ground layer: z = 2', 16, 52);
+        game.debug.renderText('sprite layer: z = 3', 16, 68);
+        game.debug.renderText('river layer:  z = 4', 16, 84);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/group transform - rotate.php

@@ -0,0 +1,63 @@
+ 
+ <?php
+    $title = "Rotating an entire group";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update : update,render:render});
+
+    var robot;
+    var eye,
+        body,
+        leftArm,
+        rightArm,
+        leftLeg,
+        rightLeg;
+
+    function preload() {
+
+        game.load.image('eye', 'assets/sprites/robot/eye.png');
+        game.load.image('body', 'assets/sprites/robot/body.png');
+        game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
+        game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
+        game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
+        game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
+        
+    }
+    function create() {
+
+        // Use groups of sprites to create a big robot.
+        // Robot itself, you can subclass group class in a real game.
+        robot = game.add.group();
+        // Robot components.
+        leftArm = robot.create(90, 175, 'arm-l');
+        rightArm = robot.create(549, 175, 'arm-r');
+        leftLeg = robot.create(270, 325, 'leg-l');
+        rightLeg = robot.create(410, 325, 'leg-r');
+        body = robot.create(219, 32, 'body');
+        eye = robot.create(335, 173,'eye');
+
+    }
+    function update() {
+        // Change parent's rotation to change all the childs.
+        robot.angle+=2;
+
+    }
+
+
+    function render() {
+        
+        game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/group transform - tween.php

@@ -0,0 +1,72 @@
+ 
+ <?php
+    $title = "Tweening an entire group";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+    var robot;
+    var eye,
+        body,
+        leftArm,
+        rightArm,
+        leftLeg,
+        rightLeg;
+
+    
+
+    function preload() {
+
+        game.load.image('eye', 'assets/sprites/robot/eye.png');
+        game.load.image('body', 'assets/sprites/robot/body.png');
+        game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
+        game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
+        game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
+        game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        
+    }
+    function create() {
+        // Add some items.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            item = game.add.sprite(290, 98 * (i + 1), 'item', i);
+            // An item besides the left one.
+            item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
+        }
+        // Use groups of sprites to create a big robot.
+        // Robot itself, you can subclass group class in a real game.
+        robot = game.add.group();
+        // Robot components.
+        leftArm = robot.create(90, 175, 'arm-l');
+        rightArm = robot.create(549, 175, 'arm-r');
+        leftLeg = robot.create(270, 325, 'leg-l');
+        rightLeg = robot.create(410, 325, 'leg-r');
+        body = robot.create(219, 32, 'body');
+        eye = robot.create(335, 173,'eye');
+
+        // Tween the robot's size, so all the components also scaled.
+         game.add.tween(robot._container.scale)
+            .to({x: 1.2, y: 1.2}, 1000, Phaser.Easing.Back.InOut, true, 0, false)
+            .yoyo(true);
+    }
+
+
+    function render() {
+
+        game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/group transform.php

@@ -0,0 +1,78 @@
+ 
+ <?php
+    $title = "Grouping and dragging";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+    var robot;
+    var eye,
+        body,
+        leftArm,
+        rightArm,
+        leftLeg,
+        rightLeg;
+
+    function preload() {
+
+        game.load.image('eye', 'assets/sprites/robot/eye.png');
+        game.load.image('body', 'assets/sprites/robot/body.png');
+        game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
+        game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
+        game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
+        game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
+        
+    }
+    function create() {
+
+        // Use groups of sprites to create a big robot.
+        // Robot itself, you can subclass group class in a real game.
+        robot = game.add.group();
+        // Robot components.
+        leftArm = robot.create(90, 175, 'arm-l');
+        rightArm = robot.create(549, 175, 'arm-r');
+        leftLeg = robot.create(270, 325, 'leg-l');
+        rightLeg = robot.create(410, 325, 'leg-r');
+        body = robot.create(219, 32, 'body');
+        eye = robot.create(335, 173,'eye');
+
+        leftArm.input.start(0, false, true);
+        leftArm.input.enableDrag();
+        rightArm.input.start(0, false, true);
+        rightArm.input.enableDrag();
+        leftLeg.input.start(0, false, true);
+        leftLeg.input.enableDrag();
+        rightLeg.input.start(0, false, true);
+        rightLeg.input.enableDrag();
+        body.input.start(0, false, true);
+        body.input.enableDrag();
+        eye.input.start(0, false, true);
+        eye.input.enableDrag();
+    }
+
+
+    function render() {
+
+        game.debug.renderSpriteInfo(leftArm, 32, 30);
+        game.debug.renderSpriteInfo(rightArm, 32, 180);
+        game.debug.renderSpriteInfo(leftLeg, 32, 325);
+        game.debug.renderSpriteInfo(rightLeg, 32, 470);
+        game.debug.renderSpriteInfo(rightLeg, 450, 30);
+        game.debug.renderSpriteInfo(rightLeg, 450, 180);
+
+        game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
+        game.debug.renderText('Drag each part to re-position them. ', 288, 592);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/recyling.php

@@ -0,0 +1,70 @@
+ 
+ <?php
+    $title = "Recycling inside a group";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+
+    var enemies;
+
+    function preload() {
+
+        game.load.image('baddie', 'assets/sprites/space-baddie.png');
+        game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70);
+        
+    }
+    function create() {
+        // Create a enemies group to store the baddies
+        enemies = game.add.group();
+
+        // Create some enemies.
+        for (var i = 0; i < 8; i++) {
+            // Since the getFirstExists() which we'll use for recycling
+            // cannot allocate new objects, create them manually here.
+            enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200,
+                'baddie');
+        }
+
+        // Create buttons to create and kill baddies.
+        game.add.button(16, 50, 'button', createBaddie,this, 0, 0, 0);
+        game.add.button(16, 130, 'button', killBaddie,this, 1, 1, 1);
+    }
+    function killBaddie() {
+
+        var baddie = enemies.getFirstAlive();
+        if (baddie) baddie.kill();
+
+
+    }
+    function createBaddie() {
+
+        // Recycle using getFirstExists(false)
+        // Notice that this method will not create new objects if there's no one
+        // available, and it won't change size of this group.
+        var enemy = enemies.getFirstExists(false);
+        if (enemy) {
+            enemy.revive();
+        }
+    }
+
+
+    function render() {
+
+        game.debug.renderText('Recycle baddies from a group using getFirstExists.', 16, 24);
+        game.debug.renderText('Notice that you cannot add more than 8 baddies since we only create 8 instance.', 16, 36);
+        game.debug.renderText('Living baddies: ' + (enemies.countLiving()+1), 340, 420);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/remove.php

@@ -0,0 +1,73 @@
+ 
+ <?php
+    $title = "Remove a sprite from a group";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+    // Group contains items.
+    var items;
+
+    function preload() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        game.load.image('rect', 'assets/tests/200x100corners.png');
+        
+    }
+    function create() {
+        // Create item container group.
+        items = game.add.group();
+
+        // Add some items and add them to the container group,
+        // then you can drag and drop them to remove.
+        var item;
+
+        for (var i = 0; i < 6; i++) {
+            // Directly create sprites from the group.
+            item = items.create(90, 90 * i, 'item', i);
+            // Enable input detection, then it's possible be dragged.
+            item.input.start(0,true);
+            // Make this item draggable.
+            item.input.enableDrag();
+            // Then we make it snap to 90x90 grids.
+            item.input.enableSnap(90, 90, false, true);
+            // Add a handler to remove it using different options when dropped.
+            item.events.onDragStop.add(dropHandler);
+        }
+
+        // Create a rectangle drop it at this rectangle to
+        // remove it from origin group normally or
+        // cut it from the group's array entirely.
+        var rect = game.add.sprite(390, 0, 'rect');
+        rect.scale.setTo(2.0, 3.0);
+    }
+
+    function render() {
+
+        game.debug.renderText('Size of group: ' + items.length, 100, 560);
+        game.debug.renderText('Drop here to cut items from groups entirely.', 390, 24);
+    }
+    function dropHandler(item, pointer) {
+
+        if (item.x < 90) {
+            item.x = 90;
+        }
+        else if (item.x > 400) { // So it is dropped in one rectangle.
+                // Remove it from group normally, so the group's size does not change.
+                items.remove(item);
+                console.log("Group length : "+items.length);
+
+        }
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/replace.php

@@ -0,0 +1,79 @@
+ 
+ <?php
+    $title = "Replace items from different groups";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+    // Left and right group.
+    var left, right;
+    // The first selected item.
+    var selected = null;
+
+    function preload() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        
+    }
+    function create() {
+        left = game.add.group();
+        right = game.add.group();
+        // Add some items to left side, and set a onDragStop listener
+        // to limit its location when dropped.
+        var item;
+        for (var i = 0; i < 3; i++) {
+            // Directly create sprites from the left group.
+            item = left.create(290, 98 * (i + 1), 'item', i);
+            // Enable input.
+            item.input.start(0, false, true);
+            item.events.onInputUp.add(select);
+            // Add another to the right group.
+            item = right.create(388, 98 * (i + 1), 'item', i + 3);
+            // Enable input.
+            item.input.start(0,true);
+            item.events.onInputUp.add(select);
+        }
+    }
+    function select(item, pointer) {
+        // If there's no one selected, mark it as selected.
+        if (!selected) {
+            selected = item;
+            selected.alpha = 0.5;
+        }
+        else {
+            // Items from different group selected, replace with each other;
+            // Something like a swap action, maybe better done with
+            // group.swap() method.
+            if (selected.group !== item.group) {
+                // Move the later selected to the first selected item's position.
+                item.x = selected.x;
+                item.y = selected.y;
+                // Replace first selected with the second one.
+                selected.group.replace(selected, item);
+            }
+            else {
+                selected.alpha = 1;
+            }
+
+            // After checking, now clear the helper var.
+            selected = null;
+        }
+    }
+
+    function render() {
+        game.debug.renderText('Left Group', 300, 80);
+        game.debug.renderText('Right Group', 400, 80);
+        game.debug.renderText('Click an item and one from another group to replace it.', 240, 480);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/groups/set All.php

@@ -0,0 +1,46 @@
+ 
+ <?php
+    $title = "Setting properies of all children";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
+
+     var baseIncSpeed= 0.006;
+
+    function preload() {
+        game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
+        
+    }
+    function create() {
+        // Add some items.
+        for (var i = 0; i < 3; i++) {
+            // Give the items a different alpha increase speed.
+            game.add.sprite(290, 98 * (i + 1), 'item', i)
+                .alphaIncSpeed = baseIncSpeed * (i + 1);
+            game.add.sprite(388, 98 * (i + 1), 'item', i + 3)
+                .alphaIncSpeed = baseIncSpeed * (i + 4);
+        }
+
+        game.input.onTap.add(resetAlpha,this);
+    }
+    function resetAlpha() {
+        // Set "alpha" value of all the childs.
+        game.world.group.setAll('alpha', Math.random());
+    }
+    function render() {
+
+        game.debug.renderText('Tap or click to set random alpha of all the items.', 240, 480);
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/input/keyboard.php

@@ -0,0 +1,95 @@
+<?php
+    $title = "Using the keyboard to move a sprite";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render });
+
+    var ufo,
+        leftBtn,
+        rightBtn;
+    var speed=4;
+
+    function preload() {
+        game.world.setSize(1280, 600);
+        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/arrow-button.png', 112, 95);
+
+        game.load.image('ufo', 'assets/sprites/ufo.png');
+
+        
+    }
+    function create() {
+        // background images
+        game.add.sprite(0, 0, 'sky')
+            .scrollFactor.setTo(0, 0);
+        game.add.sprite(0, 360, 'ground')
+            .scrollFactor.setTo(0.5, 0.5);
+        game.add.sprite(0, 400, 'river')
+            .scrollFactor.setTo(1.3, 1.3);
+        game.add.sprite(200, 120, 'cloud0')
+            .scrollFactor.setTo(0.3, 0.3);
+        game.add.sprite(-60, 120, 'cloud1')
+            .scrollFactor.setTo(0.5, 0.3);
+        game.add.sprite(900, 170, 'cloud2')
+            .scrollFactor.setTo(0.7, 0.3);
+
+        // Create a ufo spirte as player.
+        ufo = game.add.sprite(320, 240, 'ufo');
+        ufo.anchor.setTo(0.5, 0.5);
+
+        // Make the default camera follow the ufo.
+        game.camera.follow(ufo);
+
+        // Add 2 sprite to display hold direction.
+        leftBtn = game.add.sprite(160 - 112, 200, 'button', 0);
+        leftBtn.scrollFactor.setTo(0, 0);
+        leftBtn.alpha = 0;
+        rightBtn = game.add.sprite(640 - 112, 200, 'button', 1);
+        rightBtn.alpha = 0;
+        rightBtn.scrollFactor.setTo(0, 0);
+    }
+    function update() {
+        // Check key states every frame.
+        // Move ONLY one of the left and right key is hold.
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) &&
+            !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+            ufo.x -= speed;
+            ufo.rotation = -15;
+            leftBtn.alpha = 0.6;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) &&
+            !game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+            ufo.x += speed;
+            ufo.rotation = 15;
+            rightBtn.alpha = 0.6;
+        }
+        else {
+            ufo.rotation = 0;
+            leftBtn.alpha = rightBtn.alpha = 0;
+        }
+    }
+    function render() {
+
+        game.debug.renderText('Hold left/right to move the ufo.');
+    }
+
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>
+

src/core/Game.js

@@ -31,7 +31,7 @@ Phaser.Game = function (width, height, renderer, parent, state, transparent, ant
 	renderer = renderer || Phaser.AUTO;
 	parent = parent || '';
 	state = state || null;
-	transparent = transparent || false;
+	if (typeof transparent == 'undefined') { transparent = false; }
 	antialias = typeof antialias === 'undefined' ? true : antialias;
 
 	/**

src/input/InputHandler.js

@@ -75,7 +75,7 @@ Phaser.InputHandler.prototype = {
 	start: function (priority, useHandCursor) {
 
 		priority = priority || 0;
-		useHandCursor = useHandCursor || false;
+		if (typeof useHandCursor == 'undefined') { useHandCursor = false; }
 
         //  Turning on
         if (this.enabled == false)