Extracting the correct area from a layer, debug displaying it and preparing for collision.

examples/tilemaps/wip1.php

@@ -15,9 +15,12 @@
 
     }
 
+    var map;
+    var tileset;
     var layer;
     var cursors;
     var sprite2;
+    var overlap;
 
     function create() {
 
@@ -25,9 +28,19 @@
 
         //  A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere).
         //  You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer.
-        var map = new Phaser.Tilemap(game, 'level3');
+        map = new Phaser.Tilemap(game, 'level3');
 
-        var tileset = game.cache.getTileset('tiles');
+        //  A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import.
+        //  You can set properties on the Tile objects, such as collision, n-way movement and meta data.
+        //  A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes.
+        //  This way multiple levels can share the same single Tileset without requiring one each.
+        tileset = game.cache.getTileset('tiles');
+        
+        //  Basically this sets EVERY SINGLE tile to fully collide on all faces
+        tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true);
+
+        //  And this turns off collision on the only tile we don't want collision on :)
+        tileset.setCollision(6, false, false, false, false);
 
         //  A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data.
         //  The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world.
@@ -38,6 +51,11 @@
         layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, tileset, map, 0);
 
         //  To set tiles for collision you need to modify the Tileset, which is a property of the layer
+
+        //  Task now
+        //
+        //  1) Get tiles that will collide with sprites new position (hullX and hullY)
+        //  2) Separate x/y
         
 
         //  Collision is based on the layer.x/y value
@@ -95,12 +113,55 @@
             layer.x += 4;
         }
 
+        //    getTiles: function (x, y, width, height, collides, layer) {
+        overlap = layer.getTiles(layer.x, layer.y, 128, 128);
+
     }
 
     function render() {
 
         layer.render();
 
+        game.context.save();
+        game.context.setTransform(1, 0, 0, 1, 0, 0);
+        game.context.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+        if (overlap.length > 1)
+        {
+            var x = 0;
+            var y = 0;
+
+            for (var i = 1; i < overlap.length; i++)
+            {
+                game.context.drawImage(
+                    overlap[i].tile.tileset.image,
+                    overlap[i].tile.x,
+                    overlap[i].tile.y,
+                    overlap[i].tile.width,
+                    overlap[i].tile.height,
+                    0 + (x * overlap[i].tile.width),
+                    420 + (y * overlap[i].tile.height),
+                    overlap[i].tile.width,
+                    overlap[i].tile.height
+                );
+
+                if (overlap[i].tile.collideNone == false)
+                {
+                    game.context.fillRect(0 + (x * overlap[i].tile.width), 420 + (y * overlap[i].tile.height), overlap[i].tile.width, overlap[i].tile.height);
+                }
+
+                x++;
+
+                if (x == overlap[0].tw)
+                {
+                    x = 0;
+                    y++;
+                }
+            }
+        }
+
+        game.context.restore();
+
     }
 
 </script>