# How to render a trimmed sprite?

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.

1. 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
2. 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?

What you have to do is roughly the following:

1. Pretend that your sprite has the original size in your game. This is important to keep animations aligned.