Dynamic Tilemap rendering

Author: bitnenfer

src/gameobjects/index.js

@@ -15,7 +15,7 @@ var GameObjects = {
     Blitter: require('./blitter/Blitter'),
     //Container: require('./container/Container'),
     DynamicBitmapText: require('./bitmaptext/dynamic/DynamicBitmapText'),
-    //DynamicTilemapLayer: require('./tilemap/dynamiclayer/DynamicTilemapLayer'),
+    DynamicTilemapLayer: require('./tilemap/dynamiclayer/DynamicTilemapLayer'),
     Graphics: require('./graphics/Graphics.js'),
     //Group: require('./group/Group'),
     Image: require('./image/Image'),
@@ -26,7 +26,7 @@ var GameObjects = {
     //StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'),
     Text: require('./text/static/Text'),
     //Tile: require('./tilemap/Tile'),
-    //Tilemap: require('./tilemap/Tilemap'),
+    Tilemap: require('./tilemap/Tilemap'),
     //Tileset: require('./tilemap/Tileset'),
     //TileSprite: require('./tilesprite/TileSprite'),
     //Zone: require('./zone/Zone'),
@@ -46,7 +46,7 @@ var GameObjects = {
         //Sprite3D: require('./sprite3d/Sprite3DFactory'),
         StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
         Text: require('./text/static/TextFactory'),
-        //Tilemap: require('./tilemap/TilemapFactory'),
+        Tilemap: require('./tilemap/TilemapFactory'),
         //TileSprite: require('./tilesprite/TileSpriteFactory'),
         //Zone: require('./zone/ZoneFactory')
     },
@@ -63,7 +63,7 @@ var GameObjects = {
         //Sprite3D: require('./sprite3d/Sprite3DCreator'),
         StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
         Text: require('./text/static/TextCreator'),
-        //Tilemap: require('./tilemap/TilemapCreator'),
+        Tilemap: require('./tilemap/TilemapCreator'),
         //TileSprite: require('./tilesprite/TileSpriteCreator'),
         //Zone: require('./zone/ZoneCreator')
     }

src/gameobjects/text/static/TextWebGLRenderer.js

@@ -19,6 +19,7 @@ var TextWebGLRenderer = function (renderer, text, interpolationPercentage, camer
     renderer.pipelines.TextureTintPipeline.batchTexture(
         text.canvasTexture,
         text.x, text.y,
+        text.canvasTexture.width, text.canvasTexture.height,
         text.scaleX, text.scaleY,
         text.rotation,
         text.flipX, text.flipY,

src/gameobjects/tilemap/Tilemap.js

@@ -1,7 +1,7 @@
 var Class = require('../../utils/Class');
 var Extend = require('../../utils/object/Extend');
 var LayerData = require('./mapdata/LayerData');
-var StaticTilemapLayer = require('./staticlayer/StaticTilemapLayer.js');
+//var StaticTilemapLayer = require('./staticlayer/StaticTilemapLayer.js');
 var DynamicTilemapLayer = require('./dynamiclayer/DynamicTilemapLayer.js');
 var Tileset = require('./Tileset');
 var Formats = require('./Formats');

src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js

@@ -1,29 +1,28 @@
 var GameObject = require('../../GameObject');
+var Utils = require('../../../renderer/webgl/Utils');
 
-var DynamicTilemapLayerWebGLRenderer = function (renderer, gameObject, interpolationPercentage, camera)
+var DynamicTilemapLayerWebGLRenderer = function (renderer, tilemapLayer, interpolationPercentage, camera)
 {
-    if (GameObject.RENDER_MASK !== gameObject.renderFlags || (gameObject.cameraFilter > 0 && (gameObject.cameraFilter & camera._id)))
+    if (GameObject.RENDER_MASK !== tilemapLayer.renderFlags || (tilemapLayer.cameraFilter > 0 && (tilemapLayer.cameraFilter & camera._id)))
     {
         return;
     }
 
-    gameObject.cull(camera);
+    tilemapLayer.cull(camera);
 
-    var renderTiles = gameObject.culledTiles;
+    var renderTiles = tilemapLayer.culledTiles;
     var length = renderTiles.length;
-    var batch = renderer.spriteBatch;
-    var texture = gameObject.tileset.image.get().source.glTexture;
-    var textureWidth = texture.width;
-    var textureHeight = texture.height;
-    var tileset = this.tileset;
-    var renderTarget = gameObject.renderTarget;
-    var scrollFactorX = gameObject.scrollFactorX;
-    var scrollFactorY = gameObject.scrollFactorY;
-    var alpha = gameObject.alpha;
-    var x = gameObject.x;
-    var y = gameObject.y;
-    var sx = gameObject.scaleX;
-    var sy = gameObject.scaleY;
+    var texture = tilemapLayer.tileset.image.get().source.glTexture;
+    var tileset = tilemapLayer.tileset;
+    var scrollFactorX = tilemapLayer.scrollFactorX;
+    var scrollFactorY = tilemapLayer.scrollFactorY;
+    var alpha = tilemapLayer.alpha;
+    var x = tilemapLayer.x;
+    var y = tilemapLayer.y;
+    var sx = tilemapLayer.scaleX;
+    var sy = tilemapLayer.scaleY;
+    var getTint = Utils.getTintAppendFloatAlpha;
+    var pipeline = renderer.pipelines.TextureTintPipeline; 
 
     for (var index = 0; index < length; ++index)
     {
@@ -36,19 +35,22 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, gameObject, interpola
         var frameHeight = tile.height * (tile.flipY ? -1 : 1);
         var frameX = tileTexCoords.x + (tile.flipX ? tile.width : 0);
         var frameY = tileTexCoords.y + (tile.flipY ? tile.height : 0);
+        var tint = getTint(tile.tint, alpha * tile.alpha);
 
-        batch.addTileTextureRect(
+        pipeline.batchTexture(
             texture,
-            x + tile.pixelX * sx, y + tile.pixelY * sy,
-            tile.width * sx, tile.height * sy,
-            alpha * tile.alpha, tile.tint,
+            tile.pixelX, tile.pixelY,
+            tile.width, tile.height,
+            1, 1,
+            0,
+            false, false,
             scrollFactorX, scrollFactorY,
-            textureWidth, textureHeight,
+            0, 0,
             frameX, frameY, frameWidth, frameHeight,
-            camera,
-            renderTarget
+            tint, tint, tint, tint,
+            camera
         );
-    }
+    }    
 };
 
 module.exports = DynamicTilemapLayerWebGLRenderer;

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -198,7 +198,8 @@ var TextureTintPipeline = new Class({
 
     batchTexture: function (
         texture,
-        dstX, dstY,
+        srcX, srcY,
+        srcWidth, srcHeight,
         scaleX, scaleY,
         rotation,
         flipX, flipY,
@@ -227,14 +228,14 @@ var TextureTintPipeline = new Class({
         var cameraHeight = camera.height + 50;
         var cameraX = -50;
         var cameraY = -50;
-        var width = frameWidth * (flipX ? -1.0 : 1.0);
-        var height = frameHeight * (flipY ? -1.0 : 1.0);
-        var x = -displayOriginX + frameX + ((frameWidth) * (flipX ? 1.0 : 0.0));
-        var y = -displayOriginY + frameY + ((frameHeight) * (flipY ? 1.0 : 0.0));
+        var width = srcWidth * (flipX ? -1.0 : 1.0);
+        var height = srcHeight * (flipY ? -1.0 : 1.0);
+        var x = -displayOriginX + ((srcWidth) * (flipX ? 1.0 : 0.0));
+        var y = -displayOriginY + ((srcHeight) * (flipY ? 1.0 : 0.0));
         var xw = x + width;
         var yh = y + height;
-        var translateX = dstX - camera.scrollX * scrollFactorX;
-        var translateY = dstY - camera.scrollY * scrollFactorY;
+        var translateX = srcX - camera.scrollX * scrollFactorX;
+        var translateY = srcY - camera.scrollY * scrollFactorY;
         var sr = Math.sin(rotation);
         var cr = Math.cos(rotation);
         var sra = cr * scaleX;
@@ -986,6 +987,7 @@ var TextureTintPipeline = new Class({
             renderer.popScissor();
         }
     }
+
 });
 
 module.exports = TextureTintPipeline;