Tilemap.createCollisionObjects will parse Tiled data for objectgroups and convert polyline instances into physics objects you can collide with in the world.

After defining tiles that collide on a Tilemap, you need to call Tilemap.generateCollisionData(layer) to populate the physics world with the data required.
Debug.renderPhysicsBody updated to take camera location and body rotation into account.
Body movement functions put back to velocity :)
Updated to latest dev version of pixi and latest p2.js
Updated docs

src/core/Filter.js

@@ -36,8 +36,7 @@ Phaser.Filter = function (game, uniforms, fragmentSrc) {
     this.passes = [this];
     
     /**
-    * @property shaders
-    * @type Array an array of shaders
+    * @property {array} shaders - Array an array of shaders.
     * @private
     */
     this.shaders = [];

src/physics/Body.js

@@ -222,6 +222,23 @@ Phaser.Physics.Body.prototype = {
 
     },
 
+    /**
+    * Applies a force to the Body that causes it to 'thrust' backwards (in reverse), based on its current angle and the given speed.
+    * The speed is represented in pixels per second. So a value of 100 would move 100 pixels in 1 second (1000ms).
+    *
+    * @method Phaser.Physics.Body#rever
+    * @param {number} speed - The speed at which it should reverse.
+    */
+    reverse: function (speed) {
+
+        var magnitude = this.px2p(-speed);
+        var angle = this.data.angle + Math.PI / 2;
+
+        this.data.force[0] -= magnitude * Math.cos(angle);
+        this.data.force[1] -= magnitude * Math.sin(angle);
+
+    },
+
     /**
     * If this Body is dynamic then this will move it to the left by setting its x velocity to the given speed.
     * The speed is represented in pixels per second. So a value of 100 would move 100 pixels in 1 second (1000ms).
@@ -231,8 +248,7 @@ Phaser.Physics.Body.prototype = {
     */
     moveLeft: function (speed) {
 
-        // this.data.velocity[0] = this.px2p(-speed);
-        this.data.force[0] += this.px2p(-speed);
+        this.data.velocity[0] = this.px2p(-speed);
 
     },
 
@@ -245,8 +261,7 @@ Phaser.Physics.Body.prototype = {
     */
     moveRight: function (speed) {
 
-        // this.data.velocity[0] = this.px2p(speed);
-        this.data.force[0] += this.px2p(speed);
+        this.data.velocity[0] = this.px2p(speed);
 
     },
 
@@ -259,8 +274,7 @@ Phaser.Physics.Body.prototype = {
     */
     moveUp: function (speed) {
 
-        // this.data.velocity[1] = this.px2p(-speed);
-        this.data.force[1] += this.px2p(-speed);
+        this.data.velocity[1] = this.px2p(-speed);
 
     },
 
@@ -273,8 +287,7 @@ Phaser.Physics.Body.prototype = {
     */
     moveDown: function (speed) {
 
-        // this.data.velocity[1] = this.px2p(speed);
-        this.data.force[1] += this.px2p(speed);
+        this.data.velocity[1] = this.px2p(speed);
 
     },
 
@@ -551,14 +564,19 @@ Phaser.Physics.Body.prototype = {
         //  Did they pass in a single array of points?
         if (points.length === 1 && Array.isArray(points[0]))
         {
-            path = path.concat(points[0]);
+            path = points[0].slice(0);
         }
         else if (Array.isArray(points[0]))
         {
-            path = path.concat(points);
+            path = points[0].slice(0);
+            // for (var i = 0, len = points[0].length; i < len; i += 2)
+            // {
+            //     path.push([points[0][i], points[0][i + 1]]);
+            // }
         }
         else if (typeof points[0] === 'number')
         {
+            // console.log('addPolygon --- We\'ve a list of numbers');
             //  We've a list of numbers
             for (var i = 0, len = points.length; i < len; i += 2)
             {
@@ -566,6 +584,18 @@ Phaser.Physics.Body.prototype = {
             }
         }
 
+        // console.log('addPolygon PATH pre');
+        // console.log(path[1]);
+        // console.table(path);
+
+        //  top and tail
+        var idx = path.length - 1;
+
+        if ( path[idx][0] === path[0][0] && path[idx][1] === path[0][1] )
+        {
+            path.pop();
+        }
+
         //  Now process them into p2 values
         for (var p = 0; p < path.length; p++)
         {
@@ -573,6 +603,10 @@ Phaser.Physics.Body.prototype = {
             path[p][1] = this.px2p(path[p][1]);
         }
 
+        // console.log('addPolygon PATH POST');
+        // console.log(path[1]);
+        // console.table(path);
+
         return this.data.fromPolygon(path, options);
 
     },

src/physics/World.js

@@ -255,7 +255,12 @@ Phaser.Physics.World.prototype.createBody = function (x, y, mass, addToWorld, op
 
     if (data)
     {
-        body.addPolygon(options, data);
+        var result = body.addPolygon(options, data);
+
+        if (!result)
+        {
+            return false;
+        }
     }
 
     if (addToWorld)

src/pixi/InteractionManager.js

@@ -124,7 +124,7 @@ PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObj
         var child = children[i];
 
         // push all interactive bits
-        if(child.interactive)
+        if(child._interactive)
         {
             iParent.interactiveChildren = true;
             //child.__iParent = iParent;

src/pixi/display/DisplayObject.js

@@ -194,6 +194,10 @@ PIXI.DisplayObject = function()
      */
     this._mask = null;
 
+    this._cacheAsBitmap = false;
+    this._cacheIsDirty = false;
+
+
     /*
      * MOUSE Callbacks
      */
@@ -379,6 +383,28 @@ Object.defineProperty(PIXI.DisplayObject.prototype, 'filters', {
     }
 });
 
+Object.defineProperty(PIXI.DisplayObject.prototype, 'cacheAsBitmap', {
+    get: function() {
+        return  this._cacheAsBitmap;
+    },
+    set: function(value) {
+
+        if(this._cacheAsBitmap === value)return;
+
+        if(value)
+        {
+            //this._cacheIsDirty = true;
+            this._generateCachedSprite();
+        }
+        else
+        {
+            this._destroyCachedSprite();
+        }
+
+        this._cacheAsBitmap = value;
+    }
+});
+
 /*
  * Updates the object transform for rendering
  *
@@ -399,6 +425,7 @@ PIXI.DisplayObject.prototype.updateTransform = function()
    // var localTransform = this.localTransform//.toArray();
     var parentTransform = this.parent.worldTransform;//.toArray();
     var worldTransform = this.worldTransform;//.toArray();
+
     var px = this.pivot.x;
     var py = this.pivot.y;
 
@@ -442,11 +469,10 @@ PIXI.DisplayObject.prototype.getBounds = function( matrix )
  */
 PIXI.DisplayObject.prototype.getLocalBounds = function()
 {
-    //var matrixCache = this.worldTransform;
-
     return this.getBounds(PIXI.identityMatrix);///PIXI.EmptyRectangle();
 };
 
+
 /**
  * Sets the object's stage reference, the stage this object is connected to
  *
@@ -459,6 +485,62 @@ PIXI.DisplayObject.prototype.setStageReference = function(stage)
     if(this._interactive)this.stage.dirty = true;
 };
 
+PIXI.DisplayObject.prototype.generateTexture = function(renderer)
+{
+    var bounds = this.getLocalBounds();
+
+    var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0, renderer);
+    renderTexture.render(this);
+
+    return renderTexture;
+};
+
+PIXI.DisplayObject.prototype.updateCache = function()
+{
+    this._generateCachedSprite();
+};
+
+PIXI.DisplayObject.prototype._renderCachedSprite = function(renderSession)
+{
+    if(renderSession.gl)
+    {
+        PIXI.Sprite.prototype._renderWebGL.call(this._cachedSprite, renderSession);
+    }
+    else
+    {
+        PIXI.Sprite.prototype._renderCanvas.call(this._cachedSprite, renderSession);
+    }
+};
+
+PIXI.DisplayObject.prototype._generateCachedSprite = function()//renderSession)
+{
+    this._cacheAsBitmap = false;
+    var bounds = this.getLocalBounds();
+   
+    if(!this._cachedSprite)
+    {
+        var renderTexture = new PIXI.RenderTexture(bounds.width | 0, bounds.height | 0);//, renderSession.renderer);
+        
+        this._cachedSprite = new PIXI.Sprite(renderTexture);
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.texture.resize(bounds.width | 0, bounds.height | 0);
+    }
+
+    //REMOVE filter!
+    var tempFilters = this._filters;
+    this._filters = null;
+
+    this._cachedSprite.filters = tempFilters;
+    this._cachedSprite.texture.render(this);
+
+    this._filters = tempFilters;
+
+    this._cacheAsBitmap = true;
+};
+
 /**
 * Renders the object using the WebGL renderer
 *
@@ -466,6 +548,18 @@ PIXI.DisplayObject.prototype.setStageReference = function(stage)
 * @param renderSession {RenderSession} 
 * @private
 */
+PIXI.DisplayObject.prototype._destroyCachedSprite = function()
+{
+    if(!this._cachedSprite)return;
+
+    this._cachedSprite.texture.destroy(true);
+  //  console.log("DESTROY")
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+
 PIXI.DisplayObject.prototype._renderWebGL = function(renderSession)
 {
     // OVERWRITE;

src/pixi/display/DisplayObjectContainer.js

@@ -205,6 +205,8 @@ PIXI.DisplayObjectContainer.prototype.updateTransform = function()
 
     PIXI.DisplayObject.prototype.updateTransform.call( this );
 
+    if(this._cacheAsBitmap)return;
+
     for(var i=0,j=this.children.length; i<j; i++)
     {
         this.children[i].updateTransform();
@@ -344,6 +346,12 @@ PIXI.DisplayObjectContainer.prototype._renderWebGL = function(renderSession)
 {
     if(!this.visible || this.alpha <= 0)return;
     
+    if(this._cacheAsBitmap)
+    {
+        this._renderCachedSprite(renderSession);
+        return;
+    }
+    
     var i,j;
 
     if(this._mask || this._filters)
@@ -395,6 +403,13 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
 {
     if(this.visible === false || this.alpha === 0)return;
 
+    if(this._cacheAsBitmap)
+    {
+
+        this._renderCachedSprite(renderSession);
+        return;
+    }
+
     if(this._mask)
     {
         renderSession.maskManager.pushMask(this._mask, renderSession.context);
@@ -410,4 +425,4 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
     {
         renderSession.maskManager.popMask(renderSession.context);
     }
-};
+};

src/pixi/display/Sprite.js

@@ -345,7 +345,6 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
         var transform = this.worldTransform;
 
         // allow for trimming
-       
         if (renderSession.roundPixels)
         {
             context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx || 0, transform.ty || 0);
@@ -355,7 +354,6 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
             context.setTransform(transform.a, transform.c, transform.b, transform.d, transform.tx, transform.ty);
         }
 
-
         //if smoothingEnabled is supported and we need to change the smoothing property for this texture
         if(renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) {
             renderSession.scaleMode = this.texture.baseTexture.scaleMode;

src/pixi/renderers/webgl/WebGLRenderer.js

@@ -142,7 +142,7 @@ PIXI.WebGLRenderer = function(width, height, view, transparent, antialias)
     this.renderSession.maskManager = this.maskManager;
     this.renderSession.filterManager = this.filterManager;
     this.renderSession.spriteBatch = this.spriteBatch;
-
+    this.renderSession.renderer = this;
 
     gl.useProgram(this.shaderManager.defaultShader.program);
 
@@ -183,6 +183,18 @@ PIXI.WebGLRenderer.prototype.render = function(stage)
     // update the scene graph
     stage.updateTransform();
 
+
+    // interaction
+    if(stage._interactive)
+    {
+        //need to add some events!
+        if(!stage._interactiveEventsAdded)
+        {
+            stage._interactiveEventsAdded = true;
+            stage.interactionManager.setTarget(this);
+        }
+    }
+    
     var gl = this.gl;
 
     // -- Does this need to be set every frame? -- //

src/pixi/renderers/webgl/utils/WebGLFilterManager.js

@@ -47,7 +47,7 @@ PIXI.WebGLFilterManager.prototype.begin = function(renderSession, buffer)
     this.defaultShader = renderSession.shaderManager.defaultShader;
 
     var projection = this.renderSession.projection;
-
+   // console.log(this.width)
     this.width = projection.x * 2;
     this.height = -projection.y * 2;
     this.buffer = buffer;
@@ -173,6 +173,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
         var inputTexture = texture;
         var outputTexture = this.texturePool.pop();
         if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.gl, this.width, this.height);
+        outputTexture.resize(this.width, this.height);
 
         // need to clear this FBO as it may have some left over elements from a previous filter.
         gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
@@ -223,7 +224,7 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
     // time to render the filters texture to the previous scene
     if(this.filterStack.length === 0)
     {
-        gl.colorMask(true, true, true, this.transparent);
+        gl.colorMask(true, true, true, true);//this.transparent);
     }
     else
     {
@@ -280,7 +281,12 @@ PIXI.WebGLFilterManager.prototype.popFilter = function()
 
     gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);
 
+   //console.log(this.vertexArray)
+   //console.log(this.uvArray)
+    //console.log(sizeX + " : " + sizeY)
+
     gl.viewport(0, 0, sizeX, sizeY);
+
     // bind the buffer
     gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );
 
@@ -344,6 +350,7 @@ PIXI.WebGLFilterManager.prototype.applyFilterPass = function(filter, filterArea,
         filter.uniforms.dimensions.value[3] = this.vertexArray[5];//filterArea.height;
     }
 
+  //  console.log(this.uvArray )
     shader.syncUniforms();
 
     gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
@@ -448,4 +455,4 @@ PIXI.WebGLFilterManager.prototype.destroy = function()
     gl.deleteBuffer(this.uvBuffer);
     gl.deleteBuffer(this.colorBuffer);
     gl.deleteBuffer(this.indexBuffer);
-};
+};

src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js

@@ -137,11 +137,13 @@ PIXI.WebGLSpriteBatch.prototype.end = function()
 */
 PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
 {
+    var texture = sprite.texture;
+
     // check texture..
-    if(sprite.texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
+    if(texture.baseTexture !== this.currentBaseTexture || this.currentBatchSize >= this.size)
     {
         this.flush();
-        this.currentBaseTexture = sprite.texture.baseTexture;
+        this.currentBaseTexture = texture.baseTexture;
     }
 
 
@@ -162,8 +164,6 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
 
     var verticies = this.vertices;
 
-    var width = sprite.texture.frame.width;
-    var height = sprite.texture.frame.height;
 
     // TODO trim??
     var aX = sprite.anchor.x;
@@ -177,18 +177,19 @@ PIXI.WebGLSpriteBatch.prototype.render = function(sprite)
         var trim = sprite.texture.trim;
 
         w1 = trim.x - aX * trim.width;
-        w0 = w1 + width;
+        w0 = w1 + texture.frame.width;
 
         h1 = trim.y - aY * trim.height;
-        h0 = h1 + height;
+        h0 = h1 + texture.frame.height;
+
     }
     else
     {
-        w0 = (width ) * (1-aX);
-        w1 = (width ) * -aX;
+        w0 = (texture.frame.width ) * (1-aX);
+        w1 = (texture.frame.width ) * -aX;
 
-        h0 = height * (1-aY);
-        h1 = height * -aY;
+        h0 = texture.frame.height * (1-aY);
+        h1 = texture.frame.height * -aY;
     }
 
     var index = this.currentBatchSize * 4 * this.vertSize;

src/pixi/textures/BaseTexture.js

@@ -64,6 +64,12 @@ PIXI.BaseTexture = function(source, scaleMode)
      */
     this.source = source;
 
+    //TODO will be used for futer pixi 1.5...
+    this.id = PIXI.BaseTextureCacheIdGenerator++;
+
+    // used for webGL
+    this._glTextures = [];
+    
     if(!source)return;
 
     if(this.source.complete || this.source.getContext)
@@ -93,11 +99,7 @@ PIXI.BaseTexture = function(source, scaleMode)
     this.imageUrl = null;
     this._powerOf2 = false;
 
-    //TODO will be used for futer pixi 1.5...
-    this.id = PIXI.BaseTextureCacheIdGenerator++;
-
-    // used for webGL
-    this._glTextures = [];
+    
 
 };
 

src/pixi/textures/RenderTexture.js

@@ -187,6 +187,8 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
 {
     var children = displayObject.children;
 
+    var originalWorldTransform = displayObject.worldTransform;
+
     displayObject.worldTransform = PIXI.RenderTexture.tempMatrix;
 
     if(position)
@@ -207,6 +209,9 @@ PIXI.RenderTexture.prototype.renderCanvas = function(displayObject, position, cl
     this.renderer.renderDisplayObject(displayObject, context);
 
     context.setTransform(1,0,0,1,0,0);
+
+    displayObject.worldTransform = originalWorldTransform;
 };
 
-PIXI.RenderTexture.tempMatrix = new PIXI.Matrix();
+PIXI.RenderTexture.tempMatrix = new PIXI.Matrix();
+

src/pixi/textures/Texture.js

@@ -230,7 +230,8 @@ PIXI.Texture.addTextureToCache = function(texture, id)
 PIXI.Texture.removeTextureFromCache = function(id)
 {
     var texture = PIXI.TextureCache[id];
-    PIXI.TextureCache[id] = null;
+    delete PIXI.TextureCache[id];
+    delete PIXI.BaseTextureCache[id];
     return texture;
 };
 

src/tilemap/Tilemap.js

@@ -97,6 +97,11 @@ Phaser.Tilemap = function (game, key) {
     */
     this.objects = data.objects;
 
+    /**
+    * @property {array} collision - An array of collision data (polylines, etc).
+    */
+    this.collision = data.collision;
+
     /**
     * @property {array} images - An array of Tiled Image Layers.
     */
@@ -283,6 +288,141 @@ Phaser.Tilemap.prototype = {
 
     },
 
+    /**
+    * Clears all physics bodies from the world for the given layer.
+    *
+    * @method Phaser.Tilemap#clearPhysicsBodies
+    * @param {number|string|Phaser.TilemapLayer} [layer] - The layer to operate on. If not given will default to this.currentLayer.
+    */
+    clearPhysicsBodies: function (layer) {
+
+        layer = this.getLayer(layer);
+
+        var i = this.layers[layer].bodies.length;
+
+        while (i--)
+        {
+            this.layers[layer].bodies[i].destroy();
+        }
+
+    },
+
+    /**
+    * Goes through all tiles in the given layer and converts those set to collide into physics bodies in the world.
+    * Only call this *after* you have specified all of the tiles you wish to collide with calls like Tilemap.setCollisionBetween, etc.
+    * Every time you call this method it will destroy any previously created bodies and remove them from the world.
+    * Therefore understand it's an expensive operation and not to be done in a core game update loop.
+    *
+    * @method Phaser.Tilemap#generateCollisionData
+    * @param {number|string|Phaser.TilemapLayer} [layer] - The layer to operate on. If not given will default to this.currentLayer.
+    * @param {boolean} [addToWorld=true] - If true it will automatically add each body to the world, otherwise it's up to you to do so.
+    * @return {array} An array of the Phaser.Physics.Body objects that have been created.
+    */
+    generateCollisionData: function (layer, addToWorld) {
+
+        layer = this.getLayer(layer);
+
+        if (typeof addToWorld === 'undefined') { addToWorld = true; }
+
+        //  If the bodies array is already populated we need to nuke it
+        if (this.layers[layer].bodies.length > 0)
+        {
+            this.clearPhysicsBodies(layer);
+        }
+
+        this.layers[layer].bodies.length = [];
+
+        var width = 0;
+        var sx = 0;
+        var sy = 0;
+
+        for (var y = 0, h = this.layers[layer].height; y < h; y++)
+        {
+            width = 0;
+
+            for (var x = 0, w = this.layers[layer].width; x < w; x++)
+            {
+                var tile = this.layers[layer].data[y][x];
+
+                if (tile)
+                {
+                    right = this.getTileRight(layer, x, y);
+
+                    if (width === 0)
+                    {
+                        sx = tile.x * tile.width;
+                        sy = tile.y * tile.height;
+                        width = tile.width;
+                    }
+
+                    if (right && right.collides)
+                    {
+                        width += tile.width;
+                    }
+                    else
+                    {
+                        var body = this.game.physics.createBody(sx, sy, 0, false);
+
+                        body.addRectangle(width, tile.height, width / 2, tile.height / 2, 0);
+
+                        if (addToWorld)
+                        {
+                            this.game.physics.addBody(body.data);
+                        }
+
+                        this.layers[layer].bodies.push(body);
+
+                        width = 0;
+                    }
+                }
+            }
+        }
+
+        return this.layers[layer].bodies;
+
+    },
+
+    /**
+    * Converts all of the polylines inside a Tiled ObjectGroup into physics bodies that are added to the world.
+    * Note that the polylines must be created in such a way that they can withstand polygon decomposition.
+    *
+    * @method Phaser.Tilemap#createCollisionObjects
+    * @param {string} [layer] - The Tiled layer to operate on that contains the collision data.
+    * @param {boolean} [addToWorld=true] - If true it will automatically add each body to the world.
+    * @return {array} An array of the Phaser.Physics.Body objects that have been created.
+    */
+    createCollisionObjects: function (layer, addToWorld) {
+
+        if (typeof addToWorld === 'undefined') { addToWorld = true; }
+
+        var output = [];
+
+        for (var i = 0, len = this.collision[layer].length; i < len; i++)
+        {
+            // name: json.layers[i].objects[v].name,
+            // x: json.layers[i].objects[v].x,
+            // y: json.layers[i].objects[v].y,
+            // width: json.layers[i].objects[v].width,
+            // height: json.layers[i].objects[v].height,
+            // visible: json.layers[i].objects[v].visible,
+            // properties: json.layers[i].objects[v].properties,
+            // polyline: json.layers[i].objects[v].polyline
+
+            var object = this.collision[layer][i];
+
+            var body = this.game.physics.createBody(object.x, object.y, 0, addToWorld, {}, object.polyline);
+
+            if (body)
+            {
+                output.push(body);
+            }
+
+        }
+
+        return output;
+
+    },
+
     /**
     * Creates a new TilemapLayer object. By default TilemapLayers are fixed to the camera.
     * The `layer` parameter is important. If you've created your map in Tiled then you can get this by looking in Tiled and looking at the Layer name.

src/tilemap/TilemapParser.js

@@ -89,7 +89,7 @@ Phaser.TilemapParser = {
         }
         else
         {
-            return { layers: [], objects: [], images: [], tilesets: [] };
+            return this.getEmptyData();
         }
 
     },
@@ -133,6 +133,58 @@ Phaser.TilemapParser = {
 
     },
 
+    /**
+    * Returns an empty map data object.
+    * @method Phaser.TilemapParser.getEmptyData
+    * @return {object} Generated map data.
+    */
+    getEmptyData: function () {
+
+        var map = {};
+
+        map.width = 0;
+        map.height = 0;
+        map.tileWidth = 0;
+        map.tileHeight = 0;
+        map.orientation = 'orthogonal';
+        map.version = '1';
+        map.properties = {};
+        map.widthInPixels = 0;
+        map.heightInPixels = 0;
+
+        var layers = [];
+
+        var layer = {
+
+            name: 'layer',
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            widthInPixels: 0,
+            heightInPixels: 0,
+            alpha: 1,
+            visible: true,
+            properties: {},
+            indexes: [],
+            callbacks: [],
+            data: []
+
+        };
+
+        layers.push(layer);
+
+        map.layers = layers;
+        map.images = [];
+        map.objects = {};
+        map.collision = {};
+        map.tilesets = [];
+        map.tiles = [];
+
+        return map;
+
+    },
+
     /**
     * Parses a Tiled JSON file into valid map data.
     * @method Phaser.TilemapParser.parseJSON
@@ -183,7 +235,8 @@ Phaser.TilemapParser = {
                 visible: json.layers[i].visible,
                 properties: {},
                 indexes: [],
-                callbacks: []
+                callbacks: [],
+                bodies: []
 
             };
 
@@ -265,8 +318,9 @@ Phaser.TilemapParser = {
 
         map.images = images;
 
-        //  Objects
+        //  Objects & Collision Data (polylines, etc)
         var objects = {};
+        var collision = {};
 
         for (var i = 0; i < json.layers.length; i++)
         {
@@ -276,10 +330,11 @@ Phaser.TilemapParser = {
             }
 
             objects[json.layers[i].name] = [];
+            collision[json.layers[i].name] = [];
 
             for (var v = 0, len = json.layers[i].objects.length; v < len; v++)
             {
-                //  For now we'll just support object tiles
+                //  Object Tiles
                 if (json.layers[i].objects[v].gid)
                 {
                     var object = {
@@ -295,11 +350,37 @@ Phaser.TilemapParser = {
         
                     objects[json.layers[i].name].push(object);
                 }
+                else if (json.layers[i].objects[v].polyline)
+                {
+                    var object = {
+
+                        name: json.layers[i].objects[v].name,
+                        x: json.layers[i].objects[v].x,
+                        y: json.layers[i].objects[v].y,
+                        width: json.layers[i].objects[v].width,
+                        height: json.layers[i].objects[v].height,
+                        visible: json.layers[i].objects[v].visible,
+                        properties: json.layers[i].objects[v].properties
+
+                    };
+
+                    object.polyline = [];
+
+                    //  Parse the polyline into an array
+                    for (var p = 0; p < json.layers[i].objects[v].polyline.length; p++)
+                    {
+                        object.polyline.push([ json.layers[i].objects[v].polyline[p].x, json.layers[i].objects[v].polyline[p].y ]);
+                    }
+
+                    collision[json.layers[i].name].push(object);
+
+                }
 
             }
         }
 
         map.objects = objects;
+        map.collision = collision;
 
         //  Tilesets
         var tilesets = [];

src/utils/Debug.js

@@ -717,23 +717,24 @@ Phaser.Utils.Debug.prototype = {
         var shapeAngles = body.data.shapeAngles;
 
         var i = shapes.length;
-        var x = this.game.math.p2px(body.data.position[0]);
-        var y = this.game.math.p2px(body.data.position[1]);
+        var x = this.game.math.p2px(body.data.position[0]) - this.game.camera.view.x;
+        var y = this.game.math.p2px(body.data.position[1]) - this.game.camera.view.y;
         var angle = body.data.angle;
 
         while (i--)
         {
             if (shapes[i] instanceof p2.Rectangle)
             {
-                this.renderShapeRectangle(shapes[i], x, y, angle);
+                this.renderShapeRectangle(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
             }
             else if (shapes[i] instanceof p2.Line)
             {
-                this.renderShapeLine(x, y, shapes[i], shapeOffsets[i], shapeAngles[i]);
+                this.renderShapeLine(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
             }
-            else if (shapes[i] instanceof p2.Convex)
+            // else if (shapes[i] instanceof p2.Convex)
+            else
             {
-                this.renderShapeConvex(x, y, shapes[i], shapeOffsets[i], shapeAngles[i]);
+                this.renderShapeConvex(x, y, angle, shapes[i], shapeOffsets[i], shapeAngles[i]);
             }
         }
 
@@ -748,7 +749,7 @@ Phaser.Utils.Debug.prototype = {
     * @param {number} y - The y coordinate of the Body to translate to.
     * @param {number} angle - The angle of the Body to rotate to.
     */
-    renderShapeRectangle: function (shape, x, y, angle) {
+    renderShapeRectangle: function (x, y, bodyAngle, shape, offset, angle) {
         
         var w = this.game.math.p2px(shape.width);
         var h = this.game.math.p2px(shape.height);
@@ -756,9 +757,8 @@ Phaser.Utils.Debug.prototype = {
 
         this.context.beginPath();
         this.context.save();
-        this.context.translate(x, y);
-        this.context.rotate(angle);
-        this.context.lineWidth = 0.5;
+        this.context.translate(x + this.game.math.p2px(offset[0]), y + this.game.math.p2px(offset[1]));
+        this.context.rotate(bodyAngle + angle);
 
         this.context.moveTo(this.game.math.p2px(points[0][0]), this.game.math.p2px(points[0][1]));
 
@@ -781,18 +781,13 @@ Phaser.Utils.Debug.prototype = {
     * @param {number} offset - 
     * @param {number} angle - 
     */
-    renderShapeLine: function (x, y, shape, offset, angle) {
+    renderShapeLine: function (x, y, bodyAngle, shape, offset, angle) {
         
-        // var w = this.game.math.p2px(shape.width);
-        // var h = this.game.math.p2px(shape.height);
-        // var points = shape.vertices;
-
         this.context.beginPath();
         this.context.save();
         this.context.translate(x, y);
-        this.context.rotate(angle);
+        this.context.rotate(bodyAngle + angle);
         this.context.lineWidth = 0.5;
-        // this.context.moveTo(this.game.math.p2px(points[0][0]), this.game.math.p2px(points[0][1]));
         this.context.moveTo(0, 0);
         this.context.lineTo(this.game.math.p2px(shape.length), 0);
         this.context.closePath();
@@ -808,15 +803,14 @@ Phaser.Utils.Debug.prototype = {
     * @param {number} y - The y coordinate of the Body to translate to.
     * @param {number} angle - The angle of the Body to rotate to.
     */
-    renderShapeConvex: function (x, y, shape, offset, angle) {
+    renderShapeConvex: function (x, y, bodyAngle, shape, offset, angle) {
 
         var points = shape.vertices;
 
         this.context.beginPath();
         this.context.save();
         this.context.translate(x + this.game.math.p2px(offset[0]), y + this.game.math.p2px(offset[1]));
-        this.context.rotate(angle);
-        this.context.lineWidth = 0.5;
+        this.context.rotate(bodyAngle + angle);
 
         this.context.moveTo(this.game.math.p2px(points[0][0]), this.game.math.p2px(points[0][1]));