Name: 2Dスプライトのアフィン変換 (2D Sprite Affine Transformations)
Uploaded: 2021-01-14T10:25:02.000Z
Duration: 27 min 59 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

字幕リスト動画再生

2Dスプライトのアフィン変換 (2D Sprite Affine Transformations)

sort

approach

routine

term