[as3] TexturePacker Trim Settings Issues

[evilbert103]

I've been playing with a Spine animation that runs the frame swapping for a sprite sheet animation. In Spine, the animation runs smoothly changing frames cleanly, but when run in AS3 code the image jumps along the X and Y axis on different frames. I've repackaged an example for you showcasing the issue. Meteor.spine contains one skeleton animation. I have provided two different TexturePacker projects to show why I believe the issue lies in the frame offset values. Meteor_texturePacker.tps exports an atlas that trims out empty alpha space from the frames of the animation, Meteor_texturePacker_noTrim.tps prevents this trimming leaving each image its original size. When you run the noTrim version the animation looks correct, when you run the trim version the meteor jumps as the frames change.

*Note that I apply a 0.25 scale to the skeletonJson when building the skeleton...

Meteor.zip

[evilbert103]

FYI I was able to correct the issue with this ugly code. This certainly wouldn't run as quickly but perhaps it will help you find a better solution. Basically the problem was that when the texture is trimmed unevenly the pivot point is shifted away from 0,0...

public function updateOffset() : void {
	var regionScaleX : Number = width / regionOriginalWidth * scaleX;
	var regionScaleY : Number = height / regionOriginalHeight * scaleY;
	var localX : Number = -width * 0.5 * scaleX + regionOffsetX * regionScaleX;
	var localY : Number = -height * 0.5 * scaleY + regionOffsetY * regionScaleY;
	var localX2 : Number = localX + regionWidth * regionScaleX;
	var localY2 : Number = localY + regionHeight * regionScaleY;
			
	var radians : Number = rotation * Math.PI / 180;
	var ULDist:Number = Math.sqrt(localX * localX + localY * localY);
	var ULAngle:Number = Math.atan2(localY, localX);
	var URDist:Number = Math.sqrt(localX2 * localX2 + localY * localY);
	var URAngle:Number = Math.atan2(localY, localX2);
	var BLDist:Number = Math.sqrt(localX * localX + localY2 * localY2);
	var BLAngle:Number = Math.atan2(localY2, localX);
	var BRDist:Number = Math.sqrt(localX2 * localX2 + localY2 * localY2);
	var BRAngle:Number = Math.atan2(localY2, localX2);
			
	offset[BLX] = Math.cos(radians - BLAngle) * BLDist + x;
	offset[BLY] = Math.sin(radians - BLAngle) * BLDist + y;
	offset[ULX] = Math.cos(radians - ULAngle) * ULDist + x;
	offset[ULY] = Math.sin(radians - ULAngle) * ULDist + y;
	offset[URX] = Math.cos(radians - URAngle) * URDist + x;
	offset[URY] = Math.sin(radians - URAngle) * URDist + y;
	offset[BRX] = Math.cos(radians - BRAngle) * BRDist + x;
	offset[BRY] = Math.sin(radians - BRAngle) * BRDist + y;
}

[badlogic]

That's actually a pretty good solution! It works for both the Spine and TexturePacker regions, including the Spine trimming. I wouldn't be concerned about performance to much, this method is only used when regions are loaded from JSON. I've merged this manually with some touch ups. Thanks!