Added roundPixels support for the Canvas renderer

This commit is contained in:
Richard Davey 2018-02-28 22:32:59 +00:00
parent 252a76f416
commit 2c10ac328c
3 changed files with 42 additions and 6 deletions

View file

@ -88,7 +88,8 @@ var CanvasRenderer = new Class({
pixelArt: game.config.pixelArt,
backgroundColor: game.config.backgroundColor,
resolution: game.config.resolution,
autoResize: game.config.autoResize
autoResize: game.config.autoResize,
roundPixels: game.config.roundPixels
};
/**
@ -134,7 +135,7 @@ var CanvasRenderer = new Class({
* @type {function}
* @since 3.0.0
*/
this.drawImage = DrawImage;
this.drawImage = DrawImage(this.config.roundPixels);
/**
* [description]
@ -143,7 +144,7 @@ var CanvasRenderer = new Class({
* @type {function}
* @since 3.0.0
*/
this.blitImage = BlitImage;
this.blitImage = BlitImage(this.config.roundPixels);
/**
* [description]

View file

@ -4,6 +4,8 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var roundPixels = false;
/**
* No scaling, anchor, rotation or effects, literally draws the frame directly to the canvas.
*
@ -19,6 +21,12 @@ var BlitImage = function (dx, dy, frame)
var ctx = this.currentContext;
var cd = frame.canvasData;
if (roundPixels)
{
dx |= 0;
dy |= 0;
}
ctx.drawImage(
frame.source.image,
cd.sx,
@ -32,4 +40,11 @@ var BlitImage = function (dx, dy, frame)
);
};
module.exports = BlitImage;
// Special return so we can store the config value locally
module.exports = function (configRoundPixels)
{
roundPixels = configRoundPixels;
return BlitImage;
};

View file

@ -4,6 +4,8 @@
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
*/
var roundPixels = false;
/**
* [description]
*
@ -70,11 +72,22 @@ var DrawImage = function (src, camera)
dy -= src.displayOriginY;
}
var tx = src.x - camera.scrollX * src.scrollFactorX;
var ty = src.y - camera.scrollY * src.scrollFactorY;
if (roundPixels)
{
tx |= 0;
ty |= 0;
dx |= 0;
dy |= 0;
}
// Perform Matrix ITRS
ctx.save();
ctx.translate(src.x - camera.scrollX * src.scrollFactorX, src.y - camera.scrollY * src.scrollFactorY);
ctx.translate(tx, ty);
ctx.rotate(src.rotation);
@ -86,4 +99,11 @@ var DrawImage = function (src, camera)
ctx.restore();
};
module.exports = DrawImage;
// Special return so we can store the config value locally
module.exports = function (configRoundPixels)
{
roundPixels = configRoundPixels;
return DrawImage;
};