Godot 3.2: Let's Build a 2D Platformer!: Part 8 (Parallax Backgrounds) #godotengine

hello and welcome our 8a let's create a 2d platformer in the Godot game engine my name is Colin and this tutorial not so many series will be creating this 2d platformer video game of course in this game you control the player on screen using keys on your keyboard of course you can walk run jump and fall you can collect coins get hit by enemies squash enemies shoot fireballs do wall kicks you know how to do platformer games work of course this is part 8 in this Mei series if you've not seen parts 1 to 7 I'll put a link to this whole playlist with all my cadeau 3 tutorials up on the screen right now so that's a playlist you can go ahead and check out if you've missed any other previous parts of this mini series so in our project right now we have a character that can move on screen he can walk and jump and fall and explore a large level and the camera will nicely follow him around the world and as of the last video in this mini series we added one-way platforms if you've not seen that video I'll put a link to that video up on the screen right now but as it stands in our game our game does not have a background the background is gray so in this video we're going to be adding what's called a parallax background a parallax background is a background made of multiple layers that move at different speeds this is the same effect this parallax effect is the effect that you get when if you're in a car moving really fast maybe you're a passenger looking out the side window well things that are close to you like trees or lampposts will move really quick as they go past you because they're very close to you whereas if you're looking off into the distance things like clouds and mountains will move slower from your vantage point because they're farther away so if you have multiple layers of backgrounds like lampposts and trees and mountains that are kind of nearby and then mountains that are way far in the background they'll all move at slightly different speeds and this gives you a 3d or pseudo 3d effect that we'll be creating in this video so let's go ahead and open up the kajol editor of course if you like this video over learn something please go ahead and click on that like button post video it really helps out me in my channel if you want see more videos like this one in the Godot game engine or in blender or other technology click on that subscribe button as well and click the bell icon to be notified whenever I upload a new tutorial so the first thing we're gonna do is we're gonna grab some images for the background of our game and so I'm gonna be giving you a couple of link options in the description area below this video on YouTube for this folder which contains just two pictures entirely a purple picture which will be the background of our game the sky color essentially and I'm gonna be giving you this picture which is a rather abstract set of kind of cubes or blocks or particles I'm not quite sure these we're gonna use as multiple layers in our game and we're gonna recolor them and rescale them depending on what position forward to back like nearby or far away they are in our scene so it's gonna look quite neat with all of these blocks at different sizes and different colors move at different speeds in the background this checkerboard pattern if not aware means transparency I mean see-through areas of this picture file and that's possible because this is a dot PNG picture file which can contain transparencies in some cases so I'm going to copy this background folder by the way the links that I'm giving you in the description area below this video will give you a zip file that you'll need to unzip and then you'll get this background folder and then you can copy it so I'll right-click and copy and then I'll go into my platformer game a project folder where I've got an assets folder if I go in there I'll got my player game sprites the pictures for my player and the world tiles the blocks of my world and I'll paste right click the background folder right there so if I go back into the Godot editor it will very quickly import those images and now in my file system dock I've got in that assets folder those two not the world tiles the background images right here now you add background images in Godot using of course a node so I'm gonna select my level 1 the root node of this scene and I'm gonna press the plus button what I need just search for in here is called a parallax background node so if I search for para pa RA I'm gonna find two nodes that I eventually will be using a parallax background is the one I want to add right now but there's also a paradox layer which we're gonna add in just a moment and these two things need to be added in a special way in a specific order so that they all work together you can have multiple parallax layers which we're gonna have as part of an entire parallax background so I'll select products background and press create that will become a child hopefully of your root note so if you collapse that level one it'll be you know directly a child of level one the products background so this parallax background doesn't do a whole lot on its own it has if I selected some settings in scroll but really you can ignore these because this parallax background node works really really well with Steve's camera 2d so when this camera 2d moves in when you're playing your game well the parallax background is gonna do some pretty neat things but it needs some layers so I'm gonna select our parallax background node that's important and I'll press the plus I'm gonna add that parallax layer so again you can search for a PA or a and then find parallax layer I'll double click that parallax layer is now a child directly of the parallax background node and again it's self if I select the parallax layer it does some things under motion especially we can tweak some of these things but you'll notice there is no spot for a picture of sprite for us to bring in one of those two sprite images for our background that you want that's because a paradox layer can have multiple sprites and that means we're gonna be using sprite nodes so I'm gonna select the parallax layer node and press + this is how we add a sprite to a layer we're gonna add a sprite note so I'll search for sprite there it is I'll double click on it and there we go we've got this nice set up here where we have a parallax layer it has a child sprite so what do I do now is name this parallax layer I'm gonna call this I'll double click purple sky not Purple Reign purple sky okay I'm going to select the sprite both a child of purple sky and I'm gonna drag in my set to background that's my purple picture over into the empty texture slot again of the sprite of the child of purple sky and there we go we've got that purple sprite and if I press play seen of course I've got my character there he'll fall down well we can still see a gray background and that's because well the purple sprite is up there and it's not big enough but also it's not gonna behave in the way you want you will not tile yet until we set up the parallax layers mirroring options but we have a problem this purple sky picture is only 640 pixels wide by 480 pixels tall how do I know that well in Godot I'll close my game for a moment in Godot if I actually double click on this PNG picture so I'll double click it will open it up in the inspector and you can see right here is 640 by 480 now my game window if I look at my cameras kind of viewport box depending on your games your project settings your camera box might be the default like mine which is 1,024 pixels by 600 pixels and if you think about it I'm gonna move Steve over to or right about there this purple sky I'm gonna move this over to be centered the purple image has to tile at least three times left and right to fill up my game window so if this purple picture happened to be up at the very top left corner of my camera's view well I would only need two of these purple images to tile across left and right in my game but as it stands you know they're going to be a copy of it here and here unfortunately tiling using a parallax background will only happen twice so you can only get twice the width across of your picture and twice up and down so really you can have a 2x2 repeated section of your background picture so we need to scale this background picture this gets a little bit confusing because there's multiple ways you can scale a sprite when you have it as a child of a parallax layer node which we do if you select the parallax layer itself so the purple guy a note you can change the scale of motion which is not what we're gonna do we'll do that in a few moments we want to change the way our background moves but there is a transform section and you can change the scale this way I would not recommend it for many reasons mostly because it's a little bit finicky and buggy in our viewport you don't get to see your results necessarily instantly near viewport I would just stay away from this instead I'm gonna select the sprite itself and it has of course transform properties including scale so if I turn scale up to 2 & 2 it'll be twice as wide and twice as tall now this looks like it'll fill that camera area this lighter purple square and it will but one thing you definitely need to do is turn off centering what I mean by this is when a parallax background moves your pictures and repeats your picture again and again well it's thinking that your sprites are all based with their origin at the top left corner of the picture but Godot by default put sprites origins at their center so I'm gonna select the sprite and under offset I'm gonna turn centered off so I'll deselect that you should do that for any sprites that you ever use that are part of a parallax background okay that's very very important so now if I go ahead and play my scene I should have a purple sky area that's twice as wide and twice as tall but of course it's not tiling across the screen now the way Godot tiles across the screen in other words feels your world is it does it intelligently as I said a few moments ago it only tiles a maximum of twice across your screen but as you're moving through your game it'll put a background where your screen is appropriately and as you keep moving it'll kind of put a if you're in this part of your game level it'll put a purple a background picture here and as you move it'll kind of move it over or kind of leapfrog it and put the next copy on the other side of it so if you keep moving it'll fill that space in but again if you don't uncheck centered that won't worked quite properly to set this Mearing or titling up I have to select my a parallax layer my purple sky node and in its inspector under motion I'm going to turn on mirroring now this mirroring value X&Y lets you plug in how many pixels is you want to repeat the background picture by every single time in other words it wants you to tell it how wide your sprite is left and right and up and down now the original sprite was 640 pixels wide and 480 pixels tall but we've made it twice as big in this brights actual settings right here so in purple sky I'm going to change the mirroring values here to 640 and I can actually do math rate in this box I can say 640 then put an asterisk which is shift 8 on my us keyboard and that means multiplication and I'll put 2 and I'll press Enter so I'll give me 12 hundred and 80 here I can type 480 asterisk 2 and I'll press ENTER and I get 960 and the most that now the image the purple background is tiling and again that's because these values came from the sprites actual size which if I double click on this background picture its 640 by 480 and then I scaled it up by 2 which means twice as wide and twice as tall which means the actual picture should tile and it actually is the size 1280 by 960 I hope that makes sense but the slides that we're seeing on screen now is actually not that size it's actually twice that line twice that tall because we are now mirroring if I turn these numbers off to 0 and 0 well that's the doubled size it's actually gonna repeat at that number so 640 times 2 and then 480 times 2 and now if I press my placing button to test this out well I should see purple absolutely everywhere so if I jump and I fall and I move around my world I shouldn't see any gray happening at all if for some reason I forgot to turn off centered for my sprite if I turn centered back on and maybe I didn't have a scale set to one where I hadn't changed it to two and two so I left it at one and one you can see now it's tiling the wrong amount because I have it set to tile at every twelve hundred and eighty and not one time six hundred and forty so if I go back to purple sky and change this to 640 by 480 well it's just not gonna work I'm still gonna get a gap at the sides and bottom depending on how I move this around and it'll kind of fill in see how it's filling in intelligently the areas to where I'm moving on screen is just not big enough though that's why we're scaling our pictures to be larger and we're adjusting our mirror settings to match so again I'm gonna select my sprite make it scale two and two and that means that the layer needs to near every 640 x 2 and 480 x 2 hopefully that makes sense let's go ahead and add another layer so I've got my purple sky layer it's done I'm gonna select my parallax background I'm gonna press + we're gonna add another parallax layer so right there I'll double click this one is gonna be called nearby blocks okay so these are the blocks gonna be closest to our game world not the mountains or sky or clouds in the background okay so this nearby blocks layer it needs a sprite so I'll select it and press plus I'm gonna add in my recent list I'll just double click on sprite there we go I'm gonna drag the tiles in to my textures empty slot there there they are the very first thing I should do is select the sprite node and go to offset and turn off centered of course to make sure the picture is oriented to its top left corner and because this picture is again if I double click on it down here I can see it's 640 by 480 that's not gonna be big enough to tell properly so I'm gonna select it the actual sprite go down to transform I'm gonna set the scale to 1 point seven-five by 1.75 and press Enter so that's wider than the actual camera now I believe so that should work just fine for the mirroring settings which we're about to change so I'm gonna select that layer note that parallax layer and under motion I need to set up mirroring again and this is 640 x and I just scaled it 1.75 so I'll use the same number here and that's eleven hundred and twenty and four hundred and eighty times 1.75 is 840 I suppose so if i zoom out you can see what's happening here but again it'll tile wherever I'm seeing with my camera when I play my game so if I press play scene well we should see it all kind of in the background image it just work pretty well although it looks like I'm seeing grey here so I'm gonna check one or two things I'm gonna see if I have accidentally left centered off or on yes I have so my purple sky is bright that's why that was happening I need to turn that off and so now if I play my game hopefully I won't see those grey areas you probably saw my mistake because I was making it a few moments ago okay so it works but I don't have that parallax effect what I mean is that these blocks and the purple sky even though you can't tell because it's just one solid color are moving at the same speed as my camera in other words you know I don't see any of that 3d effect because these background patterns move at the same speed as the tiles in my game to change that what I need to do is select the layer that I want to move at a different speed so my nearby blocks are gonna move quite quickly and I'm gonna change their motion scale so by default the motion scale is set to 1 and 1 that means the same speed that your camera is moving but if I turn this down to let's say something like 0.7 and 0.7 or you know what I'm going to exaggerate this I'm gonna say zero point six and zero point six they will move a little bit slower and you'll notice that so I'm gonna press the play scene button and the game will load and as I move around you should notice that the blocks don't quite move that they pattern in the background doesn't quite move at the same speed as my background you can see it takes longer for those purple patterns in the background to move across the screen which gives it a kind of a cool effect the lure you set that number the slower they will move in the background like they're being pushed farther into the background like background mountains or clouds in the back of your scene so if I change nearby blocks down to let's say 0.3 and 0.3 well they will appear more distant because they're moving less as the foreground still moves it's fast speed hopefully you can tell that's happening on the screen but I want to have different layers of these blocks at different sizes and have different colors of these blocks that's quite easy to do what I need to do is I'm gonna change these nearby blocks motion scale up to let's say is 0.7 and 0.7 because they're gonna be the ones that are closer up to the scene so they're gonna move faster so 0.7 the higher number is the faster one is the speed of your camera which is the fastest normally and I'm going to duplicate this little sub branch this nearby blocks branch including its bright so I'll select it and right click and say duplicate and now I've got nearby blocks too I'm gonna name this node which is another layer we've made a duplicate layer here I'm gonna say middle blocks and right now these blocks look identical so we actually can't see any difference between them and they're in the same spot but they're also now in front of the nearby blocks because they're lower down in our node tree stack here so I'm gonna actually drag this above the nearby blocks and let go so now it'll draw the middle blocks first and then nearby blocks last which means that nearby blocks will be in the front and I'm gonna scale the middle blocks so again to do that I'm gonna select the sprite and I'm gonna go to transform and I'm gonna change the scale up to maybe 2.5 and 2.5 and now it looks kind of messy here because they're all the same color we'll fix that in a sec but because we just scaled the sprite we have to change it's mirroring settings so it'll tile properly because right now the tiles will actually overlap and it won't look good so with the middle blocks node selected I'm gonna change the scale the mirroring size to 640 x 2.5 that's how many we scaled that sprite by 2.5 and that should be on both V X which I already did and the y here 480 x 2.5 and I'll press Enter now how do we change the coloring of these background kind of pattern blocks that's really easy in Godot you have some visibility properties of most kinds of nodes at least ones that you can see on-screen and in this visibility category you have a modulate value with a white box which is a color picker so with either a sprite which has this section - including module 8 or the parent of a sprite a parallax layer you have module 8 and you should remember which you're going to modulate the sprite itself or the layer ok choose one or the other and then stick to that pattern whenever you're changing the colors this lets you change the colors of that object now it's not a direct change like these shapes obviously are not white like our color picker but the modulate value lets you influence the actual color of the sprite using a blend mode if you're familiar with Photoshop or and layer blending modes like multiply or add or soft light or any of those blending modes this is kind of what's happening here I'm not sure which one it is obviously but if you select a parallax layer like the middle blocks and you click in here and you change the color you can see that this ready color is influencing the color of these blocks now this is obviously too much I might pick up purpley kind of a color I might do a subtle change but as you can see that's fairly nice you can also turn down this a slider which means the Alpha value to make that whole layer at any sprites that are a child of that node transparent so you can turn the transparency down including the transparency of the original color blocks under visibility if I select nearby blocks and turn down modulates alpha value I can make those transparent as well so it's really that easy I'm gonna do one more layer in the background I'm gonna make them quite a lot larger though so I'm gonna select my middle blocks by the way I haven't actually changed the speed of them yet so the nearby blocks motion scale this parallax layer moves at 0.7 the farther I get in the background I should change us to be a lower number to be slower so I'm gonna select the middle blocks and change these to 0.4 and 0.4 that should be 0.4 and press Enter so now if I play my game I should see some of those darker blocks in the background and they are moving at a difference yeah there they are in the background I don't quite like how they're positioned those let's go ahead and see if we can fix that they were kind of off-screen you don't see them in the exact same position that you do in the viewport so I was kind of seeing in this area up where my player was so they were kind of above and below me what I might try is with these middle blocks which are the darker blocks I'm gonna select that parallax layer and I'm going to change the offset to that on the Y value to negative 500 and it's not gonna change it it doesn't change it in my viewport so let's go and see if that worked I'm gonna play my game and yeah now you can see more of those darker blocks in my game that's one of the downsides of changing the properties of the parallax layer and not the actual sprite is that sometimes you don't see those changes that you do want to layer in the 3d workspace and a few port until you play your game if I were to use instead of this offset value I'll turn it back to zero if I change the transform property again of the parallax layer to negative 500 and press Enter I do see that change even though I am changing a property of the parallax layer it did change on screen so now I press play scene hopefully I can see those darker blocks in the background and you can see they're moving slower than the transparent lighter blocks in the foreground I'm gonna do one more distant set of blocks in the background these will be like the very background mountains in the distance so I'm going to duplicate this middle blocks layer and branch so right-click duplicate and I'll move these above the original middle blocks oops I think I put that as a child of purple sky so I'm gonna drag it onto the parallax background and then drag it up properly right there you know make sure all these line up right and I'm gonna double click and rename these two back blocks just like that okay these need to be a different scale so I'm gonna select the sprite and I'm going to change their transform scale to 4 and 4 so they're gonna be the largest and of course that means I need to change the mirroring setting to match that so this layer the parallax layers motion mirroring settings I'm gonna set to 640 x 4 and then 480 x 4 and of course I need to change the visibility settings to modulate this so I'm going to modulate them to be a darker version but also less visible so kind of like that and you know what I might change the hue of them a little bit so that you have a different kind of influence on the whole color scheme and then you can go back and you can change the hue and give different colors to different layers in your scene so that they all have different kind of modulations of different colors so it'll look kind of neat so you know what I kind of like that let's go ahead and see what it looks like before I do that though of course I'd change the speed of motion of that background layer so I'm gonna select it and then we're gonna change us to 0.25 and 0.25 because they are farthest away they're gonna move the slowest okay so let's go ahead and press play seam and I'm gonna move around my level and as you can see hopefully I can see all my layers and they're all moving at different speeds and I like it I think I'm not sure I'm able to see all of my layer so I'm gonna do a little test I'm gonna hide the back blocks layer that's those ones can I see those in my game I kind of lost track of them there can I see them in the background a little bit I think I can see them kind of in that bottom corner but again I'm gonna move them up on my screen so I'm gonna select back blocks and under transform I'm going to set that back to zero because I duplicated the other parallax layer and I'll press Enter and let's see what happens can I see them any better or should I move them up by negative 1000 I'm actually not sure I'm gonna try negative 1000 for the position of that so under the transform of that back blocks layer I'll set Y to negative 1000 so hopefully they've moved up and hopefully I can see them now better on screen and I'll press play scene and hopefully now yes they are in the background I can see one on the right side of my screen and that one right there is moving the slowest and I'll just move even though I've fallen off screen there we go so that will be it for this video of course if you like this video for done something please go ahead and click on that like couples for you it really helps out me in my channel if you want some more videos like this one in the Godot game engine or in blender or other technology click on that subscribe button as well and click the bell icon to be notified whenever I upload a new tutorial check out my Facebook page in my Instagram page in those two places I post sneak peeks and previews of what I'm working on next but that'll be press one thanks for watching see the next one bye bye [Music] you

Channel: BornCG

Views: 32,282

Keywords: Blender, tutorial, lesson, 3D, model, modeling, modelling, beginner

Id: dC6G7Y9qRbQ

Length: 28min 53sec (1733 seconds)

Published: Fri Jun 05 2020

Reddit Comments

[u/VRbandwagon]

Thank you for posting!