2D Sprite Affine Transformations

[@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

[@lucs0091]

kzbin.info/www/bejne/n4O9moSjgNGUl7c

[@fuzzycat3651]

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

[@javidx9]

Oh good FuzzyCat, I'm pleased you got something from it!

[@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 :)

[@javidx9]

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!

[@esoopthederp7672]

@@javidx9 I havent watched this video yet but given the above posters comment im hopeful it'll help me as well. Been trying to understand how the rotations in the game Rainworld work given that its purely based on 2d sprites, and that led me down a path of trying to learn rotational matrices

[@piratux2860]

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

[@diconicabastion5790]

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.

[@kubanizioek519]

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

[@javidx9]

Hey thanks Kuba, welcome to our secret community XD - yeah the console is a great platform for experimenting and prototyping.

[@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!

[@javidx9]

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.

[@julienmorris7051]

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

[@javidx9]

Hey thanks Julien - much appreciated!

[@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.

[@ihaveasticknmyi]

I do say, a fine transformation!

[@javidx9]

ba boom tish! Cheers Mike!

[@Kaltinril]

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

[@tomkirbygreen]

Awesome video as always. Looking forward to the JAM.

[@javidx9]

Cheers Tom, lol, I've been busy this week, Jam is over now!

[@kamaladdinahmadzada9965]

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

[@javidx9]

Hey thanks Kamaladdin, thats really pleasing to hear and I appreciate it!

[@XanCraft21]

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.

[@andrewc2876]

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

[@javidx9]

Hey my pleasure Andrew!

[@AndreeRacs]

You are the best teacher ever!!

[@javidx9]

lol, thanks, maybe not best ever, but I try! :D

[@zleapingbear]

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

[@javidx9]

Good point, I hadnt considered sheering for isometry. Got me thinking now XD

[@zleapingbear]

@@javidx9 thats where the danger is.... I just started using it muself for the same... But I am holding back till after the Jam :)

[@PhilBoswell]

@@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 ;-)

[@NeilRoy]

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.

[@raoul4246]

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

[@javidx9]

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.

[@raoul4246]

@@javidx9 oh thanks because i've a huge bug when i apply horizontal flip

[@mariovelez578]

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

[@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

[@gabrielferrer8061]

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!

[@javidx9]

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

[@strangeanimations2518]

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

[@BudgiePanic]

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

[@jhfoleiss]

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!!!!

[@Xenthera]

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.

[@javidx9]

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.

[@Xenthera]

@@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

[@Kavukamari]

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

[@javidx9]

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.

[@meampersandwill]

Your videos are awesome and you're awesome!

[@javidx9]

Aww thanks William, you're awesome too!

[@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?

[@javidx9]

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.

[@MagnumOpus-w2j]

As I understand perspective transformation like in Photoshop makes in other way?

[@peterjohnson9438]

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...

[@javidx9]

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.

[@peterjohnson9438]

@@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.

[@balorprice]

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. :)

[@javidx9]

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 😂

[@damjandjordjevic1994]

@@javidx9 is the lack of anti-aliasing the reason the sprite jitters at 27:06?

[@JakariaYT]

Wowzers Javid!

[@javidx9]

Hey thanks Jakarian Studios!

[@avvvqvvv99]

brilliant

[@javidx9]

Cheers!

[@TheRojo387]

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.

[@jivkorusev9562]

Hey, i was wondering if you could create a tutorial for lua and c++ game development. Thanks in advance.

[@javidx9]

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.

[@jivkorusev9562]

@@javidx9 Thanks ! That sounds great.

[@milevyo]

from which lib comes SetPixelMode ?

[@jakubsebek]

Nice! :D

[@javidx9]

Thanks Jacob! Yeah, a nice simple one this time.

[@GamerSaga]

can not get image to show any advice?

[@javidx9]

Not a lot to go on here... is it looking in the correct location for an image png file?

[@rizalabdurrahman8317]

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

[@jonathancosta7381]

boring

[@javidx9]

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.

[@theanimatingdinoyt79]

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

[@javidx9]

I use visual studio 17. In code blocks you can specify being C++14 as part of your build options. It should work then.

[@theanimatingdinoyt79]

@@javidx9 it say to me thread Is not a member of std. My compiler is mingw.

[@javidx9]

@@theanimatingdinoyt79 I have the most recent standard C::B and it compiles just fine, maybe you need to upgrade?

[@theanimatingdinoyt79]

@@javidx9 I mean the mingw compiler

[@MissNorington]

Imagine being able to do all this without the inverse matrix... Haven't found a way yet, but I am looking for it!

[@vibaj16]

I think it's possible by doing rotations with sheers. It sacrifices subpixel accuracy for consistent pixels (every pixel remains in the image, they just get moved around)

[@MissNorington]

@@vibaj16 Sheers are part of affine transformation, so in order to draw a sheer (to rotate), you must use the inverse transformation. I want to skip the inverse since it involves multiple divisions and floating point for the determinant.

[@vibaj16]

@@MissNorington you could completely abandon using matrices and just calculate everything directly

[@What_was_wrong_w_jst_our_names]

Codejam?

[@javidx9]

Hey Cameron, check it out! itch.io/jam/olc-codejam-2018

[@estebanmorales4089]

Niceee video :)

[@javidx9]

Thanks Wilfry!

[@dnetne5508]

yo,make minecraft :'D but for real..

[@javidx9]

Cubes? Really? :D

[@dnetne5508]

@@javidx9 simply enough xD and pretty..

[@zombiemachines]

why not using Unity?

[@erwinmulder1338]

This channel is about understanding how things like Unity actually work on the inside by creating your own little things from scratch.

[@javidx9]

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.

[@mikgigs]

everything is fine, backprojection resampling is explained very well, but the code is written in a veeery slow manner, 2D matrix access...painfully slow

[@petercsala]

FIRST

[@javidx9]

smh...