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.