2D Sprite Affine Transformations

This video takes a simple look at using transformation matrices to transform 2D sprites with rotation, translation, scaling and shearing.

Twitter: @javidx9
Twitch: javidx9

[subDimensionUK]

It's funny, I've been slowly developing my own little game engine over the last few months. I think this is now the 3rd time I've hit a wall with a feature, and then found one of your videos explaining very clearly where I went wrong.

This time around, I was really pleased with myself that I'd been able to apply a bunch of matrix math that I'd learnt from your 3d engine videos. It was one of those lovely shower thoughts "Hold on, if I want to rotate a 2d sprite, surely I can just use a 3x3 matrix just like the 4x4 ones I was fiddling with for cameras".

And it worked!

And then I had holes.

And I left it for a while and did some other stuff, came back to it and there's another OLC video explaining exactly what I needed to do!

I'm slowly working my way through your back catalogue of hits, and I thought now was as good a time as any to let you know that even 4 years later, your hard work is still paying off. Thank you :)

[fuzzycat]

I've always wondered how sprites get rotated without the holes! This is enlightening :)

[piratux]

The topic seemed easy, until I saw missing pixels when rotation happened, but I loved the explanation of the solution. Amazing video!

[diconicabastion]

Nice video on that method.
The way I used to do it back when I was making games on dos was the basic rasterization method. Get the 4 corners break the shape into triangles start at the left edge and of the resulting shape and work across to the right edge. It means you only end up needing to calculate the pixels that are part of the sprite rather than all the one's in an over sized bounding box.
Of course when opengl and directx came along you could make a face or surface of an object and just rotate that in orthogonal view.

[kubanizioek]

I discovered your channel few days ago. Your console engine is incredible. Great content!
I love it

[ryanslikesocool]

Thank you for this video! I've been using matrices in code for a while now, but was never able to read/understand matrix notation until now.

[jockinafrock]

Another fab video, javidx9. Following along, I've been able to get the program working fine (although I have to admit the matrices have flown over my head). I especially like the way you extracted all the math and wrapped it into the extension.


I'm thinking I'll go back to the start of your videos and work through them all again, one at a time until I fully understand every one. I love the way you've built upon previous ones to get where we are now. Keep going!

[julienmorris]

You're awesome. Very clear explanation - and instant results.

[kamaladdinahmadzada]

i really like your channel really appreciate every video which you are making for Youtube ! Thank you ! these videos are pure gold thanks

[tomkirbygreen]

Awesome video as always. Looking forward to the JAM.

[strangeanimations]

Your channel is a gem of information! Thank you so so much :D

[andrewc]

Thanks so much for the videos Javid you are the best!

[mariovelez]

This is actually super cool! I'm using this idea to create texture mapping for an image, to draw it given 4 coordinated for the corners in Java

[raoul]

nice i like this one ;-) i like the fact than a sprites its just a 2d pixel array in olcEngine
we can do what we want with this simple idea

[XanCraft]

Hello, i got a tip for anyone who wants to do this using a different library and manual grabbing data from an image array. You have to limit the nx value to be within the width of the image. Otherwise the image will repeat horizontally.

[zleapingbear]

I really like this one...
As for shering, its great for isometric art style (vertikal Wall Are basicly shered squares)

[Kaltinril]

One way to use sheer transform would be to make grass look like it's waving in the wind.

[JinTsen]

At 5:36 you say show to scale after the offset. But wouldn't that then whenever you scale it, increase the offset and hence move it around the screen?

[VanillaMidgetSSBM]

Since the SNES Mode 7 is done using a hardware accelerated affine transformation you could in theory perform a much faster version of your Mode 7 demonstration from back in the OLC Console Game engine days using this

[gabrielferrer]

Hey Javid. Amazing channel! You are an incredible teacher.
When scaling you didn't talk about bicubic/bilinear interpolation.
It'd be great if you talk about it.
Thanks!