Skip to content

Instantly share code, notes, and snippets.

@DanBradbury
Last active August 29, 2015 14:04
Show Gist options
  • Save DanBradbury/0ca3927f471f09dcbc98 to your computer and use it in GitHub Desktop.
Save DanBradbury/0ca3927f471f09dcbc98 to your computer and use it in GitHub Desktop.
ep4 Parallax

Parallax Backgrounds

In any side scroller you are going to see the Parallax Scrolling effect. This effect was (in my mind) huge for castle crawl games like Castlevania that would utilize it on any window or open scenery to immerse the player in a subtle way. The first appearances of Parallax scrolling can be traced to 1982 in a game called Moon Patrol (video link) and has been used in many games since.

For the purposes of this episode we are going to create a simple sprite based Parallax Scrolling effect.

We will use these 2 backgrounds: Background 1 & Background 2 to create the following basic effect:

This example is comprised of very little code. We will be using a background and an object to serve as the two moving pieces. We could layer even more layers by using additional objects with the same logic.

First we will handle the layer farthest back with a room background and background component.

Create a new with the image of your choosing. Now it's time to create a and let's make this layer come to life.

In the settings tabs of the room go ahead and set the background to the one we just created. (I also set the background draw color here because grey on grey on grey is going to look a little silly). Play with the settings and get it to your deisred height and be sure to have the Tile Hor. is checked.

The last thing to do is add the code to handle this. If you have not used room creation code go ahead and select the settings tab as shown abovew, select Creation Code and enter the following code:

background_hspeed = -1;
instance_create(0,0,obj_city);

Nothing fancy here just using background_hspeed to control the movement of our background and since we are here I will preemptively add a line to create an object which will serve as our other layer. I could have just as easily not included this line and waited until the object was created and dragged it into the room.

Create a new and load your other background into it. **You may have to play around with the Origin settings here to get the desired height of the city. (Coordinates (0, 300) is what I use in the example) **

Let's create a new , name it obj_city, set the sprite to the one you just created, and save it so we can run a test run. Hit and you should see your first layer come to life and repeat indefintely. (you may want to uncheck visibility on obj_city as the other sprite may block the effect from being clearly displayed)

Reopen obj_city and let's add some code to make this layer come to life.

hspeed = -2;
next = false;

In the create event we go ahead and set the objects hspeed to ensure it will be moving during its lifetime. We also set a variable called next which we wil use in the Step event to keep track of generating a new obj_city when our old object is moving off of screen.

if(next == false){
    if(bbox_right <= room_width) {
        instance_create(room_width,0,obj_city);
        next = true;
    }
}

if(bbox_right<=0) {
    instance_destroy();
}

The check to generate a new object is nothing too fancy but does use some of GameMaker's buit in instance_variables. After checking that the flag has not been set we want to see if the sprite's right edge has crossed the width of the room. To do this check the bbox_right variable against the room_width and as soon as they are <= we create a new object and mark our next flag so no more instances are created.

The other thing that is done in the Step event is to take care of the lifetime of the object. Since the object is no good to us once it is out of site we check the bbox_right variable to see if it ever leaves the room. If it does we can go ahead and destroy it without any problems. Even though the object is not in sight that does not mean that it is not being updated and taking up cycles

Hit and we should see our second layer come to life. Yay!

Feel free to build on the example and add a more personalized feel for whatever you are tying to accomplish. This parallax effect that was shown can be built with minimal effort and tossed into your game without too much work (some depth adjustments may be needed but nothing major).

As always have fun and keep building cool things.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment