Camera.alpha (and its related method Camera.setAlpha) allows you to get an alpha level for the entire camera. This impacts everything it is rendering, even if those objects also have their own alpha values too. You can tween the property to make the camera contents fade in / out, or you can set it as needed in your game.

Author: photonstorm

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Camera - New Features, Updates and Fixes
 
+* `Camera.alpha` (and its related method `Camera.setAlpha`) allows you to get an alpha level for the entire camera. This impacts everything it is rendering, even if those objects also have their own alpha values too. You can tween the property to make the camera contents fade in / out, or you can set it as needed in your game.
 * `Camera.deadzone` (and its related method `Camera.setDeadzone`) allows you to specify the deadzone for a camera. The deadzone is a rectangular region used when a camera is following a target. If the target is within the deadzone then the camera will not scroll. As soon as the target leaves the deadzone, the camera will begin tracking it (applying lerp if needed.) It allows you to set a region of the camera in which a player can move freely before tracking begins. The deadzone is re-centered on the camera mid point every frame, meaning you can also use the rectangle for other in-game chcecks as needed.
 * `Camera.midPoint` is a new Vec2 property that is updated every frame. Use it to obtain exactly where in the world the center of the camera is currently looking.
 * `Camera.displayWidth` is a new property that returns the display width of the camera, factoring in the current zoom level.

src/renderer/canvas/utils/DrawImage.js

@@ -31,11 +31,8 @@ var DrawImage = function (src, camera, parentMatrix)
         //  Nothing to see, so abort early
         return;
     }
-    else if (renderer.currentAlpha !== alpha)
-    {
-        renderer.currentAlpha = alpha;
-        ctx.globalAlpha = alpha;
-    }
+
+    ctx.globalAlpha = alpha;
 
     //  Blend Mode
 

src/renderer/webgl/pipelines/FlatTintPipeline.js

