diff --git a/docs/_phaser_tilemap_GL_progress.txt b/docs/_phaser_tilemap_GL_progress.txt index 4879bf271..0fab47cf3 100644 --- a/docs/_phaser_tilemap_GL_progress.txt +++ b/docs/_phaser_tilemap_GL_progress.txt @@ -188,3 +188,6 @@ Added alpha blending based on TilemapLayerGL.alpha property. NOTE: this appears Prepared code to pass each Tile alpha value through to the batch renderer, however realised that implementing this will break the batching! Need to talk with Rich about it before proceeding further. +Modified the batch creation code and the batch drawing code to only insert degenerate triangles at the end of rows or when a row is broken (e.g. by some empty tiles which we won't draw at all). This should speed things up by optimising the draw, and reducing the amount of data required to describe the batch. + + diff --git a/src/pixi/extras/Tilemap.js b/src/pixi/extras/Tilemap.js index c86980cce..20cb0f43d 100644 --- a/src/pixi/extras/Tilemap.js +++ b/src/pixi/extras/Tilemap.js @@ -191,6 +191,7 @@ PIXI.Tilemap.prototype._renderBatch = function( renderSession ) // process entire glBatch into a single webGl draw buffer for a TRIANGLE_STRIP blit var c = 0; + var degenerate = false; for(var i = 0, l = this.glBatch.length; i < l; i++) { // sx: this.drawCoords[coordIndex], @@ -203,6 +204,13 @@ PIXI.Tilemap.prototype._renderBatch = function( renderSession ) // dh: this.tileHeight var t = this.glBatch[i]; + if ( !t ) + { + // insert a degenerate triangle when null is found in the list of batch objects + degenerate = true; + continue; + } + var x = t.dx * iWide - 1; var y = 1 - t.dy * iHigh; @@ -212,9 +220,8 @@ PIXI.Tilemap.prototype._renderBatch = function( renderSession ) var uvl = t.sx * iTextureWide; var uvt = t.sy * iTextureHigh; - // for every tile except the first one, use degenerate triangle to separate the tiles - // TODO: it might be possible to avoid this by drawing triangles more intelligently (e.g. each row with inverting the first/second triangle alternately) - if ( c > 0 ) + // insert a degenerate triangle to separate the tiles + if ( degenerate ) { // add a degenerate triangle: repeat the last vertex buffer[ c ] = oldR; @@ -228,6 +235,7 @@ PIXI.Tilemap.prototype._renderBatch = function( renderSession ) // advance the buffer index c += 8; + degenerate = false; } // calculate the destination location of the tile in screen units (-1..1) diff --git a/src/tilemap/TilemapLayerGL.js b/src/tilemap/TilemapLayerGL.js index d6cb7b810..739374560 100644 --- a/src/tilemap/TilemapLayerGL.js +++ b/src/tilemap/TilemapLayerGL.js @@ -645,7 +645,7 @@ Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left, var tw = this._mc.tileWidth; var th = this._mc.tileHeight; - var lastAlpha = NaN; + // var lastAlpha = NaN; offx = offx || 0; offy = offy || 0; @@ -699,6 +699,8 @@ Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left, if (!tile || tile.index < 0) { + // skipping some tiles, add a degenerate marker into the batch list + this._mc.tileset.addDegenerate( this.glBatch ); continue; } @@ -742,6 +744,8 @@ Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left, } + // at end of each row, add a degenerate marker into the batch list + this._mc.tileset.addDegenerate( this.glBatch ); } }; diff --git a/src/tilemap/Tileset.js b/src/tilemap/Tileset.js index 308fd8573..a3b8cb021 100644 --- a/src/tilemap/Tileset.js +++ b/src/tilemap/Tileset.js @@ -189,6 +189,20 @@ Phaser.Tileset.prototype = { }, + /** + * adds a marker for the batch display to insert a degenerate triangle (eg. at the end of each row of tiles) + * + * @param {[type]} glBatch [description] + */ + addDegenerate: function( glBatch ) + { + // don't insert multiple degenerate markers in a row + if ( glBatch[ glBatch.length - 1] ) + { + glBatch.push( null ); + } + }, + /** * Returns true if and only if this tileset contains the given tile index. *