2D Sprite Affine Transformations
Вставка
- Опубліковано 28 тра 2024
- This video takes a simple look at using transformation matrices to transform 2D sprites with rotation, translation, scaling and shearing.
Source: github.com/OneLoneCoder/Javid...
/ discord
Blog: www.onelonecoder.com
Twitter: @javidx9
Twitch: javidx9
Patreon: / javidx9 - Наука та технологія
Dont forget the OLC CODEJAM 2018 - Theme announced 16th November 20:00 GMT - see here for more information: itch.io/jam/olc-codejam-2018
ua-cam.com/video/iRZiQmKlaaU/v-deo.html
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 :)
Cheers buddy! It's always a good feeling when the principles you've learned are applied and do what you expect. Good luck with your project!
I've always wondered how sprites get rotated without the holes! This is enlightening :)
Oh good FuzzyCat, I'm pleased you got something from it!
The topic seemed easy, until I saw missing pixels when rotation happened, but I loved the explanation of the solution. Amazing video!
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.
I do say, a fine transformation!
ba boom tish! Cheers Mike!
I discovered your channel few days ago. Your console engine is incredible. Great content!
I love it
Hey thanks Kuba, welcome to our secret community XD - yeah the console is a great platform for experimenting and prototyping.
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!
Hey Jock, Cheers! Yeah matrices can be a bit of a pain if you have not seen them before. I dont do anything advanced with matrices, so just think of them as the coefficients in a set of equations.
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.
i really like your channel really appreciate every video which you are making for UA-cam ! Thank you ! these videos are pure gold thanks
Hey thanks Kamaladdin, thats really pleasing to hear and I appreciate it!
You're awesome. Very clear explanation - and instant results.
Hey thanks Julien - much appreciated!
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
Awesome video as always. Looking forward to the JAM.
Cheers Tom, lol, I've been busy this week, Jam is over now!
Thanks so much for the videos Javid you are the best!
Hey my pleasure Andrew!
Your channel is a gem of information! Thank you so so much :D
One way to use sheer transform would be to make grass look like it's waving in the wind.
You are the best teacher ever!!
lol, thanks, maybe not best ever, but I try! :D
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
Hey thanks raol, oh just whilst I got you, Ive changed the PGEX_Graphics.h file. Rotations now go the other way, so you'll need to invert them if you are using them. Sorry about that, I found an inconsistency in the maths but fixed it.
@@javidx9 oh thanks because i've a huge bug when i apply horizontal flip
Your videos are awesome and you're awesome!
Aww thanks William, you're awesome too!
I really like this one...
As for shering, its great for isometric art style (vertikal Wall Are basicly shered squares)
Good point, I hadnt considered sheering for isometry. Got me thinking now XD
@@javidx9 thats where the danger is....
I just started using it muself for the same... But I am holding back till after the Jam :)
@@javidx9 maybe that's an idea for another extension? You could arrange it so that you use the same code for different view styles: top-down, isometric, perspective, just by swapping out an extension-or even change it on the fly ;-)
Sounds great, but in reality, if you create an isometric game, you want premade graphics. Usually the only things you do rotation and the like on are characters, like a player's vehicle for example. I can't think of a practical use for shearing except maybe special effects, which would be rare. Or perhaps an editor where you make your own graphics.
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!
Hi and thanks Gabriel! Yeah, I didnt mention interpolation. The PGE supports it too! As part of my Top Down Car Crime series, I will be looking at interpolation to filter the textures, so its coming! :D
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
Awesome explanations as always. Javid, is the technique you used to prevent the "holes" called inverse texture mapping? Can you point me to a computer graphics book or other resource so that I can investigate it further? Thanks!!!!
I was about to try and write a program using PGE that involved sprite transformations, and then you just went ahead and made an extension that already does it :P
David I travelled over London again this Weekend.
Took off yesterday.
Next time up around, I would like to let you know so that an Ale would suit meeting us up and interchanging opinions about game dev.
Greetings.
lol, Daniel, you should come and exchange opinions about game dev on the discord server!
@@javidx9 rofl
Wowzers Javid!
Hey thanks Jakarian Studios!
Hey javid, the pixel engine is coming along nicely. An idea for the future could be implementing software based shaders. I'm not expecting anything crazy, but it could be a cool idea to mess around with.
Hi Xenthera, cheers buddy! It "kinda" does already :D You can set a lambda function as the pixel blending mode where you can modify how things get drawn. Ive not pushed it in a video yet, but its on the github.
@@javidx9 Oh nice! I bet with some clever programming you could achieve some interesting things! I'll have to mess around with it when i'm better at C++ lol
Something I'm wondering about is if you'll ever work over converting previous projects to a form more efficient for the graphics card/cpu/etc
I like learning the concepts behind things, but I'd also like to know methods for simplifying it and making it efficient in a more advanced followup video
Hi Kavukamari, potentially yes, but this then requires doing things a specific way. On the whole so far ive avoide being API dependent for the videos.
brilliant
Cheers!
As I understand perspective transformation like in Photoshop makes in other way?
Niceee video :)
Thanks Wilfry!
Nice! :D
Thanks Jacob! Yeah, a nice simple one this time.
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?
Hi Jin, in the demosntration, i do offset the sprite first so the origin is in the middle of the sprite (not its top left corner), this way when i scale, the offset remains in the middle, allowing me to rotate it around the centre point.
Imagine being able to do all this without the inverse matrix... Haven't found a way yet, but I am looking for it!
Translate(matA, -sprCar->width / 2, -sprCar->height / 2);
Hey, i was wondering if you could create a tutorial for lua and c++ game development. Thanks in advance.
Yes! Yes I will. Im working on a game project right now that fuses C++ and Lua. My videos are currently two months behind my projects, but ill see what can do to bring it forward.
@@javidx9 Thanks ! That sounds great.
Hi javid, please make tutorial build game engine like stronghold game(i have no idea to handling many object > 10^10, to slow if i call update every object in same time) thanks
boring
Hi Rizal, I think the topic of managing large numbers of agents is quite interesting. I'll try and think of a way to demonstrate it thats accesible and fun. Typically you would "batch" objects and only update subsets of them per frame.
from which lib comes SetPixelMode ?
How about you make a follow-up video where instead of transforming every single pixel you'd calculate the corner vertices of the drawable area in texture space, clip it, and iterate over the texture using fixed point math.
My 90's coder instincts are screaming at the thought of all those cycles wasted on multiplication...
I did contemplate doing a cost analysis verses my software texture renderer form the 3D graphics series. I didnt for this video, but I think I will, though Im unconvinced. A system like that has potentially more branching. This approach, although uses a lot of macs for sure, I could stream that through SSE perhaps. I dunno - I know this is not optimal, its never intended to be, but so long as people get the idea I'm happy to leave it where it is. I probably will follow this up with anti-aliasing though.
@@javidx9 if you're thinking of doing a bilinear filter it can be rather elegantly implemented if you're already doing an FP sampling loop.
Same here! My mind was jumping to the fixed point maths and sampling techniques. Good to have an explicit "I'm not optimising" disclaimer in these parts to keep me sane. *Great* video. Now I'm going to rewrite this for a very old machine indeed. :)
Its a tough call. I like to create videos that explain the ideas and concepts behind a thing, particularly as im trying to show these things are not as complex as they seem, but the embedded systems developer in me is screaming to optimise it all 😂
@@javidx9 is the lack of anti-aliasing the reason the sprite jitters at 27:06?
can you tell me what is your compiler???????? because my mingw compiler can't run this code because of the thread, it don't support c++11
I use visual studio 17. In code blocks you can specify being C++14 as part of your build options. It should work then.
@@javidx9 it say to me thread Is not a member of std. My compiler is mingw.
@@theanimatingdinoyt79 I have the most recent standard C::B and it compiles just fine, maybe you need to upgrade?
@@javidx9 I mean the mingw compiler
You could at least define a more general definition for matrices and a more general method for multiplying them. That's what I did. What for? Finding the roots of a polynomial equation, for instance. I have even overloaded the multiplication operator * which I know full well is syntactic sugar, and outlined a QR function based on Householder matrix reflections.
can not get image to show any advice?
Not a lot to go on here... is it looking in the correct location for an image png file?
Codejam?
Hey Cameron, check it out! itch.io/jam/olc-codejam-2018
why not using Unity?
This channel is about understanding how things like Unity actually work on the inside by creating your own little things from scratch.
Unity is a valid tool, and its quick and (relatively) easy to work with. If what you want is just the result, then Unity is fine. If you want to understand how the result was obtained then learning about fundamentals is quite important. Especially when you want to do that one thing unity can't do.
yo,make minecraft :'D but for real..
Cubes? Really? :D
@@javidx9 simply enough xD and pretty..
everything is fine, backprojection resampling is explained very well, but the code is written in a veeery slow manner, 2D matrix access...painfully slow
FIRST
smh...