🔴Game Maker Studio 2 | Basics - Parallax scrolling

This video tutorial shows what parallax is and how to implement it into gamemaker studio.
▶ Gamemaker Studio: www.yoyogames.com/get
▶ Trial limitations: help.yoyogames.com/hc/en-us/a...
🎮 My free game Clunky souls:
1up-indie2.itch.io/clunky-souls
💓 My assets:
Get some assets at itch.io 1up-indie2.itch.io/
👑 Support me and get fresh game art and game maker projects every month:
/ 1upindie
Follow me on:
📸 Instangram: / 1upindie
🐦 Twitter: / 1upindie
💬 Discord: / discord
📜 Udemy: www.udemy.com/course/become-a... (See youtube about page for max discount)

[@McBroTime]

I suggest moving the layer_get_id calls to the create function, and removing "var". There's no need to get those ID values every frame, unless you're building a game where they could theoretically change. It's likely a negligent impact on performance, but still what I'd consider to be "best practice".

[@1upIndie]

Yes this is a best practise, optimizing your code is something you do when you are experienced enough. But most people come in here for a quick fix and not long elaborate implementations where everything is optimal. I for myself actually do what you say, but for short 5min videos, well.... that is a different story.

[@junglejim6674]

You easily could have recorded writing 4 lines in create and 4 lines in step in the same amount of time. Weird excuse.

[@beefuskeepus3822]

thanks!! just what i was looking for!

[@1upIndie]

Glad I could help a fellow developer out!

[@DromEdxFr]

Easy and working very well. Thank you very much

[@Zephhyre]

Very easy to implement, nice.

[@bryymiller2475]

Awesome! Thank you!

[@desmormos]

thanks worked great for me!

[@WakeNBakeMusic]

thanks for the video.

[@MichelWild]

That was very helpful! :)

[@1upIndie]

Hopefully :D

[@flashtag2022]

wow thanks so much!

[@cloudythb]

Thanks!

[@guilhermegamal5143]

Man, you are THE man.

[@1upIndie]

Yup, thanks mate!

[@chadcoyle]

TY for the great tutorial! Very easy parallax method for the x movement. However I've run into problems with the y. If I use the same code and substitute y for x, while it functions vertically, it also raises my bgs up in the air even when I first begin at the bottom of the level. How can I get the bgs to start as they are placed in the room editor, rather than midway up the screen? I have tried various ideas, like below: if (obj_camera.camera_start_y != camera_get_view_y(obj_camera.camera)) { layer_y(bg_near, lerp(0,camera_get_view_y(obj_camera.camera), -.2)); layer_y(bg_far, lerp(0,camera_get_view_y(obj_camera.camera), -.3)); }

[@LobaquiBoyPlay]

Thx dude x)

[@1upIndie]

You are welcome.

[@tav7225]

I LOVE YOU

[@How2Animate101]

Is it possible to use this on instance layers?

[@1upIndie]

Sure, you would then need to do the math which the background layer does automatically for you (horizontally repeat) and draw eventhing there "by hand".

[@How2Animate101]

uhhh, any tips how to do that lol? I’m pretty new on coding

[@1upIndie]

@@How2Animate101 Hm, in that case I may do a video on that topic. I could explain the math and so on here in this comment, but I am not sure that would help you out.

[@How2Animate101]

Fireeeeeeee 🔥

[@papergamesproductions]

I don't think I get how the "lerp" works, but wouldn't: lerp(0, near, 0.5) do the same thing as: 0.5*near

[@1upIndie]

Lerping stands for linear interpolation. Image it like this, you have two values "a" and "b" and you interpolate/weigth a percentage value between them. That is pretty much it. So you are getting a relative value between those two "a" "b" values back (technically called "return" value). What was show is: getting a value between 0 (which is the start x value for the camera) and the actual x value of the camera. This value is being used to move the entire layer. This value changed when the camera is following the player and the x value of the camera is being more then 0. When you only write: "0.5*near", you value would be all the time the same and therefore not moving the layer at all. Hope that helps! Offical Yoyo blog: manual.yoyogames.com/GameMaker_Language/GML_Reference/Maths_And_Numbers/Number_Functions/lerp.htm

[@vaguener]

It is possible to. Apply blend modes in this method? For example blinking lights in some windows.

[@1upIndie]

Hm, these are backgrounds, so no. The background layers are quite limited in how you can manipulate/change their behaviour. So if you want to to some shadering/blending you would need to make a draw event and do basically your custom parallax system by hand. You can do a lot of things, but that has do be in a draw event of an object where you can do all kinds of crazy things or you can overlay the background layers with an FX and change that fx there.

[@vaguener]

@@1upIndie Thanks a lot 😍

[@NorthGameStudio]

So I have an interesting scenario, i want to use this parallax process, however, I also want the backgrounds to have a consistent horizontal move speed with the parallax. I noticed using this method disables the horizontal speed that can be applied via the room editor. anyone have a solution for that? I've been at it for a bit trying to figure it out, havent gotten anywhere. thanks! great content!

[@1upIndie]

Hm, not sure I understand what you try to accomplish. So (this video here) uses parallax to simultate view depth like in the real world with an relative fixpoint (player). What you were refering to is an autoscrolling that simulates a "fake" movement that is not based on the realtive position of the player. So you can have one or the other. To get this right. You want to have a parralax but with auto scrolling? A solution would be to update all the different background (layers) x postions (" layer_x()") with different values. Example -> background layer 1, is getting updated by 0.3, the next one by 0.4 and so on. slowscroll += 0.05 layer_X (far away, camera_get_view_x +slowscroll ); fastscroll += 0.2 layer_X (near, camera_get_view_x +slowscroll ); etc. Did that help?

