Resolution affecting camera display

This commit is contained in:
Felipe Alfonso 2018-02-12 16:03:13 -03:00
parent 8bce7ea7c9
commit 9b2741387b
6 changed files with 34 additions and 29 deletions

View file

@ -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);

View file

@ -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);
}

View file

@ -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)
{

View file

@ -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);

View file

@ -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;
var resolution = this.config.resolution;
this.width = width * res;
this.height = height * res;
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();
}

View file

@ -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)
{