In this video, I thought we'd take a look at a fundamental component of all to D engines, the ability to transform your sprites.

But before we get started, I'm just going to remind you about the warm loan code.

A code jam.

2018.

You haven't signed up.

Check the link below.

It starts next week, and that's when I'll be releasing the theme on The fear of It is going to pay.

Well, of course, you're gonna have to wait for that until next week.

Anyway, we're going to be looking at rotating sprites while not just rotating them, but providing all sorts of different types of transformations to sprites.

So here I've got a spite of a car and I can rotate it.

I can also change the scale of it in both axes.

Make it a bit bigger again so we don't lose this.

Let me go and I can do a sheer transformers.

Well, she is a bit weird.

I don't know how useful they are, but they can be used for sort of wobbly effects.

But certainly the ability to rotate and position and scale sprites on a screen is really important.

And So in this video, I want to introduce the code to implement and I find transform.

Let's get stuff for this video.

I'm going to use the one lone Koda pixel game engine, and I've already created the bird bones of what's required here.

I've overridden the pixel game engine class with a base class called Sprite transforms on that will provide two functions on user create on our news update on user create is called Once andan user update is called.

Every single frame are creates.

An instance of this Dr Class in my main function on the size of the pixel game engine window I'm creating is going to be 256 pixels by 2 40 were each pixel in game.

Engine space is four by four pixels on my screen space.

Since I started with the council game engine and now the pixel game engine, the concept of a sprite has been quite fundamental.

So I've added a variable called SP R card pointer to a type of sprite and in our music, great, I'm going to load a PNG file into that sprite object.

Drawing the Sprite to the screen is quite a routine operation Firstly, I'm going to clear the screen entirely.

Too dark Scion.

In this case, it makes a change from Black makes the thumbnail a bit more interesting.

I'm going to draw the Sprite to Location 00 which is the top left with a single one line command draw.

Sprite.

So that's it.

That's our program.

We're going to load the Sprite on, draw it to the screen, something we've done many, many times on this channel.

And there we go.

We can see the spite of a yellow car with a white background on the dark side and background off the pixel game engine window.

The car has a white background because we've not told the pixel game engine to care about Alfa blending the transparency off the PNG file.

Now P and G files.

They contain their own transparency information, but we choose not to use is in most cases because actually blending things together is quite computational intensive.

She only wants to do it when and where you need it.

So just before I draw despite, I'm going to set the pixel mode to Alfa Nuttall, instruct the pixel game engine to actually acknowledge that the pixels in the PNG file of Sprite have transparency, but it's important.

Once we've enabled it, we should also disable it as well.

Because here, if we didn't set these back to normal the next time we call the clear screen function, it will try to take into account all of the Alfa values that is there, too, which would slow things down on just to eternity.

Check that that works.

There we go.

We've now got the car without the white border.

So far, so good.

We can easily draw the spikes in any X Y location on screen.

We can offset it or translate it anywhere we want.

And in fact, in the pixel gay measure, we can go on further.

We can introduce scale the Strike two, and this is very simply done on by introduced scaling.

What I mean is we've provided interview value as the fourth argument of the drawer Sprite function on it will modify, as we can see now the car is twice as large, so it is skilled in both axes by a factor of to change it to three and it's three times bigger and I can do interview scaling quite simply, because the striped shares its X and Y axis with the X and Y axis of the screen in the example to show instead of drawing, one pixel will draw three pixels instead.

Easy stuff, but this is not very applicable when you want to start rotating the sprites on.

We've done the rotation of a point many, many times on this channel, and so we should know these formula off by heart now.

But if he wanted to transform Point X, we would take cars theater, which is how much we want to rotate it by Times X plus sign theater times Why and for the white component.

It's very similar.

Minus sign Theater X Plus costs Theater Why and so this will take our original X and Y point rotated by a theater and produced a new X and y point.

If you're interested in how this is derived, I suggest you go and check out the code it yourself asteroids video.

I do a full derivation there alongside rotation.

We may also want translation the ability to move the Sprite somewhere along the plane.

Well, we can see here that we once were rotated the point we can offset it quite easily by adding another component.

So let's say a translation in the X on a translation in the why on depending on how you want to look at things, you could also take the whole lot and multiply it by a scaling factor scale, X or scale.

Why?

The order in which you do these things is, of course, important.

One of the things I've done a lot off this year is transformation matrices.

So here we've got the rotation matrix equivalent of the equations have just seen on the scaling Matrix.

We don't have one for translation, and that's because we've not got enough dimensions here.

If you remember, how we calculate matrices is quite a simple algorithm.

We go along each row of the elements on the left hand side of the multiplication and multiply it by the column on the right hand side.

So this cause gets multiplied by this X X costs seater, and we add to that this sign multiplied by this why, plus why, Science eater.

Then we do the same for the bottom row minus X Sign Theater plus y costs theater.

I'll just close off my matrix.

These two equations, of course, what we've just seen on the previous page, but you'll notice we need 1/3 additional term to implement the translation.

So let's just rewrite things a little bit.

I'm going to extend the rotation matrix to accommodate the additional term so it now becomes a three by three matrix.

And when we do our multiplication multiplying by X on by why on by one in this case, the third term would be one multiplied by zero or one multiplied by one in Either way it's irrelevant.

In fact, we'll do exactly the same from our scaling matrix, you know.

