Jump to content


Photo
* * * * * 2 votes

Responsive Parallax Scrolling Example


  • Please log in to reply
43 replies to this topic

#1 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 15 February 2012 - 08:50 PM

  • 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!
Posted Image

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

:medieval: :medieval: I hope you find it useful, and Happy Game Making !! :medieval: :medieval:
  • 8

#2 icuurd12b42

icuurd12b42

    Self Formed Sentient

  • GMC Elder
  • 16023 posts
  • Version:GM:Studio

Posted 16 February 2012 - 08:24 PM

Very smooth and pretty
  • 1

#3 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 16 February 2012 - 11:52 PM

Very smooth and pretty


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

#4 greyzebra

greyzebra

    GMC Member

  • GMC Member
  • 116 posts
  • Version:GM:Studio

Posted 27 February 2012 - 03:59 AM

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

#5 Benxamix2

Benxamix2

    GMC Member

  • New Member
  • 278 posts
  • Version:GM8

Posted 28 February 2012 - 01:37 PM

Excellent example. I may use it for some projects. Thank you very much ;)
  • 0

#6 thatshelby

thatshelby

    GMC Member

  • GMC Member
  • 3823 posts
  • Version:GM8

Posted 12 March 2012 - 10:28 PM

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.
  • 0

#7 Robert3DG+

Robert3DG+

    Designer

  • GMC Member
  • 1925 posts
  • Version:GM:Studio

Posted 13 March 2012 - 01:44 AM

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.
  • 0

#8 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 21 March 2012 - 10:39 AM

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 :P 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.
  • 0

#9 windtalks

windtalks

    GMC Member

  • New Member
  • 2 posts
  • Version:GM8

Posted 23 March 2012 - 02:17 PM

excellent!thank you !
  • 0

#10 Harmonex

Harmonex

    GMC Member

  • GMC Member
  • 56 posts
  • Version:GM:HTML5

Posted 24 March 2012 - 02:20 AM

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.

  • 0

#11 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 24 March 2012 - 07:24 PM

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 :P , so please tell me what bug exactly do you find? :/

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

  • 0

#12 Harmonex

Harmonex

    GMC Member

  • GMC Member
  • 56 posts
  • Version:GM:HTML5

Posted 25 March 2012 - 03:04 PM

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

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.

  • 0

#13 ncadc2004

ncadc2004

    GMC Member

  • New Member
  • 1 posts

Posted 25 March 2012 - 08:46 PM

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. ::lmao::

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.

:thumbsup:

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

#14 Ad1

Ad1

    GMC Member

  • GMC Member
  • 177 posts
  • Version:Unknown

Posted 02 April 2012 - 04:08 AM

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

#15 The Rock Abdo

The Rock Abdo

    GMC Member

  • GMC Member
  • 59 posts
  • Version:GM:Studio

Posted 02 April 2012 - 10:22 AM

excellent thanks man :thumbsup:
  • 0

#16 Swifty

Swifty

    Shadow

  • GMC Member
  • 509 posts
  • Version:GM:Studio

Posted 03 April 2012 - 03:52 PM

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
  • 1

#17 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 07 April 2012 - 11:50 AM

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.
  • 0

#18 overflo

overflo

    GMC Member

  • New Member
  • 61 posts
  • Version:GM8

Posted 08 April 2012 - 03:27 AM

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.

  • 0

#19 metallica3000

metallica3000

    GMC Member

  • GMC Member
  • 38 posts
  • Version:GM8

Posted 02 June 2012 - 01:58 PM

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
  • 0

#20 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 04 June 2012 - 03:55 PM

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.
  • 0

#21 creators124

creators124

    awesomeliciousmember

  • GMC Member
  • 866 posts
  • Version:GM8

Posted 04 June 2012 - 05:57 PM

PERFECT! Posted Image
I love it!
the hud could be more beautiful. Posted Image
you have a gift at drawing backgrounds, thanks for sharing it! Posted Image
  • 1

#22 CharlieMcShane

CharlieMcShane

    GMC Member

  • GMC Member
  • 259 posts
  • Version:GM:Studio

Posted 02 July 2012 - 12:53 PM

EXE:
Posted Image
Here it works perfectly fine.

