How maths transforms everything

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.

2d vector example

2d vector example


 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:

First matrix lesson, ft Boss.

First matrix lesson, ft Boss.


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:

And now a bit of OpenGL using c++ (by

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:

XNA Example

XNA Example


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


Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.