Started revamp of the Tilemap system. Also removed old 'Advanced Physics' and dropped in p2.js which is what I hope we'll eventually use.

examples/collision/transform.php

@@ -13,12 +13,14 @@
 
         game.load.image('atari', 'assets/sprites/atari130xe.png');
         game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+        game.load.image('flectrum', 'assets/sprites/flectrum.png');
 
     }
 
     var testGroup;
     var sprite1;
     var sprite2;
+    var sprite3;
 
     function create() {
 
@@ -61,6 +63,9 @@
         sprite2 = game.add.sprite(-100, 150, 'mushroom');
         sprite2.name = 'mushroom';
 
+        sprite3 = game.add.sprite(-200, 150, 'flectrum');
+        sprite3.name = 'tall';
+
         testGroup.x = -600;
         testGroup.y = 200;
 
@@ -88,6 +93,8 @@
 
         game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
 
+        // sprite3.angle += 0.5;
+
     }
 
     function collisionHandler (obj1, obj2) {
@@ -110,6 +117,7 @@
 
         game.debug.renderSpriteBody(sprite1);
         game.debug.renderSpriteBody(sprite2);
+        game.debug.renderSpriteBody(sprite3);
 
         game.debug.renderGroupInfo(testGroup, 500, 500);
         game.debug.renderPixel(testGroup.x, testGroup.y, 'rgb(255,255,0)');

examples/js.php

@@ -114,9 +114,10 @@
 	<script src="../src/particles/arcade/ArcadeParticles.js"></script>
 	<script src="../src/particles/arcade/Emitter.js"></script>
 
+	<script src="../src/tilemap/Tile.js"></script>
 	<script src="../src/tilemap/Tilemap.js"></script>
 	<script src="../src/tilemap/TilemapLayer.js"></script>
-	<script src="../src/tilemap/Tile.js"></script>
-	<script src="../src/tilemap/TilemapRenderer.js"></script>
+	<script src="../src/tilemap/TilemapParser.js"></script>
+	<script src="../src/tilemap/Tileset.js"></script>
 	
 	<script src="../src/PixiPatch.js"></script>

examples/tilemaps/wip1.php

@@ -0,0 +1,74 @@
+<?php
+    $title = "Tilemap Layer WIP #1";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    // var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
+
+    function preload() {
+
+        // game.load.image('snes', 'assets/maps/smb_tiles.png');
+        // game.load.tilemap('nes', 'assets/maps/mario1.png', 'assets/maps/mario1.json', null, Phaser.Tilemap.JSON);
+        // game.load.tilemap('snes', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
+
+        //  Just loads the level data and specifies the format
+        // game.load.tilemap('marioLevel1', 'assets/maps/smb_level1.json', Phaser.Tilemap.JSON);
+
+        //  What about passing in a JSON object though? Need that too. But a CSV would look like a 'string', not an object - how to tell apart from URL?
+        // game.load.tilemap('marioLevel1', SMB_LEVEL_JSON, Phaser.Tilemap.JSON);
+
+        //  Exactly the same as loading a sprite sheet :)
+        game.load.tileset('marioLevel1', 'assets/maps/smb_tiles.png', 32, 32);
+
+    }
+
+    var layer;
+
+    function create() {
+
+        game.stage.backgroundColor = '#3d3d3d';
+
+
+
+        layer = new Phaser.TilemapLayer(game, 0, 0, 500, 500, [], 'snes');
+
+        // layer = new Phaser.TilemapLayer(game, 0, 0, 500, 500);
+
+
+        //  layer.load(mapData, tileset);
+        //  layer.create(mapWidth, mapHeight, [tileset]);
+        //  layer.updateTileset(key); // can change on the fly
+
+        layer.context.fillStyle = 'rgb(255,0,0)';
+        layer.context.fillRect(0, 0, 200, 300);
+        game.world._container.addChild(layer.sprite);
+
+        layer.create(10, 10);
+
+        layer.putTile(2, 2, 1);
+        layer.putTile(3, 2, 1);
+        layer.putTile(4, 2, 1);
+        layer.putTile(5, 2, 1);
+        layer.putTile(4, 6, 1);
+
+        layer.dump();
+    }
+
+    function update() {
+
+
+    }
+
+    function render() {
+
+
+    }
+
+</script>
+
+<?php
+    require('../foot.php');
+?>

examples/tweens/chained tweens.php

@@ -5,15 +5,14 @@
 
 <script type="text/javascript">
 
-
-
     var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
 
-    var p;
+    var p, tween, button, flag = false;
 
     function preload() {
 
         game.load.image('diamond', 'assets/sprites/diamond.png');
+        game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
 
     }
 
@@ -23,13 +22,30 @@
 
         p = game.add.sprite(100, 100, 'diamond');
 
-        game.add.tween(p).to({ x: 600 }, 2000, Phaser.Easing.Linear.None, true)
+        tween = game.add.tween(p).to({ x: 600 }, 2000, Phaser.Easing.Linear.None)
         .to({ y: 300 }, 1000, Phaser.Easing.Linear.None)
         .to({ x: 100 }, 2000, Phaser.Easing.Linear.None)
         .to({ y: 100 }, 1000, Phaser.Easing.Linear.None)
-        .loop();
+        .loop()
+        .start();
+
+        button = game.add.button(game.world.centerX, 400, 'button', actionOnClick, this, 2, 1, 0);
     }
 
+    function actionOnClick() {
+
+        if (flag) {
+            console.log('started');
+            tween.start();
+        }
+        else {
+            console.log('stopped');
+            tween.stop();
+        }
+
+        flag = !flag;
+
+    }
 
 </script>