transparent, clearBeforeRender and roundPixels now affect the rendering result

Author: bitnenfer

src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js

@@ -174,11 +174,10 @@ var StaticTilemapLayer = new Class({
                         texCoords = tileset.getTileTextureCoordinates(tile.index);
                         if (texCoords === null) { continue; }
 
-                        // Inset UV coordinates by 0.5px to prevent tile bleeding
-                        var u0 = (texCoords.x + 0.5) / width;
-                        var v0 = (texCoords.y + 0.5) / height;
-                        var u1 = (texCoords.x + tile.width - 0.5) / width;
-                        var v1 = (texCoords.y + tile.height - 0.5) / height;
+                        var u0 = texCoords.x / width;
+                        var v0 = texCoords.y / height;
+                        var u1 = (texCoords.x + tile.width) / width;
+                        var v1 = (texCoords.y + tile.height) / height;
 
                         var tx0 = tx;
                         var ty0 = ty;

src/renderer/webgl/WebGLRenderer.js

@@ -21,20 +21,20 @@ var WebGLRenderer = new Class({
     function WebGLRenderer (game)
     {
         var renderer = this;
-        var config = {
-            backgroundColor: game.config.backgroundColor,
-            contextCreation: {
-                alpha: false,
-                depth: false, // enable when 3D is added in the future
-                antialias: true,
-                premultipliedAlpha: true,
-                stencil: true,
-                preserveDrawingBuffer: false,
-                failIfMajorPerformanceCaveat: false
-            }
+        var contextCreationConfig = {
+            alpha: game.config.transparent,
+            depth: false, // enable when 3D is added in the future
+            antialias: game.config.antialias,
+            premultipliedAlpha: game.config.transparent,
+            stencil: true,
+            preserveDrawingBuffer: game.config.preserveDrawingBuffer,
+            failIfMajorPerformanceCaveat: false,
+            powerPreference: game.config.powerPreference
         };
 
+        this.contextCreationConfig = contextCreationConfig;
         this.game = game;
+        this.gameConfig = game.config;
         this.type = CONST.WEBGL;
         this.width = game.config.width * game.config.resolution;
         this.height = game.config.height * game.config.resolution;
@@ -88,7 +88,7 @@ var WebGLRenderer = new Class({
 
         this.canvas.addEventListener('webglcontextrestored', function (event) {
             renderer.contextLost = false;
-            renderer.init(config);
+            renderer.init(renderer.gameConfig, renderer.contextCreationConfig);
             for (var index = 0; index < renderer.restoredContextCallbacks.length; ++index)
             {
                 var callback = renderer.restoredContextCallbacks[index];
@@ -101,14 +101,14 @@ var WebGLRenderer = new Class({
         this.supportedExtensions = null;
         this.extensions = {};
 
-        this.init(config);
+        this.init(this.gameConfig, this.contextCreationConfig);
     },
 
-    init: function (config)
+    init: function (config, contextCreationConfig)
     {
         var canvas = this.canvas;
         var clearColor = config.backgroundColor;
-        var gl = canvas.getContext('webgl', config.contextCreation) || canvas.getContext('experimental-webgl', config.contextCreation);
+        var gl = canvas.getContext('webgl', contextCreationConfig) || canvas.getContext('experimental-webgl', contextCreationConfig);
 
         if (!gl)
         {
@@ -143,7 +143,7 @@ var WebGLRenderer = new Class({
         this.addPipeline('Light2D', new ForwardDiffuseLightPipeline(this.game, gl, this));
 
         this.setBlendMode(CONST.BlendModes.NORMAL);
-        this.resize(this.width, this.height, this.game.config.resolution);
+        this.resize(this.width, this.height, config.resolution);
 
         return this;
     },
@@ -238,7 +238,7 @@ var WebGLRenderer = new Class({
         else console.warn('Pipeline', pipelineName, ' already exists.');
 
         pipelineInstance.name = pipelineName;
-        this.pipelines[pipelineName].resize(this.width, this.height, this.game.config.resolution);
+        this.pipelines[pipelineName].resize(this.width, this.height, this.gameConfig.resolution);
 
         return this;
     },
@@ -450,7 +450,7 @@ var WebGLRenderer = new Class({
         {
             filter = gl.LINEAR;
         }
-        else if (scaleMode === CONST.ScaleModes.NEAREST || this.game.config.pixelArt)
+        else if (scaleMode === CONST.ScaleModes.NEAREST || this.gameConfig.pixelArt)
         {
             filter = gl.NEAREST;
         }
@@ -683,12 +683,14 @@ var WebGLRenderer = new Class({
         if (this.contextLost) return;
 
         var gl = this.gl;
-        var color = this.game.config.backgroundColor;
+        var color = this.gameConfig.backgroundColor;
         var pipelines = this.pipelines;
 
         // Bind custom framebuffer here
         gl.clearColor(color.redGL, color.greenGL, color.blueGL, color.alphaGL);
-        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+
+        if (this.gameConfig.clearBeforeRender)
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
 
         for (var key in pipelines)
         {

src/renderer/webgl/pipelines/FlatTintPipeline.js

@@ -99,15 +99,17 @@ var FlatTintPipeline = new Class({
         return this;
     },
 
-    batchFillRect: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, x, y, width, height, fillColor, fillAlpha, a1, b1, c1, d1, e1, f1, currentMatrix)
+    batchFillRect: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, x, y, width, height, fillColor, fillAlpha, a1, b1, c1, d1, e1, f1, currentMatrix, roundPixels)
     {        
         this.renderer.setPipeline(this);
 
         if (this.vertexCount + 6 > this.vertexCapacity)
         {
             this.flush();
         }
-
+        
+        var renderer = this.renderer;        
+        var resolution = renderer.gameConfig.resolution;
         var vertexViewF32 = this.vertexViewF32;
         var vertexViewU32 = this.vertexViewU32;
         var vertexOffset = this.vertexCount * this.vertexComponentCount;
@@ -135,6 +137,18 @@ var FlatTintPipeline = new Class({
         var ty3 = xw * b + y * d + f;
         var tint = Utils.getTintAppendFloatAlphaAndSwap(fillColor, fillAlpha);
 
+        if (roundPixels)
+        {
+            tx0 = ((tx0 * resolution)|0) / resolution;
+            ty0 = ((ty0 * resolution)|0) / resolution;
+            tx1 = ((tx1 * resolution)|0) / resolution;
+            ty1 = ((ty1 * resolution)|0) / resolution;
+            tx2 = ((tx2 * resolution)|0) / resolution;
+            ty2 = ((ty2 * resolution)|0) / resolution;
+            tx3 = ((tx3 * resolution)|0) / resolution;
+            ty3 = ((ty3 * resolution)|0) / resolution;
+        }
+
         vertexViewF32[vertexOffset + 0] = tx0;
         vertexViewF32[vertexOffset + 1] = ty0;
         vertexViewU32[vertexOffset + 2] = tint;
@@ -157,7 +171,7 @@ var FlatTintPipeline = new Class({
         this.vertexCount += 6;
     },
 
-    batchFillTriangle: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, x0, y0, x1, y1, x2, y2, fillColor, fillAlpha, a1, b1, c1, d1, e1, f1, currentMatrix)
+    batchFillTriangle: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, x0, y0, x1, y1, x2, y2, fillColor, fillAlpha, a1, b1, c1, d1, e1, f1, currentMatrix, roundPixels)
     {
         this.renderer.setPipeline(this);
 
@@ -166,6 +180,8 @@ var FlatTintPipeline = new Class({
             this.flush();
         }
 
+        var renderer = this.renderer;        
+        var resolution = renderer.gameConfig.resolution;
         var vertexViewF32 = this.vertexViewF32;
         var vertexViewU32 = this.vertexViewU32;
         var vertexOffset = this.vertexCount * this.vertexComponentCount;
@@ -189,6 +205,16 @@ var FlatTintPipeline = new Class({
         var ty2 = x2 * b + y2 * d + f;
         var tint = Utils.getTintAppendFloatAlphaAndSwap(fillColor, fillAlpha);
 
+        if (roundPixels)
+        {
+            tx0 = ((tx0 * resolution)|0) / resolution;
+            ty0 = ((ty0 * resolution)|0) / resolution;
+            tx1 = ((tx1 * resolution)|0) / resolution;
+            ty1 = ((ty1 * resolution)|0) / resolution;
+            tx2 = ((tx2 * resolution)|0) / resolution;
+            ty2 = ((ty2 * resolution)|0) / resolution;
+        }
+
         vertexViewF32[vertexOffset + 0] = tx0;
         vertexViewF32[vertexOffset + 1] = ty0;
         vertexViewU32[vertexOffset + 2] = tint;
@@ -202,7 +228,7 @@ var FlatTintPipeline = new Class({
         this.vertexCount += 3;
     },
 
-    batchStrokeTriangle: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, x0, y0, x1, y1, x2, y2, lineWidth, lineColor, lineAlpha, a, b, c, d, e, f, currentMatrix)
+    batchStrokeTriangle: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, x0, y0, x1, y1, x2, y2, lineWidth, lineColor, lineAlpha, a, b, c, d, e, f, currentMatrix, roundPixels)
     {
 
         var tempTriangle = this.tempTriangle;
@@ -233,14 +259,17 @@ var FlatTintPipeline = new Class({
             tempTriangle, lineWidth, lineColor, lineAlpha,
             a, b, c, d, e, f,
             false,
-            currentMatrix
+            currentMatrix,
+            roundPixels
         );
     },
 
-    batchFillPath: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, path, fillColor, fillAlpha, a1, b1, c1, d1, e1, f1, currentMatrix)
+    batchFillPath: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, path, fillColor, fillAlpha, a1, b1, c1, d1, e1, f1, currentMatrix, roundPixels)
     {
         this.renderer.setPipeline(this);
 
+        var renderer = this.renderer;        
+        var resolution = renderer.gameConfig.resolution;
         var length = path.length;
         var polygonCache = this.polygonCache;
         var polygonIndexArray;
@@ -301,6 +330,16 @@ var FlatTintPipeline = new Class({
             tx2 = x2 * a + y2 * c + e;
             ty2 = x2 * b + y2 * d + f;
 
+            if (roundPixels)
+            {
+                tx0 = ((tx0 * resolution)|0) / resolution;
+                ty0 = ((ty0 * resolution)|0) / resolution;
+                tx1 = ((tx1 * resolution)|0) / resolution;
+                ty1 = ((ty1 * resolution)|0) / resolution;
+                tx2 = ((tx2 * resolution)|0) / resolution;
+                ty2 = ((ty2 * resolution)|0) / resolution;
+            }
+
             vertexViewF32[vertexOffset + 0] = tx0;
             vertexViewF32[vertexOffset + 1] = ty0;
             vertexViewU32[vertexOffset + 2] = tint;
@@ -317,7 +356,7 @@ var FlatTintPipeline = new Class({
         polygonCache.length = 0;
     },
 
-    batchStrokePath: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, path, lineWidth, lineColor, lineAlpha, a, b, c, d, e, f, isLastPath, currentMatrix)
+    batchStrokePath: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, path, lineWidth, lineColor, lineAlpha, a, b, c, d, e, f, isLastPath, currentMatrix, roundPixels)
     {
         this.renderer.setPipeline(this);
 
@@ -343,7 +382,8 @@ var FlatTintPipeline = new Class({
                 point0.width / 2, point1.width / 2,
                 point0.rgb, point1.rgb, lineAlpha,
                 a, b, c, d, e, f,
-                currentMatrix
+                currentMatrix,
+                roundPixels
             );
 
             polylines.push(line);
@@ -387,15 +427,17 @@ var FlatTintPipeline = new Class({
 
     },
 
-    batchLine: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, ax, ay, bx, by, aLineWidth, bLineWidth, aLineColor, bLineColor, lineAlpha, a1, b1, c1, d1, e1, f1, currentMatrix) 
+    batchLine: function (srcX, srcY, srcScaleX, srcScaleY, srcRotation, ax, ay, bx, by, aLineWidth, bLineWidth, aLineColor, bLineColor, lineAlpha, a1, b1, c1, d1, e1, f1, currentMatrix, roundPixels) 
     {
         this.renderer.setPipeline(this);
 
         if (this.vertexCount + 6 > this.vertexCapacity)
         {
             this.flush();
         }
-
+        
+        var renderer = this.renderer;        
+        var resolution = renderer.gameConfig.resolution;
         var a0 = currentMatrix[0];
         var b0 = currentMatrix[1];
         var c0 = currentMatrix[2];
@@ -438,6 +480,18 @@ var FlatTintPipeline = new Class({
         var bTint = getTint(bLineColor, lineAlpha);
         var vertexOffset = this.vertexCount * this.vertexComponentCount;
 
+        if (roundPixels)
+        {
+            x0 = ((x0 * resolution)|0) / resolution;
+            y0 = ((y0 * resolution)|0) / resolution;
+            x1 = ((x1 * resolution)|0) / resolution;
+            y1 = ((y1 * resolution)|0) / resolution;
+            x2 = ((x2 * resolution)|0) / resolution;
+            y2 = ((y2 * resolution)|0) / resolution;
+            x3 = ((x3 * resolution)|0) / resolution;
+            y3 = ((y3 * resolution)|0) / resolution;
+        }
+
         vertexViewF32[vertexOffset + 0] = x0;
         vertexViewF32[vertexOffset + 1] = y0;
         vertexViewU32[vertexOffset + 2] = bTint;
@@ -522,6 +576,7 @@ var FlatTintPipeline = new Class({
         var mvd = src * cmb + srd * cmd;
         var mve = sre * cma + srf * cmc + cme;
         var mvf = sre * cmb + srf * cmd + cmf;
+        var roundPixels = camera.roundPixels;
 
         pathArray.length = 0;
 
@@ -610,7 +665,8 @@ var FlatTintPipeline = new Class({
                             fillAlpha,
                             /* Transform */
                             mva, mvb, mvc, mvd, mve, mvf,
-                            currentMatrix
+                            currentMatrix,
+                            roundPixels
                         );
                     }
                     break;
@@ -632,7 +688,8 @@ var FlatTintPipeline = new Class({
                             /* Transform */
                             mva, mvb, mvc, mvd, mve, mvf,
                             path === this._lastPath,
-                            currentMatrix
+                            currentMatrix,
+                            roundPixels
                         );
                     }
                     break;
@@ -650,7 +707,8 @@ var FlatTintPipeline = new Class({
                         fillAlpha,
                         /* Transform */
                         mva, mvb, mvc, mvd, mve, mvf,
-                        currentMatrix
+                        currentMatrix,
+                        roundPixels
                     );
 
                     cmdIndex += 4;
@@ -671,7 +729,8 @@ var FlatTintPipeline = new Class({
                         fillAlpha,
                         /* Transform */
                         mva, mvb, mvc, mvd, mve, mvf,
-                        currentMatrix
+                        currentMatrix,
+                        roundPixels
                     );
 
                     cmdIndex += 6;
@@ -693,7 +752,8 @@ var FlatTintPipeline = new Class({
                         lineAlpha,
                         /* Transform */
                         mva, mvb, mvc, mvd, mve, mvf,
-                        currentMatrix
+                        currentMatrix,
+                        roundPixels
                     );
 
                     cmdIndex += 6;