Tilemap Rendering is working :)

2026-08-06 13:31:05 +08:00 · 2013-09-12 00:55:27 +01:00
parent 95374339b9
commit 89b00db103
17 changed files with 197 additions and 49 deletions
@@ -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;
+
+    }
+
+};