Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-09-20 14:31:55 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed a bug in the WebGL and Canvas Renderers where a Sprite with a flipX or flipY value set would render the offset frames slightly out of place, causing the animation to appear jittery. Also, the sprite would be out of place by its origin. Fix #4636 #3813

Browse source
This commit is contained in:
Richard Davey 2019-07-03 11:11:25 +01:00
parent 1b275c54ed
commit 47b1d755a7
3 changed files with 51 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -76,6 +76,7 @@
* The `Arc / Circle` Game Object wasn't rendering centered correctly in WebGL due to an issue in a previous size related commit, it would be half a radius off. Fix #4620 (thanks @CipSoft-Components @rexrainbow)
* Destroying a Scene in HEADLESS mode would throw an error as it tried to access the gl renderer in the Camera class. Fix #4467 (thanks @AndreaBoeAbrahamsen @samme)
* `Tilemap.createFromObjects` would ignore the `scene` argument passed in to the method. It's now used (thanks @samme)
* Fixed a bug in the WebGL and Canvas Renderers where a Sprite with a `flipX` or `flipY` value set would render the offset frames slightly out of place, causing the animation to appear jittery. Also, the sprite would be out of place by its origin. Fix #4636 #3813 (thanks @jronn @B3L7)
### Examples, Documentation and TypeScript

40
src/renderer/canvas/CanvasRenderer.js
View file

@ -659,12 +659,12 @@ var CanvasRenderer = new Class({
var frameHeight = frame.cutHeight;
var res = frame.source.resolution;
var x = -sprite.displayOriginX + frame.x;
var y = -sprite.displayOriginY + frame.y;
var displayOriginX = sprite.displayOriginX;
var displayOriginY = sprite.displayOriginY;
var x = -displayOriginX + frame.x;
var y = -displayOriginY + frame.y;
var fx = (sprite.flipX) ? -1 : 1;
var fy = (sprite.flipY) ? -1 : 1;
if (sprite.isCropped)
{
var crop = sprite._crop;
@ -680,10 +680,10 @@ var CanvasRenderer = new Class({
frameX = crop.cx;
frameY = crop.cy;
x = -sprite.displayOriginX + crop.x;
y = -sprite.displayOriginY + crop.y;
x = -displayOriginX + crop.x;
y = -displayOriginY + crop.y;
if (fx === -1)
if (sprite.flipX)
{
if (x >= 0)
{
@ -695,7 +695,7 @@ var CanvasRenderer = new Class({
}
}
if (fy === -1)
if (sprite.flipY)
{
if (y >= 0)
{
@ -708,7 +708,25 @@ var CanvasRenderer = new Class({
}
}
spriteMatrix.applyITRS(sprite.x, sprite.y, sprite.rotation, sprite.scaleX, sprite.scaleY);
var flipX = 1;
var flipY = 1;
if (sprite.flipX)
{
x += (-frame.realWidth + (displayOriginX * 2));
flipX = -1;
}
// Auto-invert the flipY if this is coming from a GLTexture
if (sprite.flipY)
{
y += (-frame.realHeight + (displayOriginY * 2));
flipY = -1;
}
spriteMatrix.applyITRS(sprite.x, sprite.y, sprite.rotation, sprite.scaleX * flipX, sprite.scaleY * flipY);
camMatrix.copyFrom(camera.matrix);
@ -737,8 +755,6 @@ var CanvasRenderer = new Class({
calcMatrix.setToContext(ctx);
ctx.scale(fx, fy);
ctx.globalCompositeOperation = this.blendModes[sprite.blendMode];
ctx.globalAlpha = alpha;

38
src/renderer/webgl/pipelines/TextureTintPipeline.js
View file

@ -534,8 +534,11 @@ var TextureTintPipeline = new Class({
var frameWidth = frame.cutWidth;
var frameHeight = frame.cutHeight;
var x = -sprite.displayOriginX + frameX;
var y = -sprite.displayOriginY + frameY;
var displayOriginX = sprite.displayOriginX;
var displayOriginY = sprite.displayOriginY;
var x = -displayOriginX + frameX;
var y = -displayOriginY + frameY;
if (sprite.isCropped)
{
@ -557,29 +560,29 @@ var TextureTintPipeline = new Class({
frameX = crop.x;
frameY = crop.y;
x = -sprite.displayOriginX + frameX;
y = -sprite.displayOriginY + frameY;
x = -displayOriginX + frameX;
y = -displayOriginY + frameY;
}
var flipX = 1;
var flipY = 1;
if (sprite.flipX)
{
x += frameWidth;
frameWidth *= -1;
x += (-frame.realWidth + (displayOriginX * 2));
flipX = -1;
}
// Invert the flipY if this is coming from a GLTexture
var flipY = sprite.flipY ^ ((frame.source.isGLTexture && !texture.flipY) ? 1 : 0);
if (flipY)
// Auto-invert the flipY if this is coming from a GLTexture
if (sprite.flipY || (frame.source.isGLTexture && !texture.flipY))
{
y += frameHeight;
frameHeight *= -1;
y += (-frame.realHeight + (displayOriginY * 2));
flipY = -1;
}
var xw = x + frameWidth;
var yh = y + frameHeight;
spriteMatrix.applyITRS(sprite.x, sprite.y, sprite.rotation, sprite.scaleX, sprite.scaleY);
spriteMatrix.applyITRS(sprite.x, sprite.y, sprite.rotation, sprite.scaleX * flipX, sprite.scaleY * flipY);
camMatrix.copyFrom(camera.matrix);
@ -604,6 +607,9 @@ var TextureTintPipeline = new Class({
camMatrix.multiply(spriteMatrix, calcMatrix);
}
var xw = x + frameWidth;
var yh = y + frameHeight;
var tx0 = calcMatrix.getX(x, y);
var ty0 = calcMatrix.getY(x, y);