Lots of new examples :)

Lots of new examples, the wip/examples folder can be destoryed I think

examples/input/drag.php

@@ -1,5 +1,5 @@
 <?php
-    $title = "Test Title";
+    $title = "How to drag a sprite";
     require('../head.php');
 ?>
 

examples/input/drop limitation.php

@@ -0,0 +1,63 @@
+ 
+ <?php
+    $title = "Using a drop event to control the drag and drop";
+    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);
+        
+    }
+    function create() {
+
+        // Add some items to left side, and set a onDragStop listener
+        // to limit its location when dropped.
+
+        var item;
+        for (var i = 0; i < 6; i++) {
+            // Directly create sprites on the left group.
+            item = game.add.sprite(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 left and right side,
+            // also we make it only snap when released.
+            item.input.enableSnap(90, 90, false, true);
+
+            // Limit drop location to only the 2 columns.
+            item.events.onDragStop.add(fixLocation);
+        }
+    }
+
+    function render() {
+        game.debug.renderText('Group Left.', 100, 560);
+        game.debug.renderText('Group Right.', 280, 560);
+    }
+    function fixLocation(item) {
+        // Move the items when it is already dropped.
+        if (item.x < 90) {
+            item.x = 90;
+        }
+        else if (item.x > 180 && item.x < 270) {
+            item.x = 180;
+        }
+        else if (item.x > 360) {
+            item.x = 270;
+        }
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/input/game scale.php

@@ -0,0 +1,76 @@
+<?php
+    $title = "Scale the game and explore it using the keyboard";
+    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() {
+
+        //  This sets a limit on the up-scale
+        game.stage.scale.maxWidth = 800;
+        game.stage.scale.maxHeight = 600;
+
+        //  Then we tell Phaser that we want it to scale up to whatever the browser can handle, but to do it proportionally
+        game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
+
+        game.load.image('melon', 'assets/sprites/melon.png');
+
+        
+
+    }
+
+    function create() {
+
+    	//We increase the size of our game world
+        game.world.setSize(2000, 2000);
+
+        for (var i = 0; i < 1000; i++)
+        {
+        	//And spread some sprites inside it
+            game.add.sprite(game.world.randomX, game.world.randomY, 'melon');
+        }
+
+    }
+
+    function update() {
+
+    	//This allows us to move the game camera using the keyboard
+
+        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        {
+            game.camera.x -= 4;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        {
+            game.camera.x += 4;
+        }
+
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
+        {
+            game.camera.y -= 4;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
+        {
+            game.camera.y += 4;
+        }
+
+    }
+
+    function render() {
+
+        game.debug.renderInputInfo(16, 16);
+
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/input/keyboard.php

@@ -44,7 +44,7 @@
         game.add.sprite(900, 170, 'cloud2')
             .scrollFactor.setTo(0.7, 0.3);
 
-        // Create a ufo spirte as player.
+        // Create a ufo sprite as player.
         ufo = game.add.sprite(320, 240, 'ufo');
         ufo.anchor.setTo(0.5, 0.5);
 

examples/input/motion lock - horizontal.php

@@ -0,0 +1,54 @@
+<?php
+    $title = "Enable horizontal drag bounds";
+    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() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('sprite', 'assets/sprites/parsec.png');
+        
+
+    }
+
+    var sprite;
+
+    function create() {
+
+        game.stage.backgroundColor = 'rgb(85,85,85)';
+
+        sprite = game.add.sprite(200, 400, 'sprite');
+
+        //  Enable Input detection. Sprites have this disabled by default, 
+        //  so you have to start it if you want to interact with them.
+        sprite.input.start(0,true);
+
+        //  This allows you to drag the sprite. The parameter controls if you drag from the position you touched it (false)
+        //  or if it will snap to the center (true)
+        sprite.input.enableDrag();
+
+        //  This will lock the sprite so it can only be dragged horizontally, not vertically
+        sprite.input.allowVerticalDrag = false;
+
+    }
+
+    function render() {
+
+        game.debug.renderInputInfo(32, 32);
+        game.debug.renderSpriteInputInfo(sprite, 300, 32);
+
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/input/motion lock - vertical.php

@@ -0,0 +1,54 @@
+<?php
+    $title = "Enable vertical drag bounds";
+    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() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('sprite', 'assets/sprites/darkwing_crazy.png');
+        
+
+    }
+
+    var sprite;
+
+    function create() {
+
+        game.stage.backgroundColor = 'rgb(85,85,85)';
+
+        sprite = game.add.sprite(200, 200, 'sprite');
+
+        //  Enable Input detection. Sprites have this disabled by default, 
+        //  so you have to start it if you want to interact with them.
+        sprite.input.start(0,true);
+
+        //  This allows you to drag the sprite. The parameter controls if you drag from the position you touched it (false)
+        //  or if it will snap to the center (true)
+        sprite.input.enableDrag();
+
+        //  This will lock the sprite so it can only be dragged vertically, not horizontally
+        sprite.input.allowHorizontalDrag = false;
+
+    }
+
+    function render() {
+
+        game.debug.renderInputInfo(32, 32);
+        game.debug.renderSpriteInputInfo(sprite, 300, 32);
+
+    }
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/input/multi touch.php

@@ -7,13 +7,8 @@
 
 (function () {
 
-	var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+	var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', {create: create, render: render });
 
-	function preload() {
-
-		// game.load.image('disk', 'assets/sprites/ra_dont_crack_under_pressure.png');
-
-	}
 
 	function create() {
 
@@ -21,9 +16,6 @@
 
 	}
 
-	function update() {
-	}
-
 	function render() {
 
         game.debug.renderPointer(game.input.mousePointer);

examples/input/override browser keyboard controls.php

@@ -0,0 +1,127 @@
+<?php
+    $title = "Overriding the browser's default keyboard behaviour";
+    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('spacebar', 'assets/buttons/spacebar.png');
+
+
+        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 sprite as a player.
+        ufo = game.add.sprite(320, 240, 'ufo');
+        ufo.anchor.setTo(0.5, 0.5);
+
+        // Make the 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);
+
+        // Add a sprite to display spacebar press.
+        spaceBtn = game.add.sprite(400 - 112, 100, 'spacebar');
+        spaceBtn.transform.scrollFactor.setTo(0, 0);
+        spaceBtn.alpha = 0;
+
+        // Prevent directions and space key events bubbling up to browser,
+        // since these keys will make web page scroll which is not
+        // expected.
+        game.input.keyboard.addKeyCapture([
+            Phaser.Keyboard.LEFT,
+            Phaser.Keyboard.RIGHT,
+            Phaser.Keyboard.UP,
+            Phaser.Keyboard.DOWN,
+            Phaser.Keyboard.SPACEBAR
+        ]);
+    }
+
+     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;
+        }
+
+        // 50 as a second parameter is a good choice if you are running 60FPS.
+        if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR, 50)) {
+            console.log('space bar pressed');
+            spaceBtn.alpha = 1;
+        }
+        if (spaceBtn.alpha > 0) {
+            spaceBtn.alpha -= 0.03;
+        }
+    }
+
+    function render() {
+
+        game.debug.renderText('Hold left/right to move the ufo.', 16, 32);
+        game.debug.renderText('Direction and Space key events are stopped by Phaser now,', 16, 48);
+         game.debug.renderText('so they will no longer be sent to the browser', 16, 64);
+        game.debug.renderText('Now you can press UP/DOWN or SPACE to see what happened.', 16, 80);
+    }
+
+
+})();
+
+</script>
+
+<?php
+    require('../foot.php');
+?>
+