@@ -732,7 +732,7 @@ var FlatTintPipeline = new Class({
         var srcScaleY = graphics.scaleY;
         var srcRotation = graphics.rotation;
         var commands = graphics.commandBuffer;
-        var alpha = graphics.alpha;
+        var alpha = camera.alpha * graphics.alpha;
         var lineAlpha = 1.0;
         var fillAlpha = 1.0;
         var lineColor = 0;

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -813,10 +813,10 @@ var TextureTintPipeline = new Class({
         var scaleX = sprite.scaleX;
         var scaleY = sprite.scaleY;
         var rotation = sprite.rotation;
-        var alphaTL = sprite._alphaTL;
-        var alphaTR = sprite._alphaTR;
-        var alphaBL = sprite._alphaBL;
-        var alphaBR = sprite._alphaBR;
+        var alphaTL = camera.alpha * sprite._alphaTL;
+        var alphaTR = camera.alpha * sprite._alphaTR;
+        var alphaBL = camera.alpha * sprite._alphaBL;
+        var alphaBR = camera.alpha * sprite._alphaBR;
         var tintTL = sprite._tintTL;
         var tintTR = sprite._tintTR;
         var tintBL = sprite._tintBL;
@@ -1062,7 +1062,7 @@ var TextureTintPipeline = new Class({
             vertexViewF32[vertexOffset + 1] = ty;
             vertexViewF32[vertexOffset + 2] = uvs[index + 0];
             vertexViewF32[vertexOffset + 3] = uvs[index + 1];
-            vertexViewU32[vertexOffset + 4] = getTint(colors[index0], alphas[index0]);
+            vertexViewU32[vertexOffset + 4] = getTint(colors[index0], camera.alpha * alphas[index0]);
 
             vertexOffset += 5;
             index0 += 1;
@@ -1116,7 +1116,7 @@ var TextureTintPipeline = new Class({
         var lineHeight = fontData.lineHeight;
         var scale = (bitmapText.fontSize / fontData.size);
         var chars = fontData.chars;
-        var alpha = bitmapText.alpha;
+        var alpha = camera.alpha * bitmapText.alpha;
         var vTintTL = getTint(bitmapText._tintTL, alpha);
         var vTintTR = getTint(bitmapText._tintTR, alpha);
         var vTintBL = getTint(bitmapText._tintBL, alpha);
@@ -1393,7 +1393,7 @@ var TextureTintPipeline = new Class({
         var lineHeight = fontData.lineHeight;
         var scale = (bitmapText.fontSize / fontData.size);
         var chars = fontData.chars;
-        var alpha = bitmapText.alpha;
+        var alpha = camera.alpha * bitmapText.alpha;
         var vTintTL = getTint(bitmapText._tintTL, alpha);
         var vTintTR = getTint(bitmapText._tintTR, alpha);
         var vTintBL = getTint(bitmapText._tintBL, alpha);
@@ -1724,10 +1724,10 @@ var TextureTintPipeline = new Class({
             text.scrollFactorX, text.scrollFactorY,
             text.displayOriginX, text.displayOriginY,
             0, 0, text.canvasTexture.width, text.canvasTexture.height,
-            getTint(text._tintTL, text._alphaTL),
-            getTint(text._tintTR, text._alphaTR),
-            getTint(text._tintBL, text._alphaBL),
-            getTint(text._tintBR, text._alphaBR),
+            getTint(text._tintTL, camera.alpha * text._alphaTL),
+            getTint(text._tintTR, camera.alpha * text._alphaTR),
+            getTint(text._tintBL, camera.alpha * text._alphaBL),
+            getTint(text._tintBR, camera.alpha * text._alphaBR),
             0, 0,
             camera,
             parentTransformMatrix
@@ -1752,7 +1752,7 @@ var TextureTintPipeline = new Class({
         var tileset = tilemapLayer.tileset;
         var scrollFactorX = tilemapLayer.scrollFactorX;
         var scrollFactorY = tilemapLayer.scrollFactorY;
-        var alpha = tilemapLayer.alpha;
+        var alpha = camera.alpha * tilemapLayer.alpha;
         var x = tilemapLayer.x;
         var y = tilemapLayer.y;
         var sx = tilemapLayer.scaleX;
@@ -1818,10 +1818,10 @@ var TextureTintPipeline = new Class({
             tileSprite.scrollFactorX, tileSprite.scrollFactorY,
             tileSprite.originX * tileSprite.width, tileSprite.originY * tileSprite.height,
             0, 0, tileSprite.width, tileSprite.height,
-            getTint(tileSprite._tintTL, tileSprite._alphaTL),
-            getTint(tileSprite._tintTR, tileSprite._alphaTR),
-            getTint(tileSprite._tintBL, tileSprite._alphaBL),
-            getTint(tileSprite._tintBR, tileSprite._alphaBR),
+            getTint(tileSprite._tintTL, camera.alpha * tileSprite._alphaTL),
+            getTint(tileSprite._tintTR, camera.alpha * tileSprite._alphaTR),
+            getTint(tileSprite._tintBL, camera.alpha * tileSprite._alphaBL),
+            getTint(tileSprite._tintBR, camera.alpha * tileSprite._alphaBR),
             (tileSprite.tilePositionX % tileSprite.frame.width) / tileSprite.frame.width,
             (tileSprite.tilePositionY % tileSprite.frame.height) / tileSprite.frame.height,
             camera,

src/tilemaps/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js

@@ -67,7 +67,7 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
             ctx.scale(tile.flipX ? -1 : 1, tile.flipY ? -1 : 1);
         }
 
-        ctx.globalAlpha = src.alpha * tile.alpha;
+        ctx.globalAlpha = camera.alpha * src.alpha * tile.alpha;
 
         ctx.drawImage(
             image,

src/tilemaps/staticlayer/StaticTilemapLayer.js

@@ -281,7 +281,7 @@ var StaticTilemapLayer = new Class({
                         var ty2 = tyh;
                         var tx3 = txw;
                         var ty3 = ty;
-                        var tint = Utils.getTintAppendFloatAlpha(0xffffff, this.alpha * tile.alpha);
+                        var tint = Utils.getTintAppendFloatAlpha(0xffffff, camera.alpha * this.alpha * tile.alpha);
 
                         vertexViewF32[voffset + 0] = tx0;
                         vertexViewF32[voffset + 1] = ty0;

src/tilemaps/staticlayer/StaticTilemapLayerCanvasRenderer.js

@@ -42,7 +42,7 @@ var StaticTilemapLayerCanvasRenderer = function (renderer, src, interpolationPer
     ctx.rotate(src.rotation);
     ctx.scale(src.scaleX, src.scaleY);
     ctx.scale(src.flipX ? -1 : 1, src.flipY ? -1 : 1);
-    ctx.globalAlpha = src.alpha;
+    ctx.globalAlpha = camera.alpha * src.alpha;
 
     for (var index = 0; index < tileCount; ++index)
     {