Added offsets to render large tiles at the correct (according to Tiled editor) positions.

Author: pjbaron

docs/_phaser_tilemap_GL_progress.txt

@@ -172,11 +172,14 @@ Tiles are still turning off too soon at the map edges (exactly like the Canvas v
 
 Fixed tiles vanishing at the edge of the screen by using the difference between the original map tileWidth and the current tileset tileWidth when calculating the redraw region left and top.
 
-
 Removed resolveTileset from TilemapLayerGL as it is no longer needed.
 
 Task list updated:
 - Add alpha blending to the shader, calculate the 'final' alpha by multiplying the layer's worldAlpha with the tile.alpha
 - Add scaling to the shader, use the layer's worldScale.  (See if rotation can be easily supported too, while doing this)
 - Optimise the drawing to avoid degenerate triangles where possible, e.g. each row should be a single tri-strip without degenerates in it for faster drawing
 - larger tiles are top-left aligned but should be bottom-left aligned to match the way that Tiled places them
+
+Added offset parameters to renderRegion to correctly bottom-left align the large tiles.
+NOTE: the canvas version does not do this and consequently displays the tiles in the wrong positions.
+

src/tilemap/TilemapLayerGL.js

@@ -638,7 +638,7 @@ Phaser.TilemapLayerGL.prototype.setScale = function (xScale, yScale) {
 * @param {integer} right - Rightmost column to render.
 * @param {integer} bottom - Bottommost row to render.
 */
-Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left, top, right, bottom) {
+Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left, top, right, bottom, offx, offy) {
 
     var width = this.layer.width;
     var height = this.layer.height;
@@ -647,6 +647,9 @@ Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left,
 
     var lastAlpha = NaN;
 
+    offx = offx || 0;
+    offy = offy || 0;
+    
     if (!this._wrap)
     {
         if (left <= right) // Only adjust if going to render
@@ -718,12 +721,12 @@ Phaser.TilemapLayerGL.prototype.renderRegion = function (scrollX, scrollY, left,
                 //     context.scale(-1, 1);
                 // }
 
-                this._mc.tileset.drawGl(this.glBatch, -tile.centerX, -tile.centerY, index);
+                this._mc.tileset.drawGl(this.glBatch, -tile.centerX + offx, -tile.centerY + offy, index);
                 //context.restore();
             }
             else
             {
-                this._mc.tileset.drawGl(this.glBatch, tx, ty, index);
+                this._mc.tileset.drawGl(this.glBatch, tx + offx, ty + offy, index);
             }
             // if (!this._mc.tileset && this.debugSettings.missingImageFill)
             // {
@@ -765,11 +768,11 @@ Phaser.TilemapLayerGL.prototype.renderFull = function () {
 
     var left = Math.floor( (scrollX - (cw - tw)) / tw );
     var right = Math.floor( (renderW - 1 + scrollX) / tw );
-    var top = Math.floor( (scrollY - (ch - th)) / th );
+    var top = Math.floor( scrollY - (ch - th) / th );
     var bottom = Math.floor( (renderH - 1 + scrollY) / th );
 
     this.glBatch = [];
-    this.renderRegion(scrollX, scrollY, left, top, right, bottom);
+    this.renderRegion(scrollX, scrollY, left, top, right, bottom, 0, -(ch - th));
 };
 
 /**