Fixed the alpha blending (copied the approach from the TriangleStrip PIXI shader) for Tilemap layers. The "blank tilemap" example now works properly and blends the background layers when you use the number keys to switch primary layers.

Author: pjbaron

docs/_phaser_tilemap_GL_progress.txt

@@ -190,4 +190,5 @@ 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.
 
+Took a look at the PIXI triangle strip shader and noticed that the alpha is being used as a multiplier on the whole colour vector... I was applying it directly to the .a fourth vector value.  Changed the tilemap shader to match and it's working great now!
 

src/pixi/extras/Tilemap.js

@@ -56,7 +56,7 @@ PIXI.Tilemap = function(texture, mapwidth, mapheight, tilewidth, tileheight, lay
     this.dirty = true;
 
     /**
-     * The blend mode to be applied to the sprite. Set to PIXI.blendModes.NORMAL to remove any blend mode.
+     * The blend mode to be applied to the tilemap. Set to PIXI.blendModes.NORMAL to remove any blend mode.
      *
      * @property blendMode
      * @type Number
@@ -91,8 +91,7 @@ PIXI.Tilemap.prototype._renderWebGL = function(renderSession)
 
     renderSession.spriteBatch.stop();
 
-    // init! init!
-    if(!this._vertexBuffer)
+    if (!this._vertexBuffer)
     {
       this._initWebGL(renderSession);
     }

src/pixi/renderers/webgl/shaders/TilemapShader.js

@@ -35,9 +35,7 @@ PIXI.TilemapShader = function(gl)
         "  uniform float uAlpha;",
         "  varying vec2 vTexCoord;",
         "  void main(void) {",
-        "    vec4 col = texture2D(uImageSampler, vTexCoord);",
-        "    col.a = uAlpha;",
-        "    gl_FragColor = col;",
+        "    gl_FragColor = texture2D(uImageSampler, vTexCoord) * uAlpha;",
         "  }"
         ];
 

src/pixi/renderers/webgl/utils/WebGLShaderManager.js

@@ -67,6 +67,7 @@ PIXI.WebGLShaderManager.prototype.setContext = function(gl)
     // the next one is used for rendering triangle strips
     this.stripShader = new PIXI.StripShader(gl);
 
+    // shader for batch drawing tilemap tiles as a set of triangle strips with degenerate triangles between them
     this.tilemapShader = new PIXI.TilemapShader(gl);
 
     this.setShader(this.defaultShader);