Pixel Batch rendering working, and passing through properly.

Author: photonstorm

src/Phaser.js

@@ -16,7 +16,7 @@ var Phaser = Phaser || {    // jshint ignore:line
     * @constant
     * @type {string}
     */
-    VERSION: '3.0.0.r5',
+    VERSION: '3.0.0.r6',
 
     /**
     * An array of Phaser game instances.
@@ -552,5 +552,9 @@ var Phaser = Phaser || {    // jshint ignore:line
 
 };
 
+//  "Anybody who doesn’t change their mind a lot is
+//  dramatically underestimating the complexity of
+//  the world we live in.” - Jeff Bezos
+
 //  Remove when ready
 var PIXI = PIXI || {};

src/gameobjects/pixelfield/PixelField.js

@@ -34,6 +34,13 @@ Phaser.GameObject.PixelField = function (game, x, y, pixelSize)
 
     this.list = [];
 
+    this.getColor32 = function (r, g, b, a)
+    {
+        a *= 255;
+
+        return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0;
+    };
+
 };
 
 Phaser.GameObject.PixelField.prototype = Object.create(Phaser.GameObject.prototype);
@@ -53,6 +60,23 @@ Phaser.GameObject.PixelField.prototype.preUpdate = function ()
     }
 };
 
+//  Ideas:
+//
+//  Pixel velocity?
+//  Pixel fade (alpha out) duration?
+//  Kill pixel
+//  Remove pixel
+
+Phaser.GameObject.PixelField.prototype.add = function (x, y, r, g, b, a)
+{
+    this.list.push({
+        x: x,
+        y: y,
+        a: a,
+        color: this.getColor32(r, g, b, a)
+    });
+};
+
 // Phaser.GameObject.Image.prototype.update = function ()
 // {
 // };

src/gameobjects/pixelfield/PixelFieldWebGLRenderer.js

@@ -7,9 +7,23 @@ Phaser.Renderer.WebGL.GameObjects.PixelField = {
     render: function (renderer, src)
     {
         var verts = src.transform.glVertextData;
-        var color = src.color._glBg;
 
-        renderer.batch.addPixel(verts, color);
+        for (var i = 0; i < src.list.length; i++)
+        {
+            var pixel = src.list[i];
+
+            renderer.batch.addPixel(
+                verts.x0 + pixel.x,
+                verts.y0 + pixel.y,
+                verts.x1 + pixel.x,
+                verts.y1 + pixel.y,
+                verts.x2 + pixel.x,
+                verts.y2 + pixel.y,
+                verts.x3 + pixel.x,
+                verts.y3 + pixel.y,
+                pixel.color
+            );
+        }
     }
 
 };

src/renderer/webgl/BatchManager.js

@@ -55,15 +55,15 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
         this.currentBatch.stop();
     },
 
-    addPixel: function (verts, color)
+    addPixel: function (x0, y0, x1, y1, x2, y2, x3, y3, color)
     {
         //  Check Batch Size and flush if needed
         if (this.currentBatch.size >= this.currentBatch.maxSize)
         {
             this.currentBatch.flush();
         }
 
-        this.pixelBatch.add(verts, color);
+        this.pixelBatch.add(x0, y0, x1, y1, x2, y2, x3, y3, color);
     },
 
     add: function (source, blendMode, verts, uvs, textureIndex, alpha, tintColors, bgColors)
@@ -107,7 +107,7 @@ Phaser.Renderer.WebGL.BatchManager.prototype = {
 
         //  Shader?
 
-        // this.imageBatch.add(verts, uvs, textureIndex, alpha, tintColors, bgColors);
+        this.imageBatch.add(verts, uvs, textureIndex, alpha, tintColors, bgColors);
         // this.fxBatch.add(verts, uvs, textureIndex, alpha, tintColors, bgColors);
         // this.multiTextureBatch.add(verts, uvs, textureIndex, alpha, tintColors, bgColors);
 

src/renderer/webgl/batches/PixelBatch.js

@@ -78,8 +78,8 @@ Phaser.Renderer.WebGL.Batch.Pixel.prototype.init = function ()
         'varying vec4 vColor;', //  the color value passed in from the vertex shader
 
         'void main(void) {',
-        // '   gl_FragColor = vColor;',
-        '   gl_FragColor = PINK;',
+        '   gl_FragColor = vColor;',
+        // '   gl_FragColor = PINK;',
         '}'
     ];
 
@@ -197,40 +197,32 @@ Phaser.Renderer.WebGL.Batch.Pixel.prototype.bindShader = function ()
     gl.vertexAttribPointer(this.aColor, 4, gl.UNSIGNED_BYTE, true, vertSize, 8);
 };
 
-Phaser.Renderer.WebGL.Batch.Pixel.prototype.add = function (verts, color)
+Phaser.Renderer.WebGL.Batch.Pixel.prototype.add = function (x0, y0, x1, y1, x2, y2, x3, y3, color)
 {
     //  These are TypedArray Views into the vertices ArrayBuffer
     var colors = this.colors;
     var positions = this.positions;
 
     var i = this._i;
 
-    //  Top Left vert (xy, uv, color)
-    positions[i++] = verts.x0;
-    positions[i++] = verts.y0;
-    // positions[i++] = uvs.x0;
-    // positions[i++] = uvs.y0;
+    //  Top Left vert (xy, color)
+    positions[i++] = x0;
+    positions[i++] = y0;
     colors[i++] = color;
 
-    //  Top Right vert (xy, uv, color)
-    positions[i++] = verts.x1;
-    positions[i++] = verts.y1;
-    // positions[i++] = uvs.x1;
-    // positions[i++] = uvs.y1;
+    //  Top Right vert (xy, color)
+    positions[i++] = x1;
+    positions[i++] = y1;
     colors[i++] = color;
 
-    //  Bottom Right vert (xy, uv, color)
-    positions[i++] = verts.x2;
-    positions[i++] = verts.y2;
-    // positions[i++] = uvs.x2;
-    // positions[i++] = uvs.y2;
+    //  Bottom Right vert (xy, color)
+    positions[i++] = x2;
+    positions[i++] = y2;
     colors[i++] = color;
 
-    //  Bottom Left vert (xy, uv, color)
-    positions[i++] = verts.x3;
-    positions[i++] = verts.y3;
-    // positions[i++] = uvs.x3;
-    // positions[i++] = uvs.y3;
+    //  Bottom Left vert (xy, color)
+    positions[i++] = x3;
+    positions[i++] = y3;
     colors[i++] = color;
 
     this._i = i;