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".
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.
@@1upIndie Yeah parallax can indeed be way more complexe depending on your needs. There is a few different technic to use. After testing a few things out, I see that the biggest challenge here is to understand that when you lerp 0.9 for example you only scroll to 900 pixels on a 1000 pixels width room. So when you add backgrounds element, you have to keep that in mind if you want your very last boss subroom to the full right of the room showing trees or not in the background for example. Those things have to be setup at the end of the level design, when the room size shouldn't change anymore, else way you might have to do it all again to set things right. Glad you're here 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 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.
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.
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)); }
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
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 That should clear things up at 2:56 ua-cam.com/video/fokfT784wVM/v-deo.html. 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?
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]) ) );
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.
@@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]));
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
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!
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?
@@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 ua-cam.com/video/ka_fVrGMOwo/v-deo.html 2years older than this video and its the exact same except the guy from 2 years ago is more thorough.
@@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.
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".
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.
You easily could have recorded writing 4 lines in create and 4 lines in step in the same amount of time. Weird excuse.
Gorgeous, I thought it would be way more pain in the ace, but it's actually neat ! thank you !
Well, there are more complicated ways. But hey, there are better things to do that making life hard. Glad to hear I can help a fellow developer out!
@@1upIndie Yeah parallax can indeed be way more complexe depending on your needs. There is a few different technic to use. After testing a few things out, I see that the biggest challenge here is to understand that when you lerp 0.9 for example you only scroll to 900 pixels on a 1000 pixels width room. So when you add backgrounds element, you have to keep that in mind if you want your very last boss subroom to the full right of the room showing trees or not in the background for example. Those things have to be setup at the end of the level design, when the room size shouldn't change anymore, else way you might have to do it all again to set things right. Glad you're here 1upindie !
Very easy to implement, nice.
thanks!! just what i was looking for!
Glad I could help a fellow developer out!
Easy and working very well. Thank you very much
thanks for the video.
Awesome! Thank you!
Is it possible to use this on instance layers?
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".
uhhh, any tips how to do that lol? I’m pretty new on coding
@@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.
Fireeeeeeee 🔥
thanks worked great for me!
Man, you are THE man.
Yup, thanks mate!
Thanks!
wow thanks so much!
It is possible to. Apply blend modes in this method? For example blinking lights in some windows.
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.
@@1upIndie Thanks a lot 😍
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));
}
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
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?
@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
@@williammally4304
That should clear things up at 2:56
ua-cam.com/video/fokfT784wVM/v-deo.html.
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?
@@1upIndie That's perfect!!! Thank you so much!
That was very helpful! :)
Hopefully :D
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]) ) );
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.
@@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]));
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
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
But how to make background clouds respect the parallax while also scrolling hoirizontally?
Sorry, but I don't understand you want it to scroll but not scroll?
@@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.
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!
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?
@@1upIndie woah!! this might help! thanks for replying and all your vids! Ill try this out later and let you know!
@@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
Thx dude x)
You are welcome.
I LOVE YOU
wow. thanks. but you could add the controller part too.
What exactly do you mean by that?
@@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
@@murtazarizvi368 ua-cam.com/video/ka_fVrGMOwo/v-deo.html 2years older than this video and its the exact same except the guy from 2 years ago is more thorough.
I dont get it :(
Hm, what is the issue you are having?
@@1upIndie the layers dont animate anymore for some reason (the clouds for example dosent move). And how can I make more than four layers?
@@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.