Parallax your world

A matrix remember

If you go back to one of my latest posts, you’re going to find one about maths, matrices and a cat giving some basic explanations about these topics (or you may click this link to evade the search part and get to the post I’m talking about).

There we shown how matrices can be used to move items around the screen, rotate or even scale them to archive a scroll or zoom effect. Each transformation could be done applying a basic matrix to your draw function or combine some of them into one matrix using a matrix multiplication.

What’s a parallax effect

The parallax effect was a trend some time ago in web development and is commonly used in 2D video games to create a new virtual dimension and give some depth to the level background. It’s basic functionality is based in sorting every element to be drawn in layers and assigning different translation speed value to them.

Without parallax, when a camera moves around the map, each element get’s transformed by the same translation matrix, but using parallax that transformation is multiplied by the translation speed assigned to the layer which is being drawn. That makes the code a bit more complex, but the results worth it.

A great parallax example.Dust: an elysian tail

You can see the same effect in some web sites scrolling down with your mouse. Usually these effects are more complex than an horizontal translation with different speed values:

http://discover.store.sony.com/be-moved/

http://promo.leagueoflegends.com/en/freljord/

 How is done

The first step to create a parallax effect in to your game is sorting every background asset, characters and items into layers. A 0 depth layer can be created to be drawn before the character’s layer with a translation speed greater than 1. Then a 1 depth layer with speed 1(equal to the camera speed)  where the main game assets and characters will lay, like the floor, main characters, enemies, items and background elements that will be shown right behind the action. Then we can set up as much layers as we want, decreasing the speed associated to each one, and draw them behind the main layer.

layer distribution

Asset’s layer distribution

 
 

A good way to code this mesh is to wrap the draw call in a function with the same parameters than the draw call plus the transformation matrix, or the speed assigned to each asset. In some languages the transformation matrix is not a param of the draw function, and the function to wrap may be the function to prepare the output before the draw calls, like the SpriteBatch.Begin function in XNA we saw in my last post.

Using XNA for our example, we can set up a BeginBatch function with the new position of the asset and the speed assigned to it. Using this parameters we are able to create a translation transform matrix and multiply it for the parallax speed. Then, we only have to call the begin method of the spritebatch adding the transform matrix as parameter. If we call the draw function of the asset right after this call, the position will be related to the speed value.

 

At the end,the game should move like this:
 

Parallax example

Parallax example

That’s all for now! Boss wanted to explain it a bit more, but he is busy trying to hunt the damn blue bird around our twitter site. You can check how is he doing at : https://twitter.com/StrandedSoft

If any of you don’t understand something or want to drop a comment, feel free  to do it.

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

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!