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.

 

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.