I used TexturePacker to create an atlas for me and I've read it into my game. I can use unrotated and untrimmed sprites and it works fine. Now I would like to support trimmed sprites and I'm running into a conceptual issue.
I'm not sure how to do the untrimming. What do you do with the trim information?
My sprite is rendered as a quad with 4 vertices and 4 uv's.
Let's say the original sprite was:
size.width = 100;
size.height = 100;
Let's say that it exists in the atlas at:
location.x = 0;
location.y = 0;
location.width = 100;
location.height = 100;
To draw this untrimmed image, I do the following.
- Compute 4 vertices for the sprite. I use the height/width ratio to adjust the top right and bottom right vertices. That way the sprite's aspect ratio is what you would expect
- Compute 4 UV for the sprite. In the above case, if the atlas is 1024 pixels square, then the UVs would form a box between the points (0.0, 0.0) to (0.1, 0.1)
And this works fine. I can see an untrimmed image exactly as you would expect.
Enter trimming....
Let's say the original sprite was:
size.width = 100;
size.height = 100;
Let's say that it was trimmed in the atlas too:
trim.x = 5; // it was trimmed "in" from the left by 5 pixels
trim.y = 5; // it was trimmed "down" from the top by 5 pixels
trim.width = 15; // it was trimmed "in" from the right by 15 pixels
trim.height = 15; // it was trimmed "up" from the bottom by 15 pixels
So now the final location in the atlas is:
location.x = 0;
location.y = 0;
location.width = 80;
location.height = 80;
What I'm confused about is how to "untrim" the image when it is drawn. I tried:
- Moving the UV's by the amount that was trimmed. This resulted in a stretched image and in other tests, I saw parts of the adjacent sprites. You can't really move a UV.
- Moving the vertices by the amount that was trimmed. Some of my sprites are actually animations. This causes some frames to have different heights and widths -- sprite appears to "bounce". It's bounding box shifts around too with the trimming. (Currently, I have AABB's formed tightly around the vertices of the sprite -- which is what you would expect when the sprite is not trimmed.)
I clearly am missing the concept here. How does one "untrim" the sprite during a render? (I'm using OpenGL) Am I supposed to move around the vertices, but not the bounding box?