touch my pixel

In 2d platform games, you often want to have the different layers or graphics move at different speeds depending on the players movement. As you also probably know this is called parallaxing.

Your layers might be for example: a forground, midground (where the player often is), and multiple backgrounds. As the player moves around in the midground, you will want that layer to move as to keep the player in the middle of the screen. The foreground layer will want to move MORE, as to have a faster movement (looking closer) and the background less, as to look furthur away. Lets look at an example:

In this example the red dot is the “player” which is placed inside the midground (layer2).

It makes sense that closer layers move more- and distant layers move alot less. This means that your closer layers will need be bigger. Since size it directly related to the movement, and therefore their percieved distance on the imaginary Z axis – in our example we’ll define a layers disance via its size. In the above example, the layers are as follows:

They have been given a black border to illustrate their size, this would normally be invisible so that it doesnt show in the test. The rect of a layer is set automatically via getting the layers ‘bounds’. You have the option to set the rect manually. This can be useful for cropping into gfx, cleaning up the edges , etc.

You may notice that there is an AS3 version of the test AND a haXe version. The haXe version uses the example.swf (generated by flash) for the gfx. It will not use any code from flash – its code is in the src_hx folder.

I’ve started to think about how to allow the ‘camera’ to zoom in and out on the scene… that’ll be a test soon.

Download source code here

We gave a talk about the making of Scarygirl last night at Dissecta at the State Library of Victoria, Melbourne.

It went pretty well – couldn’t see too many Zs floating up above the audience’s heads. Thanks to Dissecta for asking us to speak and we’ll be seeing you all again for the next meet in a month or so!

The outline for the talk can be viewed at: http://sg.touchmypixel.com/dissecta/. Just click at the left and right of the slides to move through. Interactive elements can be used (after clicking on them) normally with the arrow keys, space, shift, and A, S and D keys (all of them use different controls, sorry).

Here are the best images we got, really should have got some better documentation! On the left Tarwin Stroh-Spijer & on the right: Tony Polinelli