Texture packer, trimmed sprites and positioning

Mr_T · September 28, 2020, 10:41am

Hello,

I’m using texture packer for atlases using Json Array as export format.The problem:

mole_hit_pivot

The mole bounces around instead of sticking in place.

I’ve tried all combinations of settings in TP but it yields the same result more or less. The setting that should have all necessary info for proper rendering is “trim”. Looking at the produced json, it seems as perhaps you fail to take into the account the x and y of the spriteSourceSize (see json below)?

Is there a proper way to use TP to trim away transparent pixels while retaining the relative position in each frame, in PlayCanvas at this point? And if so what are the recommended TP settings?

{
	"filename": "Mole_hit_00001.png",
	"frame": {"x":1560,"y":220,"w":106,"h":102},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":42,"y":73,"w":106,"h":102},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00003.png",
	"frame": {"x":804,"y":1,"w":158,"h":156},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":17,"y":19,"w":158,"h":156},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00005.png",
	"frame": {"x":628,"y":1,"w":174,"h":180},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":7,"y":12,"w":174,"h":180},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00007.png",
	"frame": {"x":1367,"y":1840,"w":179,"h":182},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":4,"y":10,"w":179,"h":182},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00009.png",
	"frame": {"x":417,"y":213,"w":179,"h":181},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":3,"y":11,"w":179,"h":181},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00011.png",
	"frame": {"x":598,"y":213,"w":178,"h":180},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":4,"y":12,"w":178,"h":180},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00013.png",
	"frame": {"x":1034,"y":1870,"w":176,"h":163},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":5,"y":29,"w":176,"h":163},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00015.png",
	"frame": {"x":1207,"y":441,"w":113,"h":114},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":38,"y":78,"w":113,"h":114},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00017.png",
	"frame": {"x":1218,"y":919,"w":114,"h":113},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":37,"y":79,"w":114,"h":113},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00018.png",
	"frame": {"x":1542,"y":111,"w":113,"h":107},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":38,"y":85,"w":113,"h":107},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},
{
	"filename": "Mole_hit_00019.png",
	"frame": {"x":1845,"y":98,"w":106,"h":89},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":42,"y":86,"w":106,"h":89},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},

yaustar · September 28, 2020, 10:45am

Sounds like you will need to edit the pivot point of each frame in TP or the PlayCanvas Sprite Editor so that it’s in the same spot of the sprite each frame.

If you are still having issues, is it possible to share the sprite sheet/atlas?

Mr_T · September 28, 2020, 12:06pm

The pivots are already defined and correct.Smack in the middle:

All the source images in this animation are 192x192. But get trimmed to various rect sizes in the atlas.

I’ve tried all possible trim modes in TP:

Trim yields this:

{
	"filename": "Mole_hit_00017.png",
	"frame": {"x":1713,"y":193,"w":114,"h":113},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":37,"y":79,"w":114,"h":113},
	"sourceSize": {"w":192,"h":192},
	"pivot": {"x":0.5,"y":0.5}
},

Ie, correct pivot point with regards to the sourceSize. spriteSourceSize gives extra info about where the sprite rect should be offset with regards to sourceSize, which PlayCanvas doesnt seem to care about:

PlayCanvas will put the pivot in the middle of the rect in the atlas, regardless of what source size is or the sprite rects position within the source rect.
That’s fine, I suppose. TP warns that not all engines support Trim mode. Would be nice, though.

So let’s try other options then.

Crop, flush position:

{
	"filename": "Mole_hit_00017.png",
	"frame": {"x":1713,"y":193,"w":114,"h":113},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":114,"h":113},
	"sourceSize": {"w":114,"h":113},
	"pivot": {"x":0.5,"y":0.5}
},

Does what it says. Relative position info is discarded and renders this mode fairly useless imo, as the pivot position loses its relation to the sprite. At least that’s not useful for my use-case.

Crop, Keep position:

{
	"filename": "Mole_hit_00017.png",
	"frame": {"x":1713,"y":193,"w":114,"h":113},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":37,"y":79,"w":114,"h":113},
	"sourceSize": {"w":114,"h":113},
	"pivot": {"x":0.517544,"y":0.150442}
},

Now this part had be confused for a bit until i dragged it into photoshop and did some measurements. Turns out, the x/y in spriteSourceSize is from the upper left corner. The pivot is from the top left of the sprite rect within the source image. Like this:

Hope that makes sense. Meanwhile, in PlayCanvas, this is the result I get:

I will agree that having the origin in top-left is a silly standard. But it’s clear to me that PlayCanvas isn’t using the data correctly. Hopefully you will agree.

Best regards.

yaustar · September 28, 2020, 12:27pm

Are you able to share a project with just that animation for us to talk a look at please? It be good to have a test asset that we know we can reproduce the issue with.

Mr_T · September 28, 2020, 12:34pm

It’s a private project using proprietary assets. But I could always make a new public project and drag in some CC0 assets, if you’re not feeling up to it.

Meanwhile, I’m fairly sure that negating the pivot y-coord will fix at least the latter case.

yaustar · September 28, 2020, 12:43pm

Nah, it’s fine. It would have been great to have a test asset ready to go but appreciate that it’s not sharable.

Mr_T · September 28, 2020, 12:49pm

Sent you a PM with link

yaustar · September 28, 2020, 12:57pm

Created bug report so we don’t lose track of this: https://github.com/playcanvas/editor/issues/165

Mr_T · October 26, 2020, 11:44am

Would be really nice if you could flip that y some day Or else I’m going to have to write a tool for it. Not doing that manually for 100s of frames

yaustar · October 26, 2020, 12:00pm

Sorry, no-one has had a chance to look at this yet. I recently found that we have a exporter for Texture Packer and wondering if it be used to flip the Y?

Mr_T · October 26, 2020, 12:30pm

It didnt work initially, but it got me digging through the TP docs on custom exporters. If I add this to exporter.xml, and use “crop, keep position”, then it works!

<spriteOrigin>BottomLeft</spriteOrigin>

yaustar · October 26, 2020, 2:22pm

Might have to add that to our exporter

yaustar · November 2, 2020, 6:54pm

Finally got around to doing the PR