Animations with custom pivots, like those created in Texture Packer with the pivot option enabled, would be mis-aligned if flipped. They now render in the correct position, regardless of scale or flip on either axis. Fix phaserjs#4155

Author: photonstorm

CHANGELOG.md

@@ -79,6 +79,7 @@
 * 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)
+* Animations with custom pivots, like those created in Texture Packer with the pivot option enabled, would be mis-aligned if flipped. They now render in the correct position, regardless of scale or flip on either axis. Fix #4155 (thanks @Zax37)
 
 ### Examples, Documentation and TypeScript
 

src/renderer/canvas/CanvasRenderer.js

@@ -657,6 +657,8 @@ var CanvasRenderer = new Class({
         var frameY = cd.y;
         var frameWidth = frame.cutWidth;
         var frameHeight = frame.cutHeight;
+        var customPivot = frame.customPivot;
+
         var res = frame.source.resolution;
 
         var displayOriginX = sprite.displayOriginX;
@@ -713,15 +715,21 @@ var CanvasRenderer = new Class({
 
         if (sprite.flipX)
         {
-            x += (-frame.realWidth + (displayOriginX * 2));
+            if (!customPivot)
+            {
+                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));
+            if (!customPivot)
+            {
+                y += (-frame.realHeight + (displayOriginY * 2));
+            }
 
             flipY = -1;
         }

src/renderer/webgl/pipelines/TextureTintPipeline.js

@@ -533,6 +533,7 @@ var TextureTintPipeline = new Class({
         var frameY = frame.y;
         var frameWidth = frame.cutWidth;
         var frameHeight = frame.cutHeight;
+        var customPivot = frame.customPivot;
 
         var displayOriginX = sprite.displayOriginX;
         var displayOriginY = sprite.displayOriginY;
@@ -569,15 +570,21 @@ var TextureTintPipeline = new Class({
 
         if (sprite.flipX)
         {
-            x += (-frame.realWidth + (displayOriginX * 2));
+            if (!customPivot)
+            {
+                x += (-frame.realWidth + (displayOriginX * 2));
+            }
 
             flipX = -1;
         }
 
         //  Auto-invert the flipY if this is coming from a GLTexture
         if (sprite.flipY || (frame.source.isGLTexture && !texture.flipY))
         {
-            y += (-frame.realHeight + (displayOriginY * 2));
+            if (!customPivot)
+            {
+                y += (-frame.realHeight + (displayOriginY * 2));
+            }
 
             flipY = -1;
         }