[@NorthGameStudio]

@@1upIndie woah!! this might help! thanks for replying and all your vids! Ill try this out later and let you know!

[@NorthGameStudio]

@@1upIndie yes! that totally worked i had to make a couple of adjustments. so, i have these clouds rolling in the background, i want them to move every so slightly towards the left of the screen, so they have constant horizontal movement. I also want them to have some kind of parallax for a nice depth illusion. since this is following the camera x position, which is also following my player, it affects the speed of the overall parallax based on the direction the user is moving in. So imagine having a constant momentum, then adding on top the parallax scroll and also the position of the camera, you end up having a burst of speed to the parallax. So the way around this for me was to create a PlayerPressingKeys script which returns true if the player is moving. If the player moves, then the consistent horizontal scrolling is lerped to a zero value and the parallax kicks in, which is great cause you only really see parallax while the player is moving. if the player is NOT moving, if they are standing still, auto scroll of the layers is added. I have like 6 layers of clouds, so there are 2 different scroll speeds, to somewhat allow for things in the far distance to move much slower. Its a bit confusing to explain, lol see below for some code //Step //Cloud Layers 1 is closest var cloud1 = layer_get_id("Cloud1"); var cloud2 = layer_get_id("Cloud2"); var cloud3 = layer_get_id("Cloud3"); var cloud4 = layer_get_id("Cloud4"); var cloud5 = layer_get_id("Cloud5"); var cloud6 = layer_get_id("Cloud6"); //if player is not moving, lets move the layers automatically at different speeds based on distance if (!playerPressingKeys()) { sScroll += .02; mScroll += .06; fScroll += .09; } else { //if player is moving, slow down the horizontal movement of the layers for the parallax effect sScroll = approach(sScroll, 0, .2); mScroll = approach(mScroll, 0, .2); fScroll = approach(fScroll, 0, .2); } layer_x(cloud1, lerp(0, camera_get_view_x(view_camera[0]) - fScroll, .5)); layer_x(cloud2, lerp(0, camera_get_view_x(view_camera[0]) - fScroll, .6)); layer_x(cloud3, lerp(0, camera_get_view_x(view_camera[0]) - mScroll, .7)); layer_x(cloud4, lerp(0, camera_get_view_x(view_camera[0]) - mScroll, .8)); //temporary reduce the scroll value here, mostly just to avoid having a third scroll amount layer_x(cloud5, lerp(0, camera_get_view_x(view_camera[0]) - sScroll, .9)); layer_x(cloud6, lerp(0, camera_get_view_x(view_camera[0]) - sScroll, 1)); I feel like this might be a little 'hacky' but it seems to work, so im running with it. thank you so much for the tip 1UP

[@murtazarizvi368]

wow. thanks. but you could add the controller part too.

[@1upIndie]

What exactly do you mean by that?

[@murtazarizvi368]

@@1upIndie the controller in the corner which helps for the effect. i mean where it came from but did it on my own. but your tutorial really helps

[@Digital33Studios]

@@murtazarizvi368 kzbin.info/www/bejne/oZLCl4mofLKCrdE 2years older than this video and its the exact same except the guy from 2 years ago is more thorough.

[@scarfthefisheatingrabbit5156]

how do I make it so the bg is always in the y position of the view I tried doing this layer_y("bg", lerp(camera_get_view_y(view_camera[0]), camera_get_view_y(view_camera[0]), camera_get_view_y(view_camera[0]) ) );

[@1upIndie]

Ehm, you code is being bounce by one value. It always stays the same. What you need is one relative value and well, the target value to get to here -> "camera_get_view_y(view_camera[0]) " // the to get to target value.

[@scarfthefisheatingrabbit5156]

@@1upIndie is this right because I don't really think it is because the background's y position still slightly moves layer_y("bg", camera_get_view_y(view_camera[0]));

[@ami7mina]

But how to make background clouds respect the parallax while also scrolling hoirizontally?

[@1upIndie]

Sorry, but I don't understand you want it to scroll but not scroll?

[@ami7mina]

@@1upIndie I want a scrolling horizontal clouds.. that will also move more when I move instead of just being static in parallax when i don't move.

[@williammally4304]

How do i get the parallax effect if the player doesnt move, just the background and items. Creating an endless runner and cant find anything on wraping the background or foreground

[@1upIndie]

In that case you increase the x position all the time of each layer like in this video, but you update the most far away with a lower number and the closer ones with bigger numbers. Was that helpful?

[@williammally4304]

@1up Indie I have the background moving, but it eventually moves too far off screen, how can I make it continue moving while staying on acreen

[@1upIndie]

@@williammally4304 That should clear things up at 2:56 kzbin.info/www/bejne/nKDOl4dtbZmqjK8. You do the same thing but 2,3 or how many backgrounds (sprites) you have. So first, repeat it horizontally (so it doesn't move away like shown) and give it a negative or positive (scrolling) speed. Was that it?

[@williammally4304]

@@1upIndie That's perfect!!! Thank you so much!

[@UB04_narezO4ki]

[@johnnny6427]

I dont get it :(

[@1upIndie]

Hm, what is the issue you are having?

[@johnnny6427]

@@1upIndie the layers dont animate anymore for some reason (the clouds for example dosent move). And how can I make more than four layers?

[@1upIndie]

@@johnnny6427 To be honest I have no idea what you did in your project. Well, if you want to have more layer you simply create new ones, give them sprites and lerp these also like in the video shown. If you have issues, maybe go into my discord channel and ask there around.