Merge pull request #102 from alvinsight/dev

Well, almost every example works with 1.0.7 except multiple anims, plus some funky tweens examples, and renamed a lot of files

examples/animation/Animation from a JSON object.php

@@ -0,0 +1,144 @@
+<?php
+	$title = "Animation from a Texture Atlas";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create});
+
+	function preload() {
+
+        //  Texture Atlas Method 2
+        //
+        //  In this example we assume that the TexturePacker JSON data is a real json object stored as a var
+        //  (in this case botData)
+        game.load.atlas('bot', 'assets/sprites/running_bot.png', null, botData);
+
+        
+
+    }
+
+    var bot;
+
+    function create() {
+
+        bot = game.add.sprite(game.world.centerX, 300, 'bot');
+
+        bot.animations.add('run');
+        bot.animations.play('run', 10, true);
+
+    }
+
+    var botData = {
+        "frames": [
+
+    {
+        "filename": "running bot.swf/0000",
+        "frame": { "x": 34, "y": 128, "w": 56, "h": 60 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 0, "y": 2, "w": 56, "h": 60 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0001",
+        "frame": { "x": 54, "y": 0, "w": 56, "h": 58 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0002",
+        "frame": { "x": 54, "y": 58, "w": 56, "h": 58 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0003",
+        "frame": { "x": 0, "y": 192, "w": 34, "h": 64 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 11, "y": 0, "w": 34, "h": 64 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0004",
+        "frame": { "x": 0, "y": 64, "w": 54, "h": 64 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 1, "y": 0, "w": 54, "h": 64 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0005",
+        "frame": { "x": 196, "y": 0, "w": 56, "h": 58 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0006",
+        "frame": { "x": 0, "y": 0, "w": 54, "h": 64 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 1, "y": 0, "w": 54, "h": 64 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0007",
+        "frame": { "x": 140, "y": 0, "w": 56, "h": 58 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0008",
+        "frame": { "x": 34, "y": 188, "w": 50, "h": 60 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 3, "y": 2, "w": 50, "h": 60 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0009",
+        "frame": { "x": 0, "y": 128, "w": 34, "h": 64 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 11, "y": 0, "w": 34, "h": 64 },
+        "sourceSize": { "w": 56, "h": 64 }
+    },
+    {
+        "filename": "running bot.swf/0010",
+        "frame": { "x": 84, "y": 188, "w": 56, "h": 58 },
+        "rotated": false,
+        "trimmed": true,
+        "spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
+        "sourceSize": { "w": 56, "h": 64 }
+    }],
+        "meta": {
+            "app": "http://www.texturepacker.com",
+            "version": "1.0",
+            "image": "running_bot.png",
+            "format": "RGBA8888",
+            "size": { "w": 252, "h": 256 },
+            "scale": "0.2",
+            "smartupdate": "$TexturePacker:SmartUpdate:fb56f261b1eb04e3215824426595f64c$"
+        }
+    };
+
+
+
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/animation/Animation from a texturePacker file.php

@@ -1,5 +1,5 @@
 <?php
-	$title = "Animation from a Texture Atlas";
+	$title = "Animation from a Texture Atlas From TexturePacker";
 	require('../head.php');
 ?>
 

examples/animation/animation wraparound.php

@@ -0,0 +1,52 @@
+<?php
+	$title = "Animation Wraparound";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create,update:update });
+
+	function preload() {
+		game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
+	}
+
+	var bot;
+
+	function create() {
+
+		//	This sprite is using a texture atlas for all of its animation data
+		bot = game.add.sprite(200, 200, 'bot');
+
+		//	Here we add a new animation called 'run'
+		//	We haven't specified any frames because it's using every frame in the texture atlas
+		bot.animations.add('run');
+
+		//	And this starts the animation playing by using its key ("run")
+		//	15 is the frame rate (15fps)
+		//	true means it will loop when it finishes
+		bot.animations.play('run', 15, true);
+
+	}
+
+    function update() {
+
+        bot.x -= 2;
+
+        if (bot.x < -bot.width)
+        {
+            bot.x = game.world.width;
+        }
+
+    }
+
+
+
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/camera/follow styles.php

@@ -36,7 +36,7 @@
     function create() {
 
         //make the world larger than the actual canvas
-        game.world.setBounds(1400,1400);
+        game.world.setBounds(0,0,1400,1400);
 
         for(var i=0,nb=10;i<nb;i++){
 

examples/camera/moving the camera.php

@@ -18,7 +18,7 @@
 		game.stage.backgroundColor = '#2d2d2d';
 
 		//	Make our game world 2000x2000 pixels in size (the default is to match the game size)
-		game.world.setBounds(2000, 2000);
+		game.world.setBounds(0,0,2000, 2000);
 
 		for (var i = 0; i < 50; i++)
 		{

examples/camera/moving the game camera.php

@@ -1,58 +0,0 @@
- 
- <?php
-	$title = "Moving the game camera with the keyboard";
-	require('../head.php');
-?>
-
-<script type="text/javascript">
-
-
-
-	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
-
-	function preload() {
-
-        game.load.tilemap('snes', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
-	}
-
-	function create() {
-
-
-		//setting the size of the game world larger than the tilemap's size
-		game.world.setBounds(2000,2000);
-
-		game.stage.backgroundColor = '#255d3b';
-
-		// adding the tilemap
-        game.add.tilemap(0, 150, 'snes');
-
-
-	}
-
-	function update() {
-		if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
-        {
-            game.camera.x -= 8;
-        }
-        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
-        {
-            game.camera.x += 8;
-        }
-
-        if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
-        {
-            game.camera.y -= 8;
-        }
-        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
-        {
-            game.camera.y += 8;
-        }
-	}
-
-
-
-</script>
-
-<?php
-	require('../foot.php');
-?>

examples/input/cursor key movement.php

@@ -8,7 +8,7 @@
 window.onload = 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.AUTO, '', { preload: preload, create: create, update: update, render: render });
+	
 
     function preload() {
 

examples/input/follow mouse.php

@@ -29,7 +29,7 @@
 		if (game.input.mousePointer.isDown)
 		{
 			//	400 is the speed it will move towards the mouse
-			game.physics.moveTowardsMouse(sprite, 400);
+			game.physics.moveToPointer(sprite, 400);
 
 			//	if it's overlapping the mouse, don't move any more
 			if (Phaser.Rectangle.contains(sprite.body, game.input.x, game.input.y))

examples/loader/random images from loader.php

@@ -1,5 +1,5 @@
 <?php
-    $title = "Test Title";
+    $title = "Retrieving images from the cache";
     require('../head.php');
 ?>
 

examples/physics/group move towards object.php

@@ -1,5 +1,5 @@
 <?php
-	$title = "Group move towards object";
+	$title = "Group moves towards object";
 	require('../head.php');
 ?>
 
@@ -35,7 +35,7 @@
 			//	First is the callback
 			//	Second is the context in which the callback runs, in this case game.physics
 			//	Third is the parameter the callback expects - it is always sent the Group child as the first parameter
-			balls.forEach(game.physics.moveTowardsMouse, game.physics, false, 200);
+			balls.forEach(game.physics.moveToPointer, game.physics, false, 200);
 		}
 		else
 		{

examples/sprites/add a sprite.php

@@ -7,7 +7,7 @@
 
 
 
-	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
 
 	function preload() {
 		game.load.image('mushroom', 'assets/sprites/mushroom2.png');
@@ -19,9 +19,6 @@
 
 	}
 
-	function update() {
-	}
-
 
 
 </script>

examples/sprites/several sprites using one texture file.php

@@ -0,0 +1,59 @@
+<?php
+    $title = "Several sprites using only one texture file";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create});
+
+	function preload() {
+
+        //  Texture Atlas Method 4
+        //
+        //  We load a TexturePacker JSON file and image and show you how to make several unique sprites from the same file
+        game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');
+    }
+
+    var chick;
+    var car;
+    var mech;
+    var robot;
+    var cop;
+
+    function create() {
+
+        game.stage.backgroundColor = 'rgb(40, 40, 40)';
+
+        chick = game.add.sprite(64, 64, 'atlas');
+
+        //  You can set the frame based on the frame name (which TexturePacker usually sets to be the filename of the image itself)
+        chick.frameName = 'budbrain_chick.png';
+
+        //  Or by setting the frame index
+        //chick.frame = 0;
+
+        cop = game.add.sprite(600, 64, 'atlas');
+        cop.frameName = 'ladycop.png';
+
+        robot = game.add.sprite(50, 300, 'atlas');
+        robot.frameName = 'robot.png';
+
+        car = game.add.sprite(100, 400, 'atlas');
+        car.frameName = 'supercars_parsec.png';
+
+        mech = game.add.sprite(250, 100, 'atlas');
+        mech.frameName = 'titan_mech.png';
+
+    }
+
+
+
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/tweens/bounce.php

@@ -0,0 +1,48 @@
+<?php
+    $title = "Bounce";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
+
+
+    function preload() {
+
+        game.load.image('ball', 'assets/sprites/yellow_ball.png');
+
+        
+
+    }
+
+    var ball;
+
+    function create() {
+
+        ball = game.add.sprite(300, 0, 'ball');
+
+        startBounceTween();
+    }
+
+    function startBounceTween() {
+
+        ball.y = 0;
+
+        var bounce=game.add.tween(ball);
+
+        bounce.to({ y: game.world.height-ball.height }, 1000 + Math.random() * 3000, Phaser.Easing.Bounce.In);
+        bounce.onComplete.add(startBounceTween, this);
+        bounce.start();
+
+    }
+
+
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/bubbles.php

@@ -0,0 +1,44 @@
+<?php
+    $title = "Primary bubble example";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+    function preload() {
+        game.load.image('space', 'assets/misc/starfield.png', 138, 15);
+        game.load.image('ball', 'assets/sprites/shinyball.png');
+        
+    }
+    function create() {
+      
+
+        game.add.tileSprite(0,0,800,600,'space');
+
+        for(var i=0;i<30;i++){
+
+        	var sprite=game.add.sprite(game.world.randomX,game.world.randomY,'ball');
+
+	        //Fade in a sprite :
+	        game.add.tween(sprite)
+	        .to({y : -50},Math.random()*4500,Phaser.Easing.Cubic.Out)
+	        .start();
+
+	        game.add.tween(sprite)
+	        .to({alpha : 0},Math.random()*4500,Phaser.Easing.Quadratic.InOut)
+	        .delay(Math.random()*500)
+	        .start();
+        }
+
+        
+
+    }
+
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/combined tweens.php

@@ -0,0 +1,73 @@
+<?php
+    $title = "Little animated story";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
+
+
+    function preload() {
+        game.load.spritesheet('pig', 'assets/sprites/invaderpig.png', 124, 104);
+        game.load.image('starfield', 'assets/misc/starfield.jpg');
+        game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+        
+    }
+
+    var mushroom,
+    	pig,
+    	pigArrives,
+    	s;
+
+    function create() {
+
+        game.add.tileSprite(0,0,800,600,'starfield');
+
+        pig=game.add.sprite(-50,200,'pig',1);
+
+        pig.scale.setTo(0.5,0.5);
+
+        mushroom=game.add.sprite(380,200,'mushroom');
+        mushroom.anchor.setTo(0.5,0.5);
+
+        pigArrives= game.add.tween(pig);
+        
+        pigArrives.to({x:150}, 1000, Phaser.Easing.Bounce.Out);
+        pigArrives.onComplete.add(firstTween, this);
+        pigArrives.start();
+
+
+
+
+    }
+
+
+    function firstTween() {
+
+        s=game.add.tween(mushroom.scale);
+        s.to({x : 2,y:2}, 1000, Phaser.Easing.Linear.None);
+        s.onComplete.addOnce(theEnd, this);
+        s.start();
+
+    }
+
+    function theEnd() {
+    	
+    	e=game.add.tween(pig);
+        
+        e.to({x:-150}, 1000, Phaser.Easing.Bounce.Out);
+        e.start();
+
+
+    }
+
+
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/easing spritesheets.php

@@ -0,0 +1,42 @@
+<?php
+    $title = "Easing using spritesheets";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
+
+
+    function preload() {
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        game.load.image('starfield', 'assets/misc/starfield.jpg');
+        
+    }
+
+    function create() {
+
+        var item;
+
+        game.add.tileSprite(0,0,800,600,'starfield');
+
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(190 + 69 * i, -90, 'PHASER', i);
+            // Add a simple bounce tween to each character's position.
+            game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+        }
+
+
+
+    }
+
+
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/easing.php

@@ -0,0 +1,54 @@
+<?php
+    $title = "Using duration and scale";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+    function preload() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 138, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        
+    }
+    function create() {
+        var item,
+            shadow,
+            tween;
+
+        // Sets background color to white.
+        game.stage.backgroundColor = '#fff';
+
+        for (var i = 0; i < 6; i++) {
+            // Add a shadow to the location which characters will land on.
+            // And tween their size to make them look like a real shadow.
+            // Put the following code before items to give shadow a lower
+            // render order.
+            shadow = game.add.sprite(190 + 69 * i, 284, 'shadow');
+            // Set shadow's size 0 so that it'll be invisible at the beginning.
+            shadow.scale.setTo(0.0, 0.0);
+            // Also set the origin to the center since we don't want to
+            // see the shadow scale to the left top.
+            shadow.anchor.setTo(0.5, 0.5);
+            game.add.tween(shadow.scale)
+                .to({x: 1.0, y: 1.0}, 2400, Phaser.Easing.Bounce.Out);
+
+            // Add characters on top of shadows.
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            // Set origin to the center to make the rotation look better.
+            item.anchor.setTo(0.5, 0.5);
+            // Add a simple bounce tween to each character's position.
+            tween = game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out);
+        }
+
+
+
+        }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/fading in a sprite.php

@@ -0,0 +1,34 @@
+<?php
+    $title = "Alpha fading a sprite";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+    function preload() {
+        game.load.image('space', 'assets/misc/starfield.png', 138, 15);
+        game.load.image('ball', 'assets/sprites/shinyball.png');
+        
+    }
+    function create() {
+      
+
+        game.add.tileSprite(0,0,800,600,'space');
+
+        var sprite=game.add.sprite(400,300,'ball');
+
+        //Fade in a sprite :
+        game.add.tween(sprite)
+        .to({alpha : 0},1500,Phaser.Easing.Linear.None)
+        .start();
+
+    }
+
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/tweening several properties.php

@@ -0,0 +1,40 @@
+<?php
+    $title = "Tweening several properties";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
+
+
+    function preload() {
+        game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 68, 15);
+        game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
+        
+    }
+    function create() {
+
+        game.stage.backgroundColor='#ffffff';
+        var item;
+        for (var i = 0; i < 6; i++) {
+            item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
+            item.anchor.setTo(0.5,0.5);
+            // Add a simple bounce tween to each character's position.
+            game.add.tween(item)
+                .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
+            // Add another rotation tween to the same character.
+            game.add.tween(item)
+                .to({rotation: 360}, 2400, Phaser.Easing.Cubic.In, true, 1000 + 400 * i, false);
+        }
+    }
+
+
+
+</script>
+
+<?php
+    require('../foot.php');
+?>