Tony Polinelli
Tarwin Stroh-Spijer

contact [at]
touchmypixel.com

6/25 Easey Street
Collingwood, 3066
Vic, Australia

+61 3 8060 5321

Making layers Parallax to a player

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:

layers

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

8 comments


  1. Great example! thanks! :)


  2. Cool example. I like the new blog design :)


  3. This trick is possible in JavaScript. I don’t manage to find an example.

    In all cases, nice job. I will watch the source :)


  4. Yeah- i saw the js example too.. cant remember where tho. I havent actually finished this post – just put up this much cause it was 3am… should really get around to describing whats going on some more – maybe when i get zooming working… it seems a popular topic- and is pretty useful


  5. Another question : Why hx.swf is 3 times bigger than the other .swf ? This difference stay also for bigger application ? Hope not cause it seems bad.


  6. Nice! Do you make new platformer game? :) What it will be?


  7. The haxe version will be bigger as there are a few some initialization code like the Boot.hx, also standard classes like List and Hash etc. are used (as opposed to just accessing the objects with []). I can handle a 5k footprint ;P
    haxe definately ISNT 3x the size in general!


  8. If you are interested, in Flash develop click the + on the haxe swf, then view its classes, as opposed to the AS3 version. The extra classes it uses are: @Main, Dynamic, flash.Boot, flash.Lib, IntIter, List, Std, StringBuf & Void.

 

Leave a Reply

Our Friends:

Powered by haXe / poko cms | Copyright 2008-09 TouchMyPixel