0100 So now are scaling.

Matrix is also a three by three matrix, but now we have enough dimensions to create a translation matrix is 10 t x zero won t.

Why?

Because these are the terms that get out.

I don't remember on 001 just to make it a three by three and no, that's our three fundamental transforms all three by three matrices.

Of course we can combine them so we could scale something.

Then rotate it, then translate it, then rotate it, then scale it, then translate it again, Then scale something else on.

We'll get a complete bind.

Transform.

The result of this combined transform is itself a three by three matrix, which means we can have a very complicated transformation, represented with a little amount of data.

And these sorts of combine transforms are called a fine transforms.

Fine transforms have lots of interesting mathematical properties in their own right.

But I'm only interested in rotating and drawing sprites in different places.

And as with a lot of programming algorithms, Wikipedia isn't a bad place to go.

Yes, it starts to talk about the A fine transform from quite a mathematical perspective.

What I like about the article is about 2/3 of the way down we get to see it.

Lists are fine matrices as three by three matrices with an example of what they do.

So here we've got the identity matrix, which does nothing.

It keeps the image on transformed.

We've got the reflection matrix.

Well, if we look at the reflection matrix, we can actually see that that's the same as the scale matrix.

We're only affecting things on the leading Dagnall, in this case, were multiplying our X value by minus one.

So we get a flip in the X axis.

That's no different to scaling, except we're using a minus sign in the front.

We've also got Here we go.

The rotation three by three matrix.

Very nice.

We've just seen that on.

We have an odd one here, which is called Sheer, which allows us to sort of stretch along.

One access only on the thing to know about.

A fine transforms is that parallel lines always remain parallel.

So let's get started with implementing our own matrix framework.

I'm going to remove what we've already got so far, I'm going to create a basic structure called Matrix three by three.

It's just a three by 32 dimensional array of floating point numbers, and I'm going to adopt the convention that I'll do Things column and then row.

This is the same as X and Y Justus.

We did with the code of yourself three D graphics.

Siri's.

I'm going to add some utility functions to help me work with these matrices, so the first functional ad is a function that just simply sets the matrix that's passed into it to be an identity.

The leading diagonals are set toe what?

And we know that we're going to be multiplying matrices a lot, so I'm going to add a quick function.

Just to do that.

It simply loops through the columns and the rose on multiplies them accordingly.

We also need a function to pass a point through our transformation matrix.

So this is going to take in an X and A Y value in The Matrix and produce a new X and A Y value after that point has been transformed.

So you'll see here.

We've got the X coordinate multiplied by a matrix y coordinate multiplied by a matrix.

But we don't have the Zed corner.

I'm going to assume it's one, so we're just going to accumulate the Matrix.

The humble draw spite routine is no longer any good to us.

Now.

We'll have to create our own Thio.

Use the transformation matrix, so I'm going to make an assumption that will have a final transformation.

I'll call that Matt Final, and it just to be on the safe side right now.

I'll just make that an identity matrix to perform the transformation.

I'm going to take a really naive approach on.

It's not going to be the approach will finish with, but I think it shows an interesting concept on the journey.

I'm going to create 24 loops that will allow me to iterated across each pixel contained within the Sprite, and I'm going to sample that pixel and store it in this value p.

Here.

Two additional floating point variables are going to represent my new X and new Y cornet after I have transformed the X and Y coordinate from Sprite space.

So this will put it into screen space.

And this is just a matter of calling the forward function we've just defined.

Once we've got the New X and the new wife function with, then draw the pixel using the standard pixel game engine drawer function in the new location.

So we've taken the point within the Sprite, transformed it on.

We're drawing it to the transformed location on the screen now because this is an identity matrix.

What we should see is no difference at all.

Let's take a look perfect.

What we see is the car aligned with the top left, so let's add a translation matrix.

We want to move the sprite around on the screen.

Well, that's just a case of setting this value on this value in the right most column.

And instead of calling the identity function, let's call the translate function.

I will pass into that value 100 by 100 so they should offset the Sprite from the top left somewhere towards the middle of the screen, take a look and very nice.

It has done so.

Our translation effect has worked quite nicely on we've used major seats.

To do this.

I'll go ahead and simply add in the three other types of our fine transform matrix rotation scaling and sheer.

Let's try them out.

So let's say I wanted to draw despite half the size it should be.

Well, I'll apply scaling factors over no 0.5 to both axes.

Let's take a look at that.

Well, the car seems smaller and quite nicely.

It's not got any awkward artifacts there to complain about good.

Let's make it larger.

We'll make it twice as large, so we'll have a scaling factor of two in both axes.

Let's take a look now.

Uh huh.

Yes.

We seem to have hit a bit of a snack here.

This caps throughout the image.

Why is this?

Well, simply we've not got enough pixels as we've iterated full of the pixels in the Straits.

We've created new locations for those pixels, but the gaps in between them have a look at filling these gaps in in a bit.

But let's try the other transforms first, while scale was a bit unsuccessful.

So let's try rotate.

Instead.

We'll rotate by some arbitrary amount.

No point to this, of course, in radiance.

Well, it certainly rotated the image, but there are those pesky blank pixels again.

Nonetheless, let's try some combined transformations as well.

I'm going to need some more matrices for these, just some temporary ones.

At the moment, we've just rotated the Sprite around.