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.

Author: photonstorm

README.md

@@ -113,6 +113,7 @@ Version 1.0.7 (in progress in the dev branch)
 * World.randomX/Y now works with negative World.bounds values.
 * Added killOnComplete parameter to Animation.play. Really useful in situations where you want a Sprite to animate once then kill itself on complete, like an explosion effect.
 * Added Sprite.loadTexture(key, frame) which allows you to load a new texture set into an existing sprite rather than having to create a new sprite.
+* Tweens .to will now always return the parent (thanks powerfear)
 
 
 * TODO: look at Sprite.crop (http://www.html5gamedevs.com/topic/1617-error-in-spritecrop/)

build/phaser.js

@@ -9,7 +9,7 @@
 *
 * Phaser - http://www.phaser.io
 *
-* v1.0.7 - Built at: Wed, 09 Oct 2013 17:16:16 +0100
+* v1.0.7 - Built at: Thu, 10 Oct 2013 16:51:46 +0100
 *
 * By Richard Davey http://www.photonstorm.com @photonstorm
 *
@@ -7340,10 +7340,21 @@ Phaser.Camera.prototype = {
                 break;
         }
 
+    },
+
+    /**
+    * Move the camera focus on a display object instantly.
+    * @method Phaser.Camera#focusOn
+    * @param {any} displayObject - The display object to focus the camera on. Must have visible x/y properties.
+    */
+    focusOn: function (displayObject) {
+
+        this.setPosition(Math.round(displayObject.x - this.view.halfWidth), Math.round(displayObject.y - this.view.halfHeight));
+
     },
 
 	/**
-    * Move the camera focus to a location instantly.
+    * Move the camera focus on a location instantly.
     * @method Phaser.Camera#focusOnXY
     * @param {number} x - X position.
     * @param {number} y - Y position.
@@ -16007,6 +16018,7 @@ Phaser.Sprite.prototype.preUpdate = function() {
     this.prevY = this.y;
 
     this.updateCache();
+    this.updateAnimation();
 
     //  Re-run the camera visibility check
     if (this._cache.dirty)
@@ -16065,7 +16077,10 @@ Phaser.Sprite.prototype.updateCache = function() {
         this._cache.dirty = true;
     }
 
-    //  Frame updated?
+}
+
+Phaser.Sprite.prototype.updateAnimation = function() {
+
     if (this.currentFrame && this.currentFrame.uuid != this._cache.frameID)
     {
         this._cache.frameWidth = this.texture.frame.width;
@@ -16119,6 +16134,47 @@ Phaser.Sprite.prototype.postUpdate = function() {
 
 }
 
+Phaser.Sprite.prototype.loadTexture = function (key, frame) {
+
+    this.key = key;
+
+    if (key instanceof Phaser.RenderTexture)
+    {
+        this.currentFrame = this.game.cache.getTextureFrame(key.name);
+    }
+    else
+    {
+        if (key == null || this.game.cache.checkImageKey(key) == false)
+        {
+            key = '__default';
+        }
+
+        if (this.game.cache.isSpriteSheet(key))
+        {
+            this.animations.loadFrameData(this.game.cache.getFrameData(key));
+
+            if (frame !== null)
+            {
+                if (typeof frame === 'string')
+                {
+                    this.frameName = frame;
+                }
+                else
+                {
+                    this.frame = frame;
+                }
+            }
+        }
+        else
+        {
+            this.currentFrame = this.game.cache.getFrame(key);
+        }
+    }
+
+    this.updateAnimation();
+
+}
+
 Phaser.Sprite.prototype.deltaAbsX = function () {
     return (this.deltaX() > 0 ? this.deltaX() : -this.deltaX());
 }
@@ -16430,6 +16486,18 @@ Object.defineProperty(Phaser.Sprite.prototype, "inCamera", {
 
 });
 
+/**
+* 
+* @returns {boolean}
+*/
+Object.defineProperty(Phaser.Sprite.prototype, "worldX", {
+    
+    get: function () {
+        return 1;
+    }
+
+});
+
 /**
 * Get the input enabled state of this Sprite.
 * @returns {Description}
@@ -22959,6 +23027,7 @@ Phaser.Tween.prototype = {
 	*/
     pause: function () {
         this._paused = true;
+        this._pausedTime = this.game.time.now;
     },
 
 	/**
@@ -22968,7 +23037,7 @@ Phaser.Tween.prototype = {
 	*/
     resume: function () {
         this._paused = false;
-        this._startTime += this.game.time.pauseDuration;
+        this._startTime += (this.game.time.now - this._pausedTime);
     },
 
 	/**
@@ -29081,6 +29150,7 @@ Phaser.Utils.Debug.prototype = {
         this.line('angle: ' + sprite.angle.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1));
         this.line('visible: ' + sprite.visible + ' in camera: ' + sprite.inCamera);
         this.line('body x: ' + sprite.body.x.toFixed(1) + ' y: ' + sprite.body.y.toFixed(1));
+        this.stop();
 
         //  0 = scaleX
         //  1 = skewY
@@ -29131,6 +29201,7 @@ Phaser.Utils.Debug.prototype = {
         this.line('scaleY: ' + sprite.worldTransform[4]);
         this.line('transX: ' + sprite.worldTransform[2]);
         this.line('transY: ' + sprite.worldTransform[5]);
+        this.stop();
 
     },
 
@@ -29160,6 +29231,49 @@ Phaser.Utils.Debug.prototype = {
         this.line('scaleY: ' + sprite.localTransform[4]);
         this.line('transX: ' + sprite.localTransform[2]);
         this.line('transY: ' + sprite.localTransform[5]);
+        this.stop();
+
+    },
+
+    renderSpriteCoords: function (sprite, x, y, color) {
+
+        if (this.context == null)
+        {
+            return;
+        }
+
+        color = color || 'rgb(255, 255, 255)';
+
+        this.start(x, y, color);
+
+        this.line(sprite.name);
+        this.line('x: ' + sprite.x);
+        this.line('y: ' + sprite.y);
+        this.line('local x: ' + sprite.localTransform[2]);
+        this.line('local y: ' + sprite.localTransform[5]);
+        this.line('world x: ' + sprite.worldTransform[2]);
+        this.line('world y: ' + sprite.worldTransform[5]);
+
+        this.stop();
+
+    },
+
+    renderGroupInfo: function (group, x, y, color) {
+
+        if (this.context == null)
+        {
+            return;
+        }
+
+        color = color || 'rgb(255, 255, 255)';
+
+        this.start(x, y, color);
+
+        this.line('Group (size: ' + group.length + ')');
+        this.line('x: ' + group.x);
+        this.line('y: ' + group.y);
+
+        this.stop();
 
     },
 

examples/collision/transform.php

@@ -13,12 +13,14 @@ function preload() {
 
         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 @@ function test2 () {
         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 @@ function update () {
 
         game.physics.collide(sprite1, sprite2, collisionHandler, null, this);
 
+        // sprite3.angle += 0.5;
+
     }
 
     function collisionHandler (obj1, obj2) {
@@ -110,6 +117,7 @@ function render() {
 
         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 @@ function create() {
 
         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>