HTML5:
Posted Image
Here, it is not. And the images shrink in size too!


Any ideas to fix the HTML5 version?

Thanks in advance!
Charlie


EDIT: SOLVED, read below

Edited by CharlieMcShane, 03 July 2012 - 01:02 PM.

  • 0

#23 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 03 July 2012 - 11:17 AM

Thanks creators124!
I'm not sure since I never tried gm html5 before. It's really odd, the game and the scripts are the same isn't it?
  • 0

#24 CharlieMcShane

CharlieMcShane

    GMC Member

  • GMC Member
  • 259 posts
  • Version:GM:Studio

Posted 03 July 2012 - 01:01 PM

Thanks creators124!
I'm not sure since I never tried gm html5 before. It's really odd, the game and the scripts are the same isn't it?


Hey Fihrilkamal!
I must of re-read through your code like, 7 times; and I still didn't draw up an error, so your code is perfectly fine. I hadn't edited them either really!
What I have realised though, is that HTML5 can't use this feature with backgrounds that tile further or higher than the view size itself, for my case; backgrounds couldn't be larger than 700x550 if I wanted to tile them with your code. You'll see in the HTML5 image, that the HTML5 export shrinks the background to size to fit in the screen, causing the image to float upwards on the y axis.

In a result, I had to edit all my backgrounds to fit this dimension; it just appears that HTML5 hates any tiles that exceed the [view_current] field.
For proof of concept that your code works in HTML5 (I know it is a dirty fix, but I seriously can't find another solution)
http://www.learningg...er.com/yogscast

Probably best to let people know in your original post!
Charlie

PS: Let me know if you want me to remove the link above, posting purely for proof of concept, not advertising
  • 1

#25 Fihrilkamal

Fihrilkamal

    GMC Member

  • GMC Member
  • 383 posts
  • Version:GM:Studio

Posted 03 July 2012 - 01:54 PM

Really glad to hear that you solved it, please don't remove that link, it's good to see this parralax method implemented in a game :D
  • 0

#26 CharlieMcShane

CharlieMcShane

    GMC Member

  • GMC Member
  • 259 posts
  • Version:GM:Studio

Posted 03 July 2012 - 04:20 PM

Really glad to hear that you solved it, please don't remove that link, it's good to see this parralax method implemented in a game :D


Thanks! Far more optimised than the built in background options on the GM Editor!

Charlie
  • 0

#27 celebraces

celebraces

    GMC Member

  • GMC Member
  • 956 posts

Posted 19 January 2013 - 04:28 AM

I've been playing with 3D vision today and thought it would look great with layered backgrounds. I stumbled upon your example and modified it a little bit to add a 3D capability.

If you have a 3D monitor that supports side by side, check this out:

http://celebraces.co...arallax_3D.gm81

Press enter to switch eyes and space to turn off 3D.
  • 1

#28 Grand_Alchemist

Grand_Alchemist

    GMC Member

  • GMC Member
  • 14 posts
  • Version:GM:Studio

Posted 18 February 2013 - 11:28 PM

This is absolutely awesome!

Although one small issue..


Having a problem importing this into GM:Studio. There are some lines appearing across the border of the background textures.


Has anyone else found this to be true and/or know how to fix this small issue?


Thanks!





Edit: Semi-solved - Turning off Interpolation fixed (at the cost of some graphical quality of course)


Edited by Grand_Alchemist, 23 February 2013 - 02:34 AM.

  • 0

#29 Alphanumerai

Alphanumerai

    GMC Member

  • GMC Member
  • 16 posts
  • Version:GM8.1

Posted 16 March 2013 - 09:16 PM

Ooh delicious! Brilliant example of parallax scrolling and some rather nice demonstration graphics, will be using this for my projects :P
I'm assuming you can limit it to only vertical or only horizontal parallaxing if you were so inclined.
  • 0

#30 Lotias

Lotias

    GMC Member

  • GMC Member
  • 1205 posts
  • Version:GM:Studio

Posted 14 April 2013 - 11:05 PM

Works great in Windows and all, but I'm having major problems with it in HTML5 - and I'm definitely sure they're not the same problems as the guy making Yogscast up there.

http://gmc.yoyogames...howtopic=577761


  • 0




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users