Tilemap Rendering is working :)

examples/js.php

@@ -105,4 +105,5 @@
 	<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>
 	

examples/tilemap.php

@@ -26,6 +26,14 @@
 
     }
 
+    var canvas;
+    var context;
+    var baseTexture;
+    var texture;
+    var s;
+    var r;
+    var t;
+
     function create() {
 
         //  game, key, mapData, format, resizeWorld, tileWidth, tileHeight
@@ -33,12 +41,17 @@
         //  This creates the tilemap using the csv and tile sheet we loaded.
         //  We tell it use to CSV format parser. The 16x16 are the tile sizes.
         //  The 4th parameter (true) tells the game world to resize itself based on the map dimensions or not.
-        var t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
+        
+        t = new Phaser.Tilemap(game, 'csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
+
+        r = new Phaser.TilemapRenderer(game);
 
     }
 
     function update() {
 
+        r.render(t);
+
         if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
         {
             game.camera.x -= 4;

src/pixi/display/Sprite.js

@@ -152,7 +152,7 @@ PIXI.Sprite.prototype.setTexture = function(texture)
 PIXI.Sprite.prototype.onTextureUpdate = function(event)
 {
 	//this.texture.removeEventListener( 'update', this.onTextureUpdateBind );
-console.log('pot');	
+
 	// so if _width is 0 then width was not set..
 	if(this._width)this.scale.x = this._width / this.texture.frame.width;
 	if(this._height)this.scale.y = this._height / this.texture.frame.height;

src/tilemap/Tile.js

@@ -21,6 +21,12 @@ Phaser.Tile = function (game, tilemap, index, width, height) {
     */
     this.mass = 1.0;
 
+    /**
+    * Indicating this Tile doesn't collide at all.
+    * @type {bool}
+    */
+    this.collideNone = true;
+
     /**
     * Indicating collide with any object on the left.
     * @type {bool}
@@ -62,7 +68,6 @@ Phaser.Tile = function (game, tilemap, index, width, height) {
     this.index = index;
     this.width = width;
     this.height = height;
-    this.allowCollisions = Phaser.Types.NONE;
 
 };
 
@@ -82,44 +87,25 @@ Phaser.Tile.prototype = {
     * @param separateX {bool} Enable seprate at x-axis.
     * @param separateY {bool} Enable seprate at y-axis.
     */
-    setCollision: function (collision, resetCollisions, separateX, separateY) {
+    setCollision: function (left, right, up, down, reset, separateX, separateY) {
 
-        if (resetCollisions)
+        if (reset)
         {
             this.resetCollision();
         }
 
         this.separateX = separateX;
         this.separateY = separateY;
-        this.allowCollisions = collision;
 
-        if (collision & Phaser.Types.ANY)
-        {
-            this.collideLeft = true;
-            this.collideRight = true;
-            this.collideUp = true;
-            this.collideDown = true;
-            return;
-        }
+        this.collideNone = true;
+        this.collideLeft = left;
+        this.collideRight = right;
+        this.collideUp = up;
+        this.collideDown = down;
 
-        if (collision & Phaser.Types.LEFT || collision & Phaser.Types.WALL)
+        if (left || right || up || down)
         {
-            this.collideLeft = true;
-        }
-
-        if (collision & Phaser.Types.RIGHT || collision & Phaser.Types.WALL)
-        {
-            this.collideRight = true;
-        }
-
-        if (collision & Phaser.Types.UP || collision & Phaser.Types.CEILING)
-        {
-            this.collideUp = true;
-        }
-
-        if (collision & Phaser.Types.DOWN || collision & Phaser.Types.CEILING)
-        {
-            this.collideDown = true;
+            this.collideNone = false;
         }
 
     },
@@ -129,7 +115,7 @@ Phaser.Tile.prototype = {
     */
     resetCollision: function () {
 
-        this.allowCollisions = Phaser.Types.NONE;
+        this.collideNone = true;
         this.collideLeft = false;
         this.collideRight = false;
         this.collideUp = false;
@@ -144,7 +130,8 @@ Phaser.Tile.prototype = {
     **/
     toString: function () {
 
-        return "[{Tile (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]";
+        // return "[{Tile (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]";
+        return '';
 
     }
 

src/tilemap/Tilemap.js

@@ -46,9 +46,6 @@ Phaser.Tilemap = function (game, key, mapData, format, resizeWorld, tileWidth, t
     this.exists = true;
     this.visible = true;
 
-    // this.texture = new Phaser.Display.Texture(this);
-    // this.transform = new Phaser.Components.TransformManager(this);
-
     this.tiles = [];
     this.layers = [];
     this.mapFormat = format;

src/tilemap/TilemapLayer.js

@@ -67,27 +67,28 @@ Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, til
     * @type {number}
     */
     this.tileSpacing = 0;
+
     this.parent = parent;
     this.game = parent.game;
     this.ID = id;
     this.name = name;
+
     this.mapFormat = mapFormat;
+
     this.tileWidth = tileWidth;
     this.tileHeight = tileHeight;
+
     this.boundsInTiles = new Phaser.Rectangle();
 
-    // this.texture = new Phaser.Display.Texture(this);
-    // this.transform = new Phaser.Components.TransformManager(this);
-    
-    // if (key !== null)
-    // {
-    //     this.texture.loadImage(key, false);
-    // } else {
-    //     this.texture.opaque = true;
-    // }
+    this.tileset = this.game.cache.getImage(key);
 
-    //  Handy proxies
-    // this.alpha = this.texture.alpha;
+    this.alpha = 1;
+    this.canvas = Phaser.Canvas.create(this.game.width, this.game.height);
+    this.context = this.canvas.getContext('2d');
+    this.baseTexture = new PIXI.BaseTexture(this.canvas);
+    this.texture = new PIXI.Texture(this.baseTexture);
+    this.sprite = new PIXI.Sprite(this.texture);
+    this.game.stage._stage.addChild(this.sprite);
 
     this.mapData = [];
     this._tempTileBlock = [];
@@ -470,9 +471,9 @@ Phaser.TilemapLayer.prototype = {
             i = 1;
         }
 
-        for (var ty = this.tileMargin; ty < this.texture.height; ty += (this.tileHeight + this.tileSpacing))
+        for (var ty = this.tileMargin; ty < this.tileset.height; ty += (this.tileHeight + this.tileSpacing))
         {
-            for (var tx = this.tileMargin; tx < this.texture.width; tx += (this.tileWidth + this.tileSpacing))
+            for (var tx = this.tileMargin; tx < this.tileset.width; tx += (this.tileWidth + this.tileSpacing))
             {
                 this.tileOffsets[i] = {
                     x: tx,

src/tilemap/TilemapRenderer.js

@@ -0,0 +1,149 @@
+Phaser.TilemapRenderer = function (game) {
+
+    this.game = game;
+
+    //  Local rendering related temp vars to help avoid gc spikes through constant var creation
+    this._ga = 1;
+    this._dx = 0;
+    this._dy = 0;
+    this._dw = 0;
+    this._dh = 0;
+    this._tx = 0;
+    this._ty = 0;
+    this._tl = 0;
+    this._maxX = 0;
+    this._maxY = 0;
+    this._startX = 0;
+    this._startY = 0;
+	
+};
+
+Phaser.TilemapRenderer.prototype = {
+
+    /**
+     * Render a tilemap to a canvas.
+     * @param tilemap {Tilemap} The tilemap data to render.
+     */
+    render: function (tilemap) {
+
+        //  Loop through the layers
+        this._tl = tilemap.layers.length;
+
+        for (var i = 0; i < this._tl; i++)
+        {
+            if (tilemap.layers[i].visible == false || tilemap.layers[i].alpha < 0.1)
+            {
+                continue;
+            }
+
+            var layer = tilemap.layers[i];
+
+            //  Work out how many tiles we can fit into our canvas and round it up for the edges
+            this._maxX = this.game.math.ceil(layer.canvas.width / layer.tileWidth) + 1;
+            this._maxY = this.game.math.ceil(layer.canvas.height / layer.tileHeight) + 1;
+
+            //  And now work out where in the tilemap the camera actually is
+            // this._startX = this.game.math.floor(camera.worldView.x / layer.tileWidth);
+            // this._startY = this.game.math.floor(camera.worldView.y / layer.tileHeight);
+            this._startX = this.game.math.floor(this.game.camera.x / layer.tileWidth);
+            this._startY = this.game.math.floor(this.game.camera.y / layer.tileHeight);
+
+            //  Tilemap bounds check
+            if (this._startX < 0)
+            {
+                this._startX = 0;
+            }
+
+            if (this._startY < 0)
+            {
+                this._startY = 0;
+            }
+
+            if (this._maxX > layer.widthInTiles)
+            {
+                this._maxX = layer.widthInTiles;
+            }
+
+            if (this._maxY > layer.heightInTiles)
+            {
+                this._maxY = layer.heightInTiles;
+            }
+
+            if (this._startX + this._maxX > layer.widthInTiles)
+            {
+                this._startX = layer.widthInTiles - this._maxX;
+            }
+
+            if (this._startY + this._maxY > layer.heightInTiles)
+            {
+                this._startY = layer.heightInTiles - this._maxY;
+            }
+
+            //  Finally get the offset to avoid the blocky movement
+            //this._dx = (camera.screenView.x * layer.transform.scrollFactor.x) - (camera.worldView.x * layer.transform.scrollFactor.x);
+            //this._dy = (camera.screenView.y * layer.transform.scrollFactor.y) - (camera.worldView.y * layer.transform.scrollFactor.y);
+            //this._dx = (camera.screenView.x * this.scrollFactor.x) + this.x - (camera.worldView.x * this.scrollFactor.x);
+            //this._dy = (camera.screenView.y * this.scrollFactor.y) + this.y - (camera.worldView.y * this.scrollFactor.y);
+            this._dx = 0;
+            this._dy = 0;
+
+            this._dx += -(this.game.camera.x - (this._startX * layer.tileWidth));
+            this._dy += -(this.game.camera.y - (this._startY * layer.tileHeight));
+
+            this._tx = this._dx;
+            this._ty = this._dy;
+
+            //  Alpha
+            if (layer.alpha !== 1)
+            {
+                this._ga = layer.context.globalAlpha;
+                layer.context.globalAlpha = layer.alpha;
+            }
+
+            layer.context.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
+
+            for (var row = this._startY; row < this._startY + this._maxY; row++)
+            {
+                this._columnData = layer.mapData[row];
+
+                for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
+                {
+                    if (layer.tileOffsets[this._columnData[tile]])
+                    {
+                        layer.context.drawImage(
+                            layer.tileset,
+                            layer.tileOffsets[this._columnData[tile]].x,
+                            layer.tileOffsets[this._columnData[tile]].y,
+                            layer.tileWidth,
+                            layer.tileHeight,
+                            this._tx,
+                            this._ty,
+                            layer.tileWidth,
+                            layer.tileHeight
+                            );
+                    }
+
+                    this._tx += layer.tileWidth;
+
+                }
+
+                this._tx = this._dx;
+                this._ty += layer.tileHeight;
+
+            }
+
+            if (this._ga > -1)
+            {
+                layer.context.globalAlpha = this._ga;
+            }
+
+	        //  Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
+	        PIXI.texturesToUpdate.push(layer.baseTexture);
+
+        }
+
+        return true;
+
+    }
+
+};