Previous Tutorial
Next Tutorial
Posted on: 11-11-2012

Gravity Platformer Tutorial #7 : Parallax Scrolling

So parallax scrolling, what is it exactly?

Parallax scrolling is a technique that can give your game a sense of depth even though we only draw in 2D.
There are different ways of achieving this, we will do this through the layer method.

We currently only have one layer. This layer will scroll with the screen and this will be our base layer.
What we will do, is add an additional layer that will scroll slower than our base layer.

Because of the slower scrolling of the background layer, it gives the illussion that it is farther away from our camera.
Imagine that you are in a train, you can barely see houses that are next to the track because to go by so fast, but objects in the distance move slower because the are farther away.

One of the key things to this method is, that the more layers you add the stronger your illusion will be. All this is strongly dependent on the quality of the art that you are using.

  1. Lets start off with a background:

    Yes I know, it isn't exactly amazing, but it will do.

    Download the image and put it in "data/img/backgrounds" folder (direct download link)

  2. Now we are going to open our map file in Tiled and add a map property called "background".

    You can do this by going to "Map -> Map Properties".

    We will set the value of this property to "grassy_mountains.png" or to whatever you named the file on your hard drive.

  3. Now we are going to add an attribute to level, this will be an Image.

    1. private Image background;

    And in the constructor we will load our background in the image.

    1. background = new Image("data/img/backgrounds/" + map.getMapProperty("background", "grassy_mountains.png"));

    What this does is, it attempts to read the property called "background" from our map file and if it does not find that property it will default to "grassy_mountains.png".

  4. Now that we have our background loaded, we need to draw it to our screen, but first we will have to decide on the scrolling speed.

    What I've decided to do, is let the scrolling speed be dependent on the size of the background, if we have a background that is half the size of the map, it will scroll with half the speed.

    So lets create a method that calculates this:

    1. private void renderBackground(){
    3. //first calculate the maximum amount we can "scroll" the background image before we have the rightmore or bottom most pixel on the screen
    4. float backgroundXScrollValue = (background.getWidth()-Game.WINDOW_WIDTH/Game.SCALE);
    5. float backgroundYScrollValue = (background.getHeight()-Game.WINDOW_HEIGTH/Game.SCALE);
    7. //we do the same for the map
    8. float mapXScrollValue = ((float)map.getWidth()*32-Game.WINDOW_WIDTH/Game.SCALE);
    9. float mapYScrollValue = ((float)map.getHeight()*32-Game.WINDOW_HEIGTH/Game.SCALE);
    11. //and now calculate the factor we have to multiply the offset with, making sure we multiply the offset by -1 to get it to negative
    12. float scrollXFactor = backgroundXScrollValue/mapXScrollValue * -1;
    13. float scrollYFactor = backgroundYScrollValue/mapYScrollValue * -1;
    15. //and now draw it using the factor and the offset to see where we start drawing
    16. background.draw(this.getXOffset()*scrollXFactor,this.getYOffset()*scrollYFactor);
    17. }

    The first thing we do in this method is calculate how much our image can scroll. Because there always has to be something drawn to the screen we need to substract the width of the image by the size of the game screen.

    So lets do the math for the horizontal scrolling to make it somewhat easier to understand:
    Our background is 1400 pixels wide, our screen is based off of 1024 pixels wide (we scale it up or down from there), so that leaves 1400-1024 = 376 pixels that our image can scroll.

    Lets do the same for the map, using the map from our last tutorial that is 50 tiles wide. This would mean 50*32 = 1600 and 1600-1024 = 576 pixels of scrolling.

    So when our map has scrolled 576 pixels, our background has scrolled 376 pixels. So that means for every pixel our map scrolls, our background has to scroll 376/576 = ~0.653 pixels.

    And that will be the factor we will use for calculating the offset of our background image

  5. And all we have to do now is call this method in our render method in the right place to render the background.

    1. public void render(){
    3. int offset_x = getXOffset();
    4. int offset_y = getYOffset();
    6. //render the background
    7. renderBackground();
    9. //then the map on top of that
    10. map.render(-(offset_x%32), -(offset_y%32), offset_x/32, offset_y/32, 33, 19);
    12. //and then render the characters on top of the map
    13. for(Character c : characters){
    14. c.render(offset_x,offset_y);
    15. }
    17. }

Closing Notes

This is a bit of a crude example of parallax scrolling, but it should explain the principles of it.
Categories: Game Development, Java, Tutorial


No comments yet.

What is the name of the website? (to counter the spam)