Fixed Camera FX for scaled camera sizes

Author: photonstorm

CHANGELOG.md

@@ -12,6 +12,17 @@
 * `Camera.x` and `Camera.y` have been turned into getters / setters, mapped to the internal private values `_x` and `_y` respectively. This is so that setting the Camera viewport position directly will now update the new internal resolution calculation vars too.
 * `Camera.setScene` will now set the Cameras `resolution` property at the same time and update the internal viewport vars.
 
+### Game Config Resolution Specific Bug Fixes
+
+Setting the `resolution` property in the Game Config to a value other than 1 would cause various errors in the API. The following have been fixed:
+
+* The game canvas would be sized incorrectly, unless you had enabled auto resizing. It now scales the canvas to the size given, maintaining the resolution. Fix #3468 (thanks @Legomite)
+* Cameras with background colors set would display the filled color area at the wrong size. Camera fills now respect the resolution.
+* The Camera Fade Effect would display the fade fill rectangle at the wrong size. Camera fades now respect the resolution.
+* The Camera Flash Effect would display the fade fill rectangle at the wrong size. Camera flashes now respect the resolution.
+* The Camera Shake Effect would shake the Camera using the wrong width values. Camera Shakes now respect the resolution.
+* Input calculations would not factor in the Game Resolution correctly. If a Camera viewport was not at 0x0 or not the full size, or the Camera was rotated or zoomed, the input areas would be wrong if `resolution` was > 1. These are now factored in correctly and changing the resolution no longer breaks input. Fix #3606 (thanks @Secretmapper)
+
 ### Bug Fixes
 
 * If an AudioFile failed to load and throw an incomplete error, it would cause the console.log to crash JavaScript when trying to log the error. It now only logs the message if it exists. Fix #3830 (thanks @kelostrada)

src/cameras/2d/effects/Fade.js

@@ -337,7 +337,7 @@ var Fade = new Class({
         var camera = this.camera;
 
         ctx.fillStyle = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',' + this.alpha + ')';
-        ctx.fillRect(camera.x, camera.y, camera.width, camera.height);
+        ctx.fillRect(camera._cx, camera._cy, camera._cw, camera._ch);
 
         return true;
     },
@@ -367,7 +367,7 @@ var Fade = new Class({
 
         pipeline.batchFillRect(
             0, 0, 1, 1, 0,
-            camera.x, camera.y, camera.width, camera.height,
+            camera._cx, camera._cy, camera._cw, camera._ch,
             getTintFunction(red, green, blue, 1),
             this.alpha,
             1, 0, 0, 1, 0, 0,

src/cameras/2d/effects/Flash.js

@@ -284,7 +284,7 @@ var Flash = new Class({
         var camera = this.camera;
 
         ctx.fillStyle = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',' + this.alpha + ')';
-        ctx.fillRect(camera.x, camera.y, camera.width, camera.height);
+        ctx.fillRect(camera._cx, camera._cy, camera._cw, camera._ch);
 
         return true;
     },
@@ -314,7 +314,7 @@ var Flash = new Class({
 
         pipeline.batchFillRect(
             0, 0, 1, 1, 0,
-            camera.x, camera.y, camera.width, camera.height,
+            camera._cx, camera._cy, camera._cw, camera._ch,
             getTintFunction(red, green, blue, 1),
             this.alpha,
             1, 0, 0, 1, 0, 0,

src/cameras/2d/effects/Shake.js

@@ -261,8 +261,8 @@ var Shake = new Class({
         if (this._elapsed < this.duration)
         {
             var intensity = this.intensity;
-            var width = this.camera.width;
-            var height = this.camera.height;
+            var width = this.camera._cw;
+            var height = this.camera._ch;
             var zoom = this.camera.zoom;
 
             this._offsetX = (Math.random() * intensity.x * width * 2 - intensity.x * width) * zoom;

src/renderer/canvas/CanvasRenderer.js

@@ -380,15 +380,15 @@ var CanvasRenderer = new Class({
      */
     render: function (scene, children, interpolationPercentage, camera)
     {
-        var ctx = scene.sys.context;
-        var scissor = (camera.x !== 0 || camera.y !== 0 || camera.width !== ctx.canvas.width || camera.height !== ctx.canvas.height);
-        var list = children.list;
-
         var cx = camera._cx;
         var cy = camera._cy;
         var cw = camera._cw;
         var ch = camera._ch;
 
+        var ctx = scene.sys.context;
+        var scissor = (cx !== 0 || cy !== 0 || cw !== ctx.canvas.width || ch !== ctx.canvas.height);
+        var list = children.list;
+
         this.currentContext = ctx;
 
         //  If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)