Parallax Effect in Godot Engine

hey everyone welcome back my name is nick and in this tutorial i wanted to set up uh the basic parallax effect that you can see in hollow knight because i finally broke down and purchased hollow knight over the recent steam sale uh i never played it before although i had seen it everywhere it looks really amazing and i wanted to see if i could recreate some of the effects that you see in that game in godot using parallax layers and actually parallax scenes themselves so one of the things i'd always wondered about is how you get a sort of particle parallax effect to work because i'd only ever seen tutorials that use parallax effects on sort of static textures but you can parallax entire scenes and you can parallax pretty much whatever you want so we're gonna do that in this tutorial in order to get the particles to parallax kind of like how you see in hollow knight so let's take a look at how i built this scene looks pretty complicated but it's really just a bunch of simple steps repeated more than once and you don't need any code to do this so let's get started so let's briefly go over my scene setup and if you've seen my previous tutorial about snapping and panning the camera it's very similar i'll link that video in case you want to go check that out but for our sort of side scroll parallax we have a really simple tile map and it's really long and thin because i don't really want to focus on sort of vertical or rather y-axis movement i'm really only focusing on x-axis movement because that's the sort of axis along which i want my parallax effect to occur um got my camera 2d and in my script for the scene i'm snapping the position of the camera to the player in the exact same way that i did it in my previous tutorial i have some collision shapes set up to sort of set boundaries for the player so that pretty much we can only go left to right and then i have my y sort with my player so i'm not actually going to put anything uh in the y sort that's just kind of a standard practice that i do in case there are any other objects that i eventually place in the scene but you can do all of the effects we're about to take a look at without any code and without worrying about a why sort so uh that's the scene setup itself i've already created some actual textures that we're going to use in the scene as well so i've created some different particles that we can experiment with and i drew inspiration from the various kinds of particles you can see floating around in hollow knight we have something that looks like a little spore or like a seed or something a something that looks like a bubble and then something that looks like a dream catcher uh in addition to pretty standard solid particle and then something that looks blurred so i also set up something that looks like i always forget if these are stalag tights or it's still like mites but whichever one these are um i basically duplicated a bunch of them across a width of 1920. so the one thing you want to make sure about is if you're using these sort of textures that you want to parallax that they look like they repeat so if i duplicate this and move it over here as long as there's no sort of weird overlap or none of your sort of pixels get cut off uh vertically or anything like that and it looks like it's going to repeat fine then you should be fine all right so we're back in our scene here uh let's create the foreground first to my scene i'm going to add a parallax background and it always has parallax background but you can just as well put it in the foreground and actually i'm going to change the name to foreground so we don't get confused as a child of the parallax foreground we're going to add a parallax layer and you could duplicate it now to create multiple but i'm going to go ahead and create one because it's the same process for each one of them and so one of the things that i didn't realize when i was first working with parallax layers is that you don't have to instance uh individual textures or sprites you can or you don't have to make individual textures or sprites a child of the parallax layer i should say you can do entire scenes so you can parallax pretty much whatever whatever you want and that's what we're going to do when we get to the particles but for now we'll just do our little stalag whatever they're called textures so into that sprite i'll drag my first texture here there we go so one thing i want to do is under the sprite properties i want to go to offset and uncheck centered and that will sort of get rid of any sort of weird visual things uh with the repeating effect um another thing i'm going to do is for the parallax background i'm going to set the layer to a value at 0 or greater so i'm probably going to do one because i always want these things to be in the foreground but that will ensure that the effect is happening in front of whatever is on the zero or sort of negative integer layers um so you don't have to set that for each thing you can set the layer for the parallax in this case foreground note itself and then everything that's a child will be affected so we got our parallax layer we got our sprite so in our parallax layer properties we're going to go to motion and for mirroring we're going to set the x value to the same width as that texture and i already know that it's 920 and as soon as i do that you can see it creates a duplicate so if i save that and run this scene you can see that it's duplicating along the x-axis and there's no parallax effect yet but it is there and that's a good start okay so to get the parallax effect going you want to change the motion scale so along the x-axis i'm going to change this scale to let's say 1.5 so i want to use a number higher than 1 because this parallax layer is in the foreground if the layer that the parallax node is 1 or greater you want to make sure that your parallax nodes themselves that are going to be creating the effect have a scale that's greater than one so if i save that and restart that scene you can see that our parallax effect now works so that's a bit much for sort of this particular layer but we're going to add some more and we're going to make sure that each layer has a different motion scale and that will give us a nice sort of smooth transition between the different rows of uh textures that we're going to use so this is the basic process i'm going to go ahead and create a bunch more layers or a bunch more rows rather and then i'll talk about how i did that once i've created those there we go so it's 1 all the way to 0.5 basically let's check that out there you go so you can already see our real parallax effect in action so one thing i want to do is make sure it doesn't start repeating so you can kind of see they're all kind of lined up like that i want to offset the x value of the repeating effect so that it gives us a little bit more variation and doesn't look like this sort of weird duplicated effect for each row so starting with layer two under offset i'm going to basically just set the x value of the offset to actually it can be anything because the repeating effect will still work as long as these values are different so let's say minus 500 for that one for layer 3 we'll say plus 500. for layer 4 uh we'll say let's say [Music] -300 and from layer 5 we'll just say um let's give it an entire 960. there we go so let's check that out so you can see right away from the beginning the rows are a bit more staggered so it gives a little bit more of a natural appearance to those rows it's a bit harder to tell that they're actually the same all right so another thing i want to do is for the rows themselves i want to change the color value or rather i want to modulate them so that it looks like the rows closest are darkest and the rows closest to the player are sort of lighter or more visible so for our fifth layer down here for the sprite itself i'm gonna go to visibility modulate and change that all the way well pretty close to black this one will be even lighter and then very first one i won't mess with so another thing i want to do is actually change the size a little bit to give a little bit more variation i'm going to sort of manually drag the sort of bounding rect of that shape up and down just to give it a bit more variation i make that one tall make that one kind of a little shorter and for that one we'll make that one tall actually i'll go back to that one and make that a bit shorter and there we go you can see it's relatively easy to create a pretty cool parallax effect you just want to think about how your layers look on top of each other and then make sure your sort of relative motion for each one is a bit different to give you that nice sort of gradient between the rows so that's our parallax effect for our foreground i'm going to go ahead and do the background so we can see what that looks like it's the exact same techniques instead of using a number greater than one i'm going to use numbers less than one so i'll do that and come right back there we go get a nice layered parallax effect in the foreground and the background so the crystals are a bit harder to see because they're all the same color i'm going to modulate these as well but for each one of these instead of making them darker i'm going to make them different colors so let's say you know what i think my layers are actually not correct that one looks like it's in front let's put that in the back there we go so i need to rearrange these a little bit that needs to come there oh okay there we go i actually had these in the opposite order um so they were sitting on top of each other but let's take a look and see what that looks like okay that's actually a bit easier to read um so yeah definitely make sure you pay attention to the order your layers are showing up in so i've actually already created the particle scene that i want to use so let me show you what i did it's its own scene with the particles 2d node as the root and then let's take a look at how i've set up these particles so for the texture i'm just using the standard solid white dot and you can use whatever texture you want it's the same process and then you just play with the parameters but underneath time i have my lifetime at two seconds pre-process at two seconds so it already looks like it's been running for a little bit when you sort of enter the view rect speed scale 0.5 just to give it that slow casual look under drawing i've set the sort of visibility rect to be equal to the size of our viewport in this case it's 1600 by 900. under process material it's a particles material and you need that otherwise it won't work at all under emission shape it's a box and i've set it to slightly less than the full size of the viewport 1600 by 900 so under gravity i've set everything to zero because i don't really want my particles moving in any one particular direction but under initial velocity i've set initial velocity to 20 and then randomness to one and that's how you get that sort of effect where it appears that each one is sort of drifting in a random direction and that's pretty much it so you can create whatever effects you want with your particle scene by messing around with all these parameters but let's take a look at actually adding this back into our parallax layers here so instead of using the layers that we've already created i'm actually going to create some new parallax layers and i don't want to use these because some of the mirroring is a bit off like for mine the mirroring on the actual objects is bigger than the actual viewport which is knight which is 1600 by 900 um so you can avoid that problem and save yourself a headache just by making everything the same size but i'm going to go ahead and add a new child node for a parallax background and i'll rename this particle parallax 1 and then i want this to be sort of at the same layer as the player so i want it to be behind my foreground objects here so i'll move that right there and then to that i'll add a parallax layer and then to that i'll instance my particles seen here so that's parallax particles and there we go you can already see they show up but just like i moved the different layers for the objects i'm going to move this layer up to where we can actually see it so somewhere in the center there there we go so under this parallax layers parameters i'm going to go to motion i'm going to leave it at 1 because it's right where the player is under mirroring i'm going to say 1600 because that's the total width of that scene and make sure the layer is at zero because if you remember the foreground stuff is at one the background stuff is at negative one so for this one i wanna make sure it's at zero just so it's in the middle there and if we take a look there we go so you can kind of see the particles are showing up down below here that's because the little stalag whatever is on the in the foreground aren't completely covering up those gaps um and i could go back and change that but that's fine that's just something you can fix when you sort of fill that space in your foreground that's really more of an art direction thing but just to complete the effect this is how you do it so that's pretty much it i'm going to add a couple more layers of particles but the process is exactly the same and i'm going to use some different textures so let's see what that looks like all right there we go so i've added one more layer of particles in the foreground even closer to the camera than the sort of dark colored objects in the bottom of the screen here and you can see how they sort of move in front of everything and parallax properly so it's the same process as the original sort of particle scene that we just looked at so you can add as many as you want as many as make sense for the scene and then you can change up the textures to create different effects with different kinds of particles etc so that's it i think there's probably some more stuff you could do with blurring certain layers using shaders and stuff like that to give it even more of a realistic effect uh but i might save that for another video i think that's enough for this one hope you all enjoyed and hope to see you in the next video thanks everyone

Channel: Nevoski Studios

Views: 1,009

Keywords: #hollow knight, #godot, #indiegame, #gamedev

Id: HFa_VIRhpWo

Length: 16min 58sec (1018 seconds)

Published: Sat Jul 10 2021