Maths may sound like something boring, but are a fundamental part in the videogame dev. The npc’s behaviour, what decides if your character gets disabled or stunned, or even the function that calculate if your last jump is enough to get to a safer place or you’re going to fail resoundingly, at the end that’s all about maths. For this one I’m going to focus on graphic transformations using matrices, mainly used to move things all around the screen, or to create a game camera that will follow your character.

One of the topics I decided to explore in my latest project was how matrix transformations works, with the idea of creating a basic camera with rotation, translation an zoom functions. It’ll be harder for the next articles, but we need to start from the basics.

**How a matrix can change everything**

In your game, you might be using some coordinates system to put every asset in the right place. These coordinates can be represented as a vector, adding a number to the vector for every dimension your game needs. This is a basic introduction, so for now I’m using only vector of size 2.

On another level we have matrices. A matrix is more or less a numeric structure based in columns and rows filled by numbers, and in our case, every matrix should have the same number of columns than rows, and like in the vector case, this determines the size of the matrix and the number of dimensions associated to it. For our 2 dimension game we should use a matrix with 2 rows and 2 columns to implement any transformations, but there is an issue with the translation transform, so we’ll need to expand our matrix and vector to another dimension. If you want to know more about this issue and how expanding the space fix it, check **this document **by** ** Clemson engineering college. It’s a bit advanced, but so well explained and with good examples.

At this point, let’s see if our wise cat can explain something about that matrix magic:

**Working with frameworks**

Enough theory! If you are using some kind of framework, this may be already implemented, or at least wrapped into some functions that makes it’s usage a lot easier. That’s not the case of low level graphic frameworks as opengl or DirectX, so if you plan to use one of those, you will need to work with matrices directly.

For example let’s see some XNA code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var Position = new Vector3(3, 4)); //position of our object var rotation = .2f //in radians! var zoom =2f var transform = Matrix.CreateTranslation( // move the camera to our object new Vector3(-Position.X, -Position.Y, 0))* // camera rotation creating the associated //transform matrix Matrix.CreateRotationZ(rotation)* // scale transform matrix Matrix.CreateScale(new Vector3(zoom, zoom, 1)); //now pass the transform matrix to the spriteBatch begin call spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.SaveState, transform); //Anything you draw between this begin-end calls will be //modified by you transformation spriteBatch.End(); |

And now a bit of OpenGL using c++ (by glprogramming.com):

1 2 3 4 5 6 7 8 9 10 11 |
void display(void) { glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 1.0, 1.0); glLoadIdentity (); /* clear the matrix */ /* viewing transformation */ gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); glScalef (1.0, 2.0, 1.0); /* modeling transformation */ glutWireCube (1.0); glFlush (); } |

As you can see, OpenGL works directly with matrices while XNA has a wrapper as other frameworks have. For OpenGL there are libraries that makes this process easier like the GML (OpenGL Math) library, but the implementation used is not relevant , you may achieve something like I did for my 2D scroller:

That’s all for the first chapter of transformation. Next time I’ll introduce parallax effect using matrix translations. See you!