Tileset working, map coming next.

2026-07-20 12:30:48 +08:00 · 2013-10-11 06:30:28 +01:00
parent b868c2cb1b
commit cf414394c3
12 changed files with 7427 additions and 71 deletions
@@ -44,7 +44,10 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
    /**
    * @property {Description} tileset - Description.
    */
-    this.tileset = tileset;
+    this.tileset = null;
+
+    this.tileWidth = 0;
+    this.tileHeight = 0;

    this.widthInTiles = 0;
    this.heightInTiles = 0;
@@ -52,6 +55,78 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
    this.renderWidth = renderWidth;
    this.renderHeight = renderHeight;

+    /**
+    * @property {number} _ga - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._ga = 1;
+    
+    /**
+    * @property {number} _dx - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dx = 0;
+    
+    /**
+    * @property {number} _dy - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dy = 0;
+    
+    /**
+    * @property {number} _dw - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dw = 0;
+    
+    /**
+    * @property {number} _dh - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._dh = 0;
+    
+    /**
+    * @property {number} _tx - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._tx = 0;
+    
+    /**
+    * @property {number} _ty - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._ty = 0;
+    
+    /**
+    * @property {number} _tl - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._tl = 0;
+    
+    /**
+    * @property {number} _maxX - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._maxX = 0;
+    
+    /**
+    * @property {number} _maxY - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._maxY = 0;
+    
+    /**
+    * @property {number} _startX - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._startX = 0;
+    
+    /**
+    * @property {number} _startY - Local render loop var to help avoid gc spikes.
+    * @private 
+    */
+    this._startY = 0;
+
 };

 Phaser.TilemapLayer.prototype = {
@@ -96,6 +171,109 @@ Phaser.TilemapLayer.prototype = {

    },

+    updateTileset: function (tileset) {
+
+        this.tileset = this.game.cache.getTileset(tileset);
+        this.tileWidth = this.tileset.tileWidth;
+        this.tileHeight = this.tileset.tileHeight;
+
+    },
+
+    render: function () {
+
+        if (this.visible == false)
+        {
+            return;
+        }
+
+        //  Work out how many tiles we can fit into our canvas and round it up for the edges
+        this._maxX = this.game.math.ceil(this.canvas.width / this.tileWidth) + 1;
+        this._maxY = this.game.math.ceil(this.canvas.height / this.tileHeight) + 1;
+
+        //  And now work out where in the tilemap the camera actually is
+        this._startX = this.game.math.floor(this.game.camera.x / this.tileWidth);
+        this._startY = this.game.math.floor(this.game.camera.y / this.tileHeight);
+
+        //  Tilemap bounds check
+        if (this._startX < 0)
+        {
+            this._startX = 0;
+        }
+
+        if (this._startY < 0)
+        {
+            this._startY = 0;
+        }
+
+        if (this._maxX > this.widthInTiles)
+        {
+            this._maxX = this.widthInTiles;
+        }
+
+        if (this._maxY > this.heightInTiles)
+        {
+            this._maxY = this.heightInTiles;
+        }
+
+        if (this._startX + this._maxX > this.widthInTiles)
+        {
+            this._startX = this.widthInTiles - this._maxX;
+        }
+
+        if (this._startY + this._maxY > this.heightInTiles)
+        {
+            this._startY = this.heightInTiles - this._maxY;
+        }
+
+        //  Finally get the offset to avoid the blocky movement
+        this._dx = -(this.game.camera.x - (this._startX * this.tileWidth));
+        this._dy = -(this.game.camera.y - (this._startY * this.tileHeight));
+
+        this._tx = this._dx;
+        this._ty = this._dy;
+
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        for (var row = this._startY; row < this._startY + this._maxY; row++)
+        {
+            this._columnData = this.mapData[row];
+
+            for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
+            {
+                if (this.tileset.checkTileIndex(this._columnData[tile]))
+                {
+                    this.context.drawImage(
+                        this.tileset.image,
+                        this.tileset.tiles[this._columnData[tile]].x,
+                        this.tileset.tiles[this._columnData[tile]].y,
+                        this.tileWidth,
+                        this.tileHeight,
+                        this._tx,
+                        this._ty,
+                        this.tileWidth,
+                        this.tileHeight
+                    );
+                }
+
+                this._tx += this.tileWidth;
+
+            }
+
+            this._tx = this._dx;
+            this._ty += this.tileHeight;
+        }
+
+        //  Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!
+        if (this.game.renderType == Phaser.WEBGL)
+        {
+            PIXI.texturesToUpdate.push(this.baseTexture);
+        }
+
+        return true;
+
+    },
+
+
    dump: function () {

        var txt = '';