30 replies to this topic

[Fihrilkamal]

• Title: Responsive Parallax Scrolling Example
• Description: Example on how to make an almost flawless parallax scrolling universe.
• GM Version: :GM8:
• Registered: Yes
• File Type: .gmk
• File Size: 674.6 KB
• File Link: .gmk only (YoYo games link)
• Required Extensions: None
• Required DLLs: None

Summary
First of all I would say thanks to Nocturne for his old parallax example, I've learned a lot from it. Well, Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion. That was what Wikipedia said. In this example I'll show you how to make responsive parallax scrolling world (with moveable view), as opposed to commonly less responsive backgrounds method in which when the view moves the background will follow the view but with slight delay.

The key to achieve this "responsive parallax" is to NEVER EVER use the built-in backgrounds in the room editor (you know, the background[x]). In this simple example I've included two important script to replace those built-in background. They're;
draw_background_tiled_horizontal(back,x,y)
draw_background_tiled_vertical(back,x,y)

You can freely use them for your games if you want, no credit required.

In this example I've also drawn a foreground image that appears in front of the player's object thus they're scrolling faster than any images behind it. And finally... I've also added one building image example, this means you can also draw parallax scrolling images individually rather than tiling it.

The Awesome Parallax Universe!


NOTE: JUST DELETE THE obj_hud IF YOU USE GAME MAKER LITE

I hope you find it useful, and Happy Game Making !!

[icuurd12b42]

Very smooth and pretty

[Fihrilkamal]

Very smooth and pretty

Thank you very much icuurd12b42! It's really an honor for me to get a Staff Choice

[greyzebra]

Would be surprised if you don't get Staff Choice! This is very good. Thanks for sharing this.

[Benxamix2]

Excellent example. I may use it for some projects. Thank you very much

[thatshelby]

It looks nice.. but is there any rhyme or reason to why you chose those numbers? It's really confusing me... Some detailed, and i mean detailed commenting would be in order.

[Robert3DG+]

You should add a lock to prevent the layers from separating too far if the rooms really big. Like prevent them from going further than 50 pixels vertically or something.

[Fihrilkamal]

Thanks all for your support!

It looks nice.. but is there any rhyme or reason to why you chose those numbers? It's really confusing me... Some detailed, and i mean detailed commenting would be in order.

/***************************************************
  This piece of code draw the background with
  different illusion of depth, by using position
  relative to the current view's position.
  The larger the division number the faster
  the background will move.
 ***************************************************/
draw_background(background0,view_xview[view_current],view_yview[view_current]) // Draw furthest static background
draw_background_tiled_horizontal(background5,view_xview[view_current]/1.1+100,view_yview[view_current]/1.1+300) // Draw background that move slowest
draw_background(background6,view_xview[view_current]/1.1+300,view_yview[view_current]/1.1+232)// Draw single big building
draw_background_tiled_horizontal(background1,view_xview[view_current]/1.25+100,view_yview[view_current]/1.25+340) // Draw background that move slowest
draw_background_tiled_horizontal(background2,view_xview[view_current]/1.5,view_yview[view_current]/1.5+386) // Draw background that move slower
draw_background_tiled_horizontal(background4,0,720) // Draw the ground

If you want to draw something that looks further just divide view_xview[view_current] and or view_yview[view_current]
with numbers according to your desired position.
view_xview[view_current] means it's not moving at all, thus it will always on view_current's x.
view_xview[view_current]/2 means it's will move slightly.
the "+" just meant to place backgrounds position to a correct position.
and so on... Sorry I'm not good at explaining things Try to edit those values and I'm sure you'll understand.

You should add a lock to prevent the layers from separating too far if the rooms really big. Like prevent them from going further than 50 pixels vertically or something.

That would be easy I think just add some code like this:

draw_background_tiled_horizontal(background1,view_xview[view_current]/1.25+100,median(MINIMUM Y,view_yview[view_current]/1.25+340),MAXIMUM Y))

I think that should work.

[windtalks]

excellent！thank you ！

[Harmonex]

Wow. I had been trying to get parallax to work without the lag, but I had thought it was a bug in my code. Thanks for this, it has really helped me out. Is there any way to use it to tile horizontally and vertically? I tried the script as-is and realized I couldn't combine them.

P.S. Is it intentional irony that you called the file "Perferct"?

[EDIT]: I modified your code with a little trial and error and this seems to work.

/***************************************************
  Usage :   draw_background_tiled_both(back,x,y)
  Arguments :   argument0   ==  background
                argument1   ==  x
                argument2   ==  y
  Event :   draw event
 ***************************************************/
 
 var back,height,width,xx,yy,up,down,left,right,i,a;
 
 back=argument0;
 height=background_get_height(back);
 width=background_get_width(back);
 xx=argument1;
 yy=argument2;
 up=-1;
 left=-1;
 down=view_yview[view_current]/height+view_hview[view_current]/height+1;
 right=view_xview[view_current]/width+view_wview[view_current]/width+1;
 if (view_enabled)
 {
    for (i=up; i<down; i+=1)
    {
        for (a=left; a<right; a+=1)
        {
            draw_background(back,xx mod width+width*a,yy mod height+height*i);
        };
    };
 }
 else
 {
    for (i=-1; i<room_height/height+1; i+=1)
    {
        for (a=-1; a<room_width/width+1; a+=1)
        {
            draw_background(back,xx mod width+width*a,yy mod height+height*i);
        };
    };
 };

