Make Your First 2D Game with Godot: Coins, Portals, and Levels (beginner tutorial part 2)

this is a follow-up to the your first game tutorial where we created a player an enemy and learn to code our first game in this part we are going to do quite a bit of work related to level design create points that we can collect see how to design levels and I just have to reach it have a portal at the end of the level that takes us to the next level this will allow you to start fleshing out your game let's get started with the coin you can keep working from your project from the previous tutorial or download the finished chapter one project which looks like that that will give you a clean slate to focus on the level design let's create our coin create a new scene by going to scene new scene and this one is going to be a custom node we're going to make an interactive coin when you think about something interactive that can collide with it has to be a buddy or most of the time it will be an area 2d this is what will go with something that can detect the player hitting it and that will disappear when it does so let's call our area coin and we're going to go to the assets folder drag and drop the coin onto the scene and I'll select the coin sprite expand the transform section and click the arrow to reset the position so that it is centered on the origin our area needs a collision shape let's select the coin area control a add a collision shape 2d and this one is going to have a new circle shape 2d this is the shape that best fits our coin so click it can be a bit hard because of the coin sprite you can hide it if that's the case to click and drag on the handle to expand the radius of our circle to and our circle we're going to add another node to animate our coin this one is called an animation player to select the area 2d press ctrl-a and look for animation player the first one this is a really powerful tool that you can use in Godot to animate whatever you want you can animate literally any property that you will find on any node in your mode tree this can be things like well we will see you can make something fade you can make something bounce this is what we are going to do now right after we saved the scene so press ctrl s to save the scene in source while going to add a new folder let's create a folder called objects objects will be every object that we have in the level that is not an actor and AI if you want so I'll create that folder and say my coin door TSC end in there with the animation player selected you will have an animation bottom docker that appears in the view I'm going to expand it just a little bit and we're going to create our coins animation there we're going to have one bouncing animation where the coin is going to do something like that it's going to oscillate a little bit it's going to bounce to give it a bit of life and one where the coin will fade out like so and with what I've been doing in the view lowering the alpha channel at the modulite property and moving the coin well this is exactly what we're going to do from the animation player click the animation menu to create your first animation using the new option the first one we're going to call it bouncing the coin will be bouncing and this gives us a timeline you can click and drag at the top to set the current time I'm going to use the slider in the bottom right to zoom in a little bit on the time range and we're going to add a track for our sprites position I think we are going to only move the sprite a little bit and keep the area in place or you can try to move the entire area 2d let's try that and see if everything works fine in the game sometimes when you move the area with the collision shape you have to make sure that the collisions the physics engine takes everything into account but that should be fine I'm going to use the box to the right of the timeline to set the animation length the gray area on the timeline let's go with 1.8 seconds should do the trick and our bouncing animation will loop for that you want to click the loop icon to make this animation loop so to start animating select the area T Z our coin and we want to uncheck the rotation key at the top of the screen the viewports in the toolbar and only have the location active so blue in this case this is the key the property that will be automatically keyed on the coin here the selected node when we press the insert key so if I press insert or click the key icon in the toolbar it's going to insert a track a position track for the coin for my area to denote if you have a pop-up that asks you to confirm to create the track you can just press ok this new track that appeared has one key that is going to tell the computer at El Gato to set the coin to be at this position that we see in the inspector when we select the keyframe we are going to move forward in time and with the coin still selected press W to go into the move tool click shift and drag to move the coin up then you can press the insert key to insert a new keyframe on that position track and if you drag your mouse cursor on the animation track you will see that now the coin goes up and down and if you select the second keyframe the y-value is going to be different from that of the first keyframe and what I'm going to make the position of the coin below the origin on the first keyframe so you have to move the coin with the time cursor on the first keyframe and then you have to press insert to update the keyframe to key or to commit that value then when you click and drag you will see now the coin moves around the origin you can press shift D to play the animation from the start and preview it a little bit the coin is moving quite a lot it's moving a little too much that you can press s to stop the animation we're going to reduce the values I'll select the first keyframe and then the inspector change the value to 10 pixels and then the second keyframe I'll set it to minus 10 pixels okay this should be a little better now the animation is a bit robotic the interpolation the way the computer transitions from one key to the next is linear at the moment it means that the value is going to be the average weighted by the time difference between the two keyframes we want to change that to spice up the animation to do so we can select a keyframe and use the easing prophetsí in the inspector you can click and drag on that curve to change the transition between the values so pull the curve to the left and press shift D to see how the coin now moves you can see it gets some kind of impulse now moving and it doesn't really get it moving bad back down so we can select the second keyframe and click and drag the curve to the right so that the coin is going to bounce it's going to go up and slowly fall down and bounce back up as the animation responds it's a little slow maybe at the moment so you can click and drag the middle keyframe to shorten the animation and set the animation duration to let's say one point four and now the coin bounces a bit faster you could give it a really fast bounce one point two seconds I'll let you play a bit with that and see how fast you want the coin to move but with that we have our bouncing animation we're going to add a second one so go to the animation new and we are going to call this one fade out in this case we're not going to be using the default keyframes and the insert keyboard shortcut to key our animation we're going to make our coin here disappear so I'll select the coin first I'm going to reset the position on the coin because when you play an animation you are changing the actual values the actual properties of the node so you are really moving the coin here and as you change animation if you are not careful these values will not reset we're going to animate the modulate property of our coin here go down to the visibility category and click the key next to modulate to insert a keyframe then move forward in time say wanting to make it disappear in point six seconds why not and click the key to create a new keyframe go to creates some kind of color range here for us and if you select the second keyframe now edit the color click and drag on the alpha to make the coin disappear and you can see the gradient updates in real time showing you how this color will animate you know you have to click on the time range to update the preview of the animation in goodl 3.1 press shift D to preview your animation and you can hide the collision shape 2d to see how it will look in game and with that I'm going to make the animation 0.6 seconds long and we are good to go we can add maybe something that's a bit more advanced animations replace code because you could write code in GT script so I made the position of the node here now I'm going to see what I was talking about when you switch the animation back to bouncing and you click and drag the coin stays invisible because again when we use that fade-outs animation we are actually changing that modulate value on our coin node so when you go back to bouncing that doesn't have a modulite track well this color value does not reset to reset it every time we start the animation we can select our coin and in our bouncing animation reset the modulite value here and create a keyframe at the start that way even if we go back to fade out like so and go back to bouncing the color of our coin will reset however we do not want to reset the position of the coin when we fade it out because we wanted to smoothly disappear and the game view exactly where it is if we were to reset the position here the node would jump like so right would jump maybe up to 10 pixels one last thing that we are going to do is at the ends of the fade outs and a Meishan we can actually call functions from our animation because these animations are really setting properties of the node it is similar to inside the script say position equal vector two and putting the values in parentheses except that it's visual on the one hand and on the other hand it will really save you from bugs and it can even save you some performances well this is a bit more technical but this animation system helps you replace code avoid T type code so we can go to the end of our failed animation and click the add track button you want to use the call method track that allows you as you'd expect to call a method so you click on that then you select the nodes on which you want to call any method at the end of the fade out we want to destroy our coin so we're going to select the area 2d go to okay and we can right click to insert a key at point a window helps you to select the method that you want to call it's going to give you a list of all the available methods on the node and all the classes that it extends while looking for Q free on the node class so you can click open to create a key that won't call the Q free method when we reach the end of the animation this will run only in game this will not delete the node obviously in the scene while working with but we will use that so that when the player touches the coin we display the fade out animation and the coin deletes itself magically that's what we're going to do next select the coin click the add script button and want to create a new script called coin GD empty template as usual click create create that new script I'm going to close here are the tabs and expand the script editor now we want to store a reference to the animation player but we can use an unready variable let's write it and I'll explain how it works so unready variable animation player : it's going to be of type animation player and we're going to get the node animation player like so so here's what it's doing unready is syntactic sugar to run that code here before the ready function but when goodö is going to call this function function ready remember it's an automated callback that is built into the game engine and specific to go to' so this allows us to call a function like get node that we would normally need to call in the ready function and to store the result in a variable meaning that when we do that here we get that animation player node our animation player variable becomes a reference to this animation play a node in the same tree we're going to use that one when something collides with our coin here let's go back to the coin in the view we're going to update the area to these collisions in the collision tab and it's going to not be on any layer where it could be on the coins layer here and it's going to mask the player it's going to detect collisions with a player and then we're going to use the body enters signal that we're going to connect to this coin itself so whenever a body enters the area whenever the player hits the area we are going to play that fade out animation so click connect select the coin itself and here I'm going to rename the method we don't need the name of the node in their own body entered is enough because while connecting this node to itself click connect to create the function in here and we're going to use our animation player I'm player dot play and you can see good autocomplete the animations want to play fade-out I want to do one last thing it's making it so when we play the game the coin will automatically play the bouncing animation you have a button right next to the animations drop-down list that allows you to auto play an animation upon loading that note we want to make it active for bouncing and when you expand the list especially if you have lots of animations you will see that the animation that will play by default will be shown here with that lets us test our coin go back to the level template and we're going to search for our coin don t SC n place it in the game world and we can select it drag it round and ctrl D to duplicate it so I'm going to make three coins now we can test the game as we see our coins in action and ah that's the part I forgot yes that is why we should not animate the area to denote straight remember I told you that we are directly modifying the position of our node here well when you place the node the coin somewhere in your level you are changing its position you can see the position is over 1000 on the x axis here for example and our animation in the animation player is going to reset the position of the node let me right click on a coin set editable children to show you I'll select its animation player and look as soon as I click on the timeline the node jumps back to the origin and it's animating and it's there it's just a ditz up here right next to the origin so we have to go back to the coin scene to change that animation so that we don't animate the area but that we animate the coin sprite to do so it's not that complicated you can change your animation paths any time so you select the animation player and you see where you have the position here I'm going to click on the double arrow to expand the area you can click where you have that position and you actually have some kind of code for the path to the property that you are animating I'm going to replace the dot with the name of the node that I want to get to so dot would be the parent here the route of the scene I think coin but if you replace it with lowercase coin it's going to animate this sprite instead and you can see that the animation player created a second category that shows the icon of the node while animating so now you can see one just animating the sprite without moving the collision shape 2d and welding to do the same on the fade-out animation it's not necessary it's good so we just have to change that track press f5 after having done so and now you will see your coins bounce and when you touch a coin it's going to fade out the fade out is a little too slow so I'm going to go back to the animation player fade out animation and select like click and drag to bug select the two keys shorten the animation to 0.4 seconds let's say and reduce the animation length press f5 to play it again and now when I go over the coin yes they fade this is enough to get started with the coin let's say have our animated coin that we can collide with and make disappear one last little note if we play the game let me show you that that animation call function track is working so when you test the game in the editor in the scene tree you have two tabs that appear the local and the remote one local is your game 3 your scenes that you are creating in the editor and remote is the actual scene tree in the running game all the scenes that you create in your editor get converted to that big tree of nodes that are running in the game you can see that we just have a route added to our level template scene here but look at the coins when I move the player and go over coins at the end of the animation the fade-out animation they disappear from that tree they really get deleted and that's what the hue free function does it makes the object deletes itself or asks Godot to make the object disappear at the end of the frame or whenever it's possible performance-wise so you can see that the animation player is really doing something that is like code it's just not written with text but with that we can move on to the next bars creating the portals that will allow us to teleport between levels ok let's create the portal we're going to make a portal that will make the screen fade to black and take us to the next level continuing from our project let's create a new scene file a portal and there again we have some interactive element here we're going to create an area 2d let's call it portal 2d and we are going to put a sprite in there so you can look for the portal in the file system tab drag and drop it onto the view I'm going to go to its transform select the portal sprite the to transform and set the exposition to zero so that it is centered on the y-axis I'm going to make the sprite higher up than the origin here so that when we place the portal on the ground in the level the portal is just at the right height above it we are going to add a collision shape for it let's create a collision shape to T and our portal has a shape of a capsule luckily for us there is a capsule shape TD that we can create just for that press W move it up to center the capsule on the portal then cue to go back to the select mode and click and drag on the handles to respectively change the general radius of the base circle of the capsule and change its length you can click on the capsule shape to change its parameters as well from the inspector so that you can change it much more slowly by pressing ctrl and dragging on to the radius and the height values I'm going to zoom back so that we can add our node to transition to make the screen go black we are going to make it part of our portal select the portal node and while going to add a layer a canvas layer to make sure that our transition effect is above everything else in the game press control a and look for a canvas layer now this layer we can call it transition layer for example whatever and it's going to be layer let's say 100 it has to be above everything in the game so we're going to use a high number now we're going to use a UI node again they're called color rectangle that we can use to fill the screen with a flat color black in our case it's a selected transition layer ctrl a and four-color rectangle now I'm going to go to layout for rectangle so that it fills the entire screen and change the color in the inspector to black note that with UI nodes if you place them as a child of no 2d you will see the color rectangle collapse this is because this option this layout option to use the four rectangle is the four rectangle of the parent of the UI node when you are under a simple node or a layer it's like there is no parent so it's going to use the entire game window or viewport but when you have a parent node 2d our area TD itself is represented by a point in space that is why the color rectangle also becomes a point in space when we set it as a child of the portal anyway we have our node here we are going to set the color to be fully transparent by default at the start and to animate it guess what we're going to use the animation player once again select the portal 2d control a to add an animation player node well I'm going to add two animations the first one is going to be a start animation a default state for the node so this is one we're going to set to auto play at the start of the game and the point of this one is just to reset our color rectangle here so we're going to select the color rectangle and press the key icon next to color so that we have a key for our start color and we're also going to go under the visibility tab and ensure that at first the node is invisible that way it's not going to draw at all in the game which can optimize rendering performances especially on low-end all devices for the anecdotes if you make a node visible and it's fully transparent the graphics card still has to process every pixel of it so the big color rectangle area would fully render even though you can't see anything on screen so make sure that the key on visible here has a value of off in this case and I'm going to set the animation to be zero seconds long so that it just plays sense the values and it's done now we're going to go to the animation menu and duplicate our animation then we're going to go to that menu again to rename our copy of the stunt animation and call this one fade in that Faden animation is going to set the node to be visible so we can select the visible key here and set the value to on then wall in to lengthen the animation make it point eight seconds for example let's say one second to have a whole number I will zoom in a little bit using the slider at the bottom of the screen and go to the end of the timeline select my first color keyframe here right click in the timeline and insert a key then I want to select the color at the end of the animation click the field next to value and make it fully opaque you can see now we have a gradient that goes from fully transparent to pure black and this is going to be our fade in effect we are going to change seen while going to change the level when we touch our portal 2d this will trigger the play of this fade-in animation and when the animation is done it's going to load the next level with another portal 2d for example and will automatically play the start animation our portal 2d which will make the color rectangle invisible again with that we can save our portal to the scene in source objects next to our coin click Save we're going to set the collisions as well on the portal 2d it's something quite important to set up every time you create an area to denote so select portal 2d expand the collision category it's not going to be on any layer and it's not going to be monitor about this makes it so we don't risk having for example the player jump because it hits another area 2d because remember the condition for it to stomp an enemy and have that jump is just to touch another area by making the portal 2d non money trouble nothing else will detect it and we won't get any bugs like these however for the mask we want to keep the player and we want this area to be monitoring that is to say we want it to detect the other nodes in the game so that when the player touches it we will be able to move to the next level ok so well now I'm going to code our portal 2d so that when we touch it all the player touches it they can teleport to the next level select the bolts on 2d node and click the add script icon I'm going to create a portal to the GD script next to the scene we want to make it so our player can teleport to another scene so we need some way to reference to set that next scene for each portal while going to create an exported variable to do so called next scene and the type is going to be packed scene vaccine is the type of the dot T Sen files that are our levels our coin whatever once you save and select the portal TD you can see a next scene slot here and you can drag and drop any TSC and file on it for example a level a new level to load you will see the thumbnail for the level in your inspector I'm going to clear that one and go back to the script editor to make it so well we must set the scene for that portal TD to work otherwise we might crash the game or we might get an error we have a feature to do the same thing we have when we create a node in Godot that needs some configuration we get that warning sign here it's called get configuration warning and we just have to in the Gd script file create that method so I'm going to go function get configuration warning this starts with an underscore and from that function we return a string if we want to display a warning let me show you how we are going to do that so I'm going to return an error message for example the next same property can't be empty and wanting to return that only if there is not next scene else will return an empty string and if the string is empty the warning sign will not show in the editor so you can save and when you go back to the editor you get that warning sign right now it's not working properly though because in order for this code to run in the editor because right there we need that warning to display in the editor we have to add a keyword at the top of the script called tool tall will make it on the code that you write here will run in the viewport and the editor so you want to be careful with that as well so that you don't write code that moves the node all things like these that animates it from that GD script file otherwise it will start moving in the editor anyway so now with our get configuration warming we should get a warning pop-up when we click the warning that gives us our message next scene property can't be empty until we add the next scene so if I fill it I have to close and reopen the scene in this case and you will see that now we have a next scene set the warming disappeared and if I reset the property next time you load the scene or something like that it will show again now this is a little bug with Godot 3.1 in goodö 3.2 yeah you see as soon as I open the script or change the view the warming updated now we are going to add the teleportation code so we're going to create a function to teleport our character and I will expand the view a little bit I'm are going to create a function called teleports it doesn't return anything it's only going to play the fade-outs animation on the animation player so we have to get this animation play a node to use it in our script I'm going to add an unready variable again at the top of the script call it an 'm player it's the same we did for the coin really it's going to be f type animation player and i'm going to get the animation player node note that there is a shorthand for the get note function in Godot it's the dollar sign that can use instead and if you start typing the name of the node as you will see it autocompletes as well so you can write either the get node function or use the dollar sign now we can use our an employer variable that stores a reference to our animation play a node from the scene to play the animation when we teleport want to play our fade-in animation or we could call it fade to black or something like that that would probably be a bit more precise then we want to wait for the animation to finish and then we will ask guru to change the scene to change to the new level to wait for the animation to finish we can use a keyword called yield in GT script so yield is going to wait for some node to emit a signal in our case before it continues with the function so let me write the end of the code and I'll explain what's happening in greater details what I'm going to yield on the animation player so the first parameter is going to be the node we wait for and the second parameter is going to be a signal okay and if you select the animation player and go to the node tab you will see that it has an animation finished signal we wait for the animation that's currently playing to finish that's fade in and after that we're going to ask you to change scene for that we need to get the scene tree the scene tree is an object that stalls the entire tree of your game if you want so you have to use a built-in function called get tree to get it and this tree has a method called change scene - and as you can see it takes a pact scene as an argument so we can give it our next scene and it will change the current scene playing in our game to that next scene all right the yield keyword you can use it with a function or a node and it will wait for that no--don't function to emit some kind of signal to send back some kind of message and it will pause the function on this line until in this case the animation player has finished the animation now we need to add a call to that teleport function because we are not using it anywhere just yet and to do so I'm going to use a signal on our portal so a portal is set to detect when the player collides with it if we go to the node tab we can use the body entered signal and connect it to the portal itself once again just like with a coin because we aren't connecting the node to itself I'm going to call the method in the node and score on body entered click connect and I'm going to move that function up at the top of the script here at the top of the functions list and when a buddy touches the node we know that it can only be the player because of the area to this configuration and we are going to call the teleport function save that and what we're going to do here is create a new level so that we can test our portal so I'm going back to my level template here in the level template I'm going to create a portal 2d drag and drop it on to the scene I'm going to make it next to the player for quick testing and we get that warming because we have to add a next scene to that be careful that you can't point to this current scene or you can't make two scenes points to one another so level one goes straight to level two and back to level one with the setup that we have it might make the game crash onload because each scene is going to load one another in an infinite loop but if you are going to another level or another screen every time it's not going to be a problem just don't cross reference levels now I'm going to right click on the level template and duplicate it okay it's going to be level Oh - for example I mean to double click on level OH - to open it and remove some of the stuff that's in it so it doesn't look the same as our first template select the tile map I'm going to ctrl shift right click and drag to remove lots of tiles and just change the look of the landscape a little bit alright so going back to my level template with the portal 2d selected I'm going to drag my level 2 into the next scene slot and with that you can play the game and touch the portal which will fade the screen to black and take you to the next level congratulations you are getting really close to having a complete little game okay so our level or one scene is a copy of our level template I'm going to rename the first node at the top to level oh one and we can get started starting with the tall map so the way I'll work on levels is I'll create some base layout that I will use to try to guide the player and I will press ctrl shift f LM to go into a kind of distraction free mode to be able to focus on my towel map I'll erase the first wall ctrl shift right click and drag and then extend the floor of my level to be also able to extend the pan from the editor because it's locked to a certain distance compared to the end of the level for now so I'm going to keep the level well level do you have the floor extended far to the right so that the player can only move to the right you have a wall on the left side after all and while I'm going to place the portal for the end of the level either aligned with the start or a bit higher up if you want to have a challenge where the player has to jump up so I'll give me some space to start working and then think about the mechanics available and the game so I'm going to press f5 to play my level template and what do we have we have the ability to collect coins to storm Vietnamese and we can use that to jump we're going to increase the storm impulse to be able to jump higher and that's about it we have platforms yeah so the kinds of things I want to do is teach the player to jump teach the player to jump on enemies so this should come naturally thanks to the shape of the enemies and teach the player to yeah jump over obstacles in general so I'm going actually I'm I'm going to hide a point for tall cone and enemies to start with and I'm going to add some block here that the player will have to jump over you can make it small but this will teach the player to jump because otherwise you don't get stuck in there this will also serve as a wall to block the enemy so we're going to place the first enemy right after that in between the first two places where you have to jump we'll also use coins to guide the player so say I want to teach the player to use platforms to jump higher so I'm going to make a an area that's too high from a player to jump over and you will have to jump on a platform that's a bit higher up and I'm going to place coins afterwards to guide the players arc of motion note that I'm making each of these blocks four tiles wide this is for let's say visual balance I'm trying to have some consistency in how large my platforms are also so that the player recognizes that the platforms are the same size and they can know how to jump over them we are going to make another challenge what can we do we could have a block here that's going to prevent the player from going over while going to have a path that forces the player to go down and have maybe an enemy that's going to fall in the pit along with the player maybe that's a bit too early to do that so you have one enemy here you're going to have the coins then you jump on this platform the enemy goes down it's going to fall down and you have maybe I'm going to make the enemy come from far to the right so that basically you remember that the enemy is inactive until the player sees it until it enters the view so my idea is that we're going to make the enemy move to the left fall and follow the player to the right so this will force the player to move forward fast to keep moving I'll have to test this out in a moment and then we're going to have maybe another block here where you will have an enemy and you will have coins aligned in the air that you can only grab if you stomp the enemy so maybe in the middle of this platform to give you some kind of rhythm where you're going to fall down I should really draw this so you're going to fall down an enemy is going to follow you enter the bit and start moving towards you you have some kind of a trap here with another enemy that's going to follow from the right and you will have a line of core means up above that enemy that can jump grab and fall on the platform to the right and that should be it for the the start let's make it the the first level for now so now once I have that base layout I'm going to fall back to my enemy coin and pause on those I'm going to select the portal press the W key to move it to the end of the level like that maybe we could have it on a pedestal like something like that well here I teach the player to jump up maybe to go up to the portal at the end I don't know let's see then I'm going to start with the enemies so I'm just going to move the first enemy to the right also going to close the output window and ctrl D to duplicate it have an enemy up there on the right and control D duplicate it again to have an enemy next to that last platform let's say and we can also do we add one around the portal area I think it's nice to have the last portal the place where you have the portal be relatively safe one thing we can do maybe is have some kind of last challenge with the enemy here that's moving left and right I don't from though I have to think about it but have some kind of bit and allow the player to either stomp and jump up to the portal or to have to backtrack jump on this platform and make a long jump to the portal let's see the idea again is to exploit the game mechanics here to their fullest so we're going to have coins here to guide the players eye and to help them get the right arc of motion jump at the right time from the right position coins really help you guide the player throughout the level that's their main purpose because the scoring part is not that interesting to me it's much more of a visual aid as far as I'm concerned so I'm going to select my three coins ctrl D to duplicate them so that I have the same kind of arc hair that I can reuse later in the level I'm going to control the again move the coins to the enemy and I want to guide the players eye ahead of time tell them okay you have to fall and that bit and they are going to see the enemy at the same time so this will lead the player to not jump but let them fall into the pit here I'm going to have the line of coin a vertical one in the middle of the empty area so you can consider it as an extra challenge and I should note one thing at this point it's that snapping is on I'm always working with snapping so you can see the blue magnet icon in the toolbar you can press shift s to toggle it on enough and G to toggle the grid on enough it's the default grid at the moment which means that you are moving the nodes by ten pixel increments now on depending on the grid you are using for the tile set in your game you can increase that value to precisely aligned nodes easily so say my toes are probably 80 x 80 here I'm going to click the three dots back to the snap icon and click configure snap and set the grid step to half at our 40 times 40 this will help me to align my coins a little more easily I think that smart snapping is getting in the way right there so if you only want grid snapping to work yeah you have to check snap to grid and then in small snapping you have to be careful about which are enabled here so small snapping allows you to snap to the other nodes around the coin like the enemy's position those kinds of things and if you can see the note not just snapping to the grid but snapping to lots of points it's because it's trying to align with other nodes in the level smart snapping is really useful when you are creating user interface when you are working on inside scenes but for level design sometimes it gets in the way so I'm going to remove the snap two node anchor sides Center and other nodes maybe the last option is enough here but with that now the coins are going to be much easier to align are going to snap to the grid steps very naturally we can add maybe last section at the end of the level well we're going to have an extra challenge an extra enemies I'll select the enemy ctrl D duplicate it place it in this area before the portal and I'm going to update the Tal map here form the coins for now and expand that ground add some area at the top where the portal is going to sit maybe I'm going to carve a bit more to put the portal to the right and have some kind of element that's going to block the player I have to find the right size here maybe the area is a little too narrow let's try to have some stairs just like we have in Mario okay so you're going to have stairs here on both sides let's see if you can jump from here to there to the portal I'm not sure but let's try this so we're going to have an enemy in the bit and have the portal at the end of that little challenge I'm going to go back to the portal and my scene tray to move it to the right I'm going to move my enemy a bit to the end of the pit note that having the origin at the bottom of the enemy as well here and using a grid that aligns with your tile map will make it snow you can snap the precisely to the ground and that's one of the reasons why in the previous videos we used that trick we had the origin at the bottom of the player and the enemy okay that's a start now it's time to test the level so we can press f6 because we have everything we need in the level to get started oh I forgot one thing that's quite important remember that we set some limits on our camera in the level template on the players camera well we have to change them here and fold the player if you can't and fold it right click and check editable children in the drop-down menu then select the camera 2d go to the limit section and we want to increase the right limit we have to go to the end of the level here and drag a roller ah to toggle the rollers on and off so click and drag on the Left roller and drag it to the end of the level where the camera should stop well we can stop it way before that actually I'm going to drag the roller to right after the portal 70 to 80 pixels let's do that so I'll select the camera again set the right limit to 70 to 80 pixels and that way now we can play the game but f6 play the current scene and we can move forward okay the enemy is a little too slow compared to the player and the bump doesn't make the character jump high enough so we have some adjustments to make and that's often how it will be with levels so I want to move the enemy forward here there the first enemy comes a little too quickly so I'm going to select the player move it back to the left and select the tall map and move that first challenge here to the left so one way we can do that if you have a more complex style map with more types of tiles and you want to copy something that involves a bit more work in your level design you can do controlled B to select some tiles then you press control X to cut and this will allow you to paste be set up the set of tiles somewhere else giving the player a little more space let's see now okay first challenge no problem second challenge okay we see the enemy a bit late stomp impulse is still too low and the last challenge doesn't work we can't really jump to the portal so I have to change that okay so first we have to change the stone pimples on the player so let's open the player scene and we're going to bomb the stump in balls to 1600 let's say close the player scene I'm going to move the player forward in the view maybe to that challenge here I keep pressing f5 and yeah now 1600 allows us to catch all the coins this area does not work so I want to fix it live here so I'm going to make the game windows smaller right click at the top and make sure that it stays always on top this will allow me to edit the Tal map and to see the changes in real time in the game to do so for this to work you have to be sure that the debug options sync scene changes and script changes well the scene at least is on these should be on by default but just in case you deactivated them for whatever reason you don't want to make sure that they aren't on I'll select the tile map again and create a new square of levels okay so now I'll be able to reach the portal falsi but the problem is the enemy at the bottom and the fact that I get stuck if I fall so I won't cough maybe a path from behind the poll all here and I'm going to create platforms like these let's see how can we do that in a way that's interesting okay let's try this I'm going to make a little tunnel that you can take jump to the portal and for the enemy we are going to move it a bit to the right I know I think it's interesting to see the enemy here on the pit so that you have an incentive to jump to the portal avoid the enemy and then move in the corridor let's see let's see how it goes well we can very easily jump to the portal I think this last challenge is not very interesting I'm just going to make it so if you fall in the pit you have the enemy so you have a chance of being killed then you can jump back on the platform and jump to the portal because I think I think you can jump three tiles you can only jump to okay so I have to select another node to deactivate our map editing mode Q it's like the enemy and click and drag to move it into the pit now I'm going to take my player again in the scene I have to move these coins as well these three coins which ones the ones at the end as well I'm not really aligned with the challenge of the pit okay I'm going to move the player back to the start and test a level one less time to press f6 again to play the current scene okay can jump up avoid the enemy use the enemy as a bumper here and then I jump straight to the portal and this takes me to this empty scene that level 2 because that was the scene that we set on the portal in the previous part so if you select a bottle the next scene variable you want to drag and drop another level scene in that we have level 2 and this is the scene that you will teleport to the next level that will load when you touch the portal and that is it for this tutorial I want to thank you kindly for watching be creative have fun see you and the next one bye bye you

Channel: GDQuest

Views: 89,116

Keywords: godot level design, make your first 2d game, godot beginner, godot collectible, godot coin, godot 2d platformer tutorial, godot 2d tutorial for beginners, godot tutorial 2d, godot platformer 2d, godot platformer, make a video game in godot, how to make a 2d game in godot 3.1, godot tutorial for beginners, make your first game, godot engine getting started, godot 3, godot 3.1, godot game development, godot engine, godot change scene

Id: 6ziIyx60N6I

Length: 62min 25sec (3745 seconds)

Published: Thu Nov 21 2019