Resolution affecting camera display

Author: bitnenfer

src/cameras/2d/Camera.js

@@ -836,7 +836,7 @@ var Camera = new Class({
      * @param {number} baseScale - [description]
      *
      */
-    preRender: function (baseScale)
+    preRender: function (baseScale, resolution)
     {
         var width = this.width;
         var height = this.height;
@@ -888,6 +888,7 @@ var Camera = new Class({
         }
 
         matrix.loadIdentity();
+        matrix.scale(resolution, resolution);
         matrix.translate(this.x + originX, this.y + originY);
         matrix.rotate(this.rotation);
         matrix.scale(zoom, zoom);

src/cameras/2d/CameraManager.js

@@ -381,7 +381,7 @@ var CameraManager = new Class({
         {
             var camera = cameras[i];
 
-            camera.preRender(baseScale);
+            camera.preRender(baseScale, renderer.config.resolution);
 
             renderer.render(this.scene, children, interpolation, camera);
         }

src/gameobjects/text/static/Text.js

@@ -907,6 +907,7 @@ var Text = new Class({
         var canvas = this.canvas;
         var context = this.context;
         var style = this.style;
+        var resolution = this.resolution;
         var size = style.metrics;
 
         style.syncFont(canvas, context);
@@ -940,8 +941,8 @@ var Text = new Class({
 
         this.updateDisplayOrigin();
 
-        w *= this.resolution;
-        h *= this.resolution;
+        w *= resolution;
+        h *= resolution;
 
         w = Math.max(w, 1);
         h = Math.max(h, 1);
@@ -958,6 +959,7 @@ var Text = new Class({
         }
 
         context.save();
+        //context.scale(resolution, resolution);
 
         if (style.backgroundColor)
         {

src/gameobjects/text/static/TextCanvasRenderer.js

@@ -28,6 +28,7 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
     }
 
     var ctx = renderer.currentContext;
+    var resolution = src.resolution;
 
     //  Blend Mode
     if (renderer.currentBlendMode !== src.blendMode)
@@ -52,6 +53,7 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
     var canvas = src.canvas;
 
     ctx.save();
+    //ctx.scale(1.0 / resolution, 1.0 / resolution);
     ctx.translate(src.x - camera.scrollX * src.scrollFactorX, src.y - camera.scrollY * src.scrollFactorY);
     ctx.rotate(src.rotation);
     ctx.scale(src.scaleX, src.scaleY);

src/renderer/canvas/CanvasRenderer.js

@@ -65,7 +65,7 @@ var CanvasRenderer = new Class({
          * @type {number}
          * @since 3.0.0
          */
-        this.width = game.config.width * game.config.resolution;
+        this.width = game.config.width;
 
         /**
          * [description]
@@ -74,16 +74,22 @@ var CanvasRenderer = new Class({
          * @type {number}
          * @since 3.0.0
          */
-        this.height = game.config.height * game.config.resolution;
+        this.height = game.config.height;
 
         /**
          * [description]
          *
-         * @name Phaser.Renderer.Canvas.CanvasRenderer#resolution
-         * @type {number}
+         * @name Phaser.Renderer.Canvas.CanvasRenderer#config
+         * @type {object}
          * @since 3.0.0
          */
-        this.resolution = game.config.resolution;
+        this.config = {
+            clearBeforeRender: game.config.clearBeforeRender,
+            pixelArt: game.config.pixelArt,
+            backgroundColor: game.config.backgroundColor,
+            resolution: game.config.resolution,
+            autoResize: game.config.autoResize
+        };
 
         /**
          * [description]
@@ -112,15 +118,6 @@ var CanvasRenderer = new Class({
          */
         this.gameContext = this.gameCanvas.getContext('2d');
 
-        /**
-         * [description]
-         *
-         * @name Phaser.Renderer.Canvas.CanvasRenderer#gameConfig
-         * @type {Phaser.Boot.Config}
-         * @since 3.0.0
-         */
-        this.gameConfig = game.config;
-
         /**
          * [description]
          *
@@ -242,18 +239,18 @@ var CanvasRenderer = new Class({
      */
     resize: function (width, height)
     {
-        var res = this.game.config.resolution;
-
-        this.width = width * res;
-        this.height = height * res;
+        var resolution = this.config.resolution;
 
+        this.width = width * resolution;
+        this.height = height * resolution;
+        
         this.gameCanvas.width = this.width;
         this.gameCanvas.height = this.height;
 
-        if (this.autoResize)
+        if (this.config.autoResize)
         {
-            this.gameCanvas.style.width = (this.width / res) + 'px';
-            this.gameCanvas.style.height = (this.height / res) + 'px';
+            this.gameCanvas.style.width = (this.width / resolution) + 'px';
+            this.gameCanvas.style.height = (this.height / resolution) + 'px';
         }
 
         //  Resizing a canvas will reset imageSmoothingEnabled (and probably other properties)
@@ -349,7 +346,7 @@ var CanvasRenderer = new Class({
     preRender: function ()
     {
         var ctx = this.gameContext;
-        var config = this.gameConfig;
+        var config = this.config;
 
         var width = this.width;
         var height = this.height;
@@ -384,6 +381,7 @@ var CanvasRenderer = new Class({
         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 resolution = this.config.resolution;
 
         this.currentContext = ctx;
 
@@ -415,7 +413,7 @@ var CanvasRenderer = new Class({
         {
             ctx.save();
             ctx.beginPath();
-            ctx.rect(camera.x, camera.y, camera.width, camera.height);
+            ctx.rect(camera.x * resolution, camera.y * resolution, camera.width * resolution, camera.height * resolution);
             ctx.clip();
         }
 

src/renderer/webgl/WebGLRenderer.js

@@ -430,7 +430,7 @@ var WebGLRenderer = new Class({
         this.canvas.width = this.width;
         this.canvas.height = this.height;
 
-        //if (this.config.autoResize)
+        if (this.config.autoResize)
         {
             this.canvas.style.width = (this.width / resolution) + 'px';
             this.canvas.style.height = (this.height / resolution) + 'px';
@@ -1217,7 +1217,9 @@ var WebGLRenderer = new Class({
      */
     preRenderCamera: function (camera)
     {
-        this.pushScissor(camera.x, camera.y, camera.width, camera.height);
+        var resolution = this.config.resolution;
+
+        this.pushScissor(camera.x * resolution, camera.y * resolution, camera.width * resolution, camera.height * resolution);
 
         if (camera.backgroundColor.alphaGL > 0)
         {