Edited by Harmonex, 24 March 2012 - 02:55 AM.

[Fihrilkamal]

Wow. I had been trying to get parallax to work without the lag, but I had thought it was a bug in my code. Thanks for this, it has really helped me out. Is there any way to use it to tile horizontally and vertically? I tried the script as-is and realized I couldn't combine them.

P.S. Is it intentional irony that you called the file "Perferct"?

[EDIT]: I modified your code with a little trial and error and this seems to work.

/***************************************************
  Usage :   draw_background_tiled_both(back,x,y)
  Arguments :   argument0   ==  background
                argument1   ==  x
                argument2   ==  y
  Event :   draw event
 ***************************************************/
 
 var back,height,width,xx,yy,up,down,left,right,i,a;
 
 back=argument0;
 height=background_get_height(back);
 width=background_get_width(back);
 xx=argument1;
 yy=argument2;
 up=-1;
 left=-1;
 down=view_yview[view_current]/height+view_hview[view_current]/height+1;
 right=view_xview[view_current]/width+view_wview[view_current]/width+1;
 if (view_enabled)
 {
    for (i=up; i<down; i+=1)
    {
        for (a=left; a<right; a+=1)
        {
            draw_background(back,xx mod width+width*a,yy mod height+height*i);
        };
    };
 }
 else
 {
    for (i=-1; i<room_height/height+1; i+=1)
    {
        for (a=-1; a<room_width/width+1; a+=1)
        {
            draw_background(back,xx mod width+width*a,yy mod height+height*i);
        };
    };
 };

I'm sure game maker already have that built in function, it's called draw_background_tiled(back,x,y) (that's why I'm trying to make the horizontal, and vertical, only counterpart). So you seriously don't need to make that code above.
I named this perfect, because it's literally perfect, as far as I'm tested , so please tell me what bug exactly do you find? :/

Edited by Fihrilkamal, 24 March 2012 - 07:30 PM.

[Harmonex]

Ah, my apologies. I'm still a little new to GML, so I'm not aware of every single function just yet.

Nothing to see here, move along.

P.S. I assumed "Perferct" to be an intentional typo.

[EDIT]: I think I found a use for the code I provided that I couldn't use the built-in function for. If I wanted to tile a bunch of similar backgrounds randomly (think stars twinkling), I could add a second or third background variable into the script, and then possibly use alarms to change the backgrounds every few seconds. Granted, I could just change which background I'm tiling in the draw_background_tiled() function, but then I would have the same change spread across the whole screen (which would become noticeable after a while). I think I'll hold on to the script to test out my theory to see if it's worth using.

Edited by Harmonex, 25 March 2012 - 04:34 PM.

[ncadc2004]

Greetings folks - long-time lurker, even longer-time GM user (well, since 5 anyway), first-time poster. So apologies if I'm making any newbie-ish errors in this reply.

Felt the need to finally crawl out of the shadows in response to this topic, because...

In this example I'll show you how to make responsive parallax scrolling world (with moveable view), as opposed to commonly less responsive backgrounds method in which when the view moves the background will follow the view but with slight delay.

...YES.

I've had a platformer on the go for a long time and this specific problem has been irritating me for YEARS. I've been using a step event code in my player object - the horizontal parallax scrolling was never generally a problem, but when my character jumped and landed, the vertical parallax effect had a slight delay that gave the whole thing a peculiar 'bouncy' look. I've never been able to fix it... until trying this.

Kudos to you, sir - and any others that have had a hand in the development of this code - for answering a problem that I have been scouring these forums (and their predecessors) for a long time to find a solution to.



(Pesky draw functions. I've never really understood them well enough...!)

[Ad1]

wow thanks guy this is exactly what im looking for it runs so smooth nice example and thanks again

[The Rock Abdo]

excellent thanks man

[Swifty]

Just like to say I've been looking around/playing with my own code to try and get some smooth parallax and then I found this, great work mate. +1

Swifty

[Fihrilkamal]

Thanks for your nice response guys, I'm glad that you think this script is helpful, I'm used to get stuck with the "slight delay" when making parallax backgrounds for a long time too, then I realize that those built-in background[0-8] can't move at the same time with the views, unless I set them to "foreground". That problem is the same when we make HUDs with separate objects and then set their position relative to a view instead of drawing them in draw event.

[overflo]

I'm new to GameMaker and GML and I have been trying to adapt this example to a forest type scene. When I swap the backgrounds for trees they only appear really short, I need them to be quite tall. I have tried changing value in the code and different size images but, if anything, they just seem smaller. Can anyone tell me how I can do it? I would appreciate any help with it.

Cheers



Cancel the above - I worked it out

Edited by overflo, 08 April 2012 - 04:57 AM.

[metallica3000]

The example is reaaaaaally good! I love it! But im kinda new to gamemaker and don't understand how to implement it in my game... Nothing shows up when I remove the backgrounds from room editor

[Fihrilkamal]

The example is reaaaaaally good! I love it! But im kinda new to gamemaker and don't understand how to implement it in my game... Nothing shows up when I remove the backgrounds from room editor

Thank you! You have to draw your backgrounds with an object that have very large amount of depth, something like 10000000. So, basically we are replacing GM's default background system with our own.