Code a Simple Puzzle Game in Godot: Box and Switch tutorial

hey everyone it's clear me in the series we are going to create a base or a prototype for a puzzle game like soccer Ben we are going to be covering player movement pushing boxes both grid based and physics based and also pressing platforms with those boxes it's going to be a coda long tutorial so if you like to follow along you're gonna have to download Godot version 3.1 before getting started head on to the repository of the Kickstarter and clone it or download it into your machine and here you're going to find the puzzle game folder and inside you're going to see two new folders one is for the end state of the game so if you like to play around with it feel free to but if you're going to follow along we're going to start from the start folder this contains the SS that we're going to need inside of the game and also a map that has already been set up for us now after downloading it into your machine and importing the project into Godot you're going to find this out we have here in this starting project are some assets that we are going to use to create our game and also up recreate the level with the tile set for us and in case you wants you feel free to customize this map but in my case I'm going to leave it as is so let's begin by creating our player with our game selected I'm going to click here to add a new node and I'm going to search for kinematic body 2d I'm already going to rename is kinematic body to player we're going to need an animated sprite here because we're going to animate our player and also a collision shape now let's select our animated sprite and add new sprite frames to it click on it and open editor I am already going to rename this default animation to idle now we can go to our assets folder and expand our sprites folder and under the player folder we're going to find several different sprites that we're going to use to animate our player and by the way all of the artists we are using here is from Kenny's sokoban pack he create awesome arts that you can use for free for the idle animation we are only going to need the player underscore 5 now we are going to need for animations each one for each direction that our player is going to be able to walk to so let's begin with the down animation here we're going to need sprite 6 & 7 & speed we can leave as a default of 5 frames per second now let's create our left animation in this case is going to be player 21 and 22 up to be player nine and ten for the right direction we're going to need frames 18 and 19 with this we can zoom in into our player and add a collision shape that resembles the shape of our player so let's select our collision shape 2d and on the shape we're going to select a rectangle shape 2d and we can zoom in an active 8 pixels nap this way it's easier for us to change the size of our collision shape and now we're going to create something that hopefully reassembles the shape of our sprite perfect now let's right-click on top of our player and I just realized that I named it incorrectly and we are going to save range as seen inside of our players folder with the name of player dotty Sen now we can open that scene and we are going to add a new script to it with our player selected in the template we can change from default to empty and we can leave the default path and click on grid now inside here we're going to need a reference to our animated sprite because we are going to want to update our animation if our player is either facing up down left or right or if he is stopped so let's get a reference to that creating a new variable is going to be of type animated sprite and let's reach out to our animated sprite we're also going to need to exported variables one is for the movement speed of our player and the other one is going to be the push speed of our player this is going to be the speed that we are going to move at when we are pushing boxes because we're dealing with a chromatic body today we are going to have to use the physics process to check for inputs and move our player accordingly I'll begin by creating a new motion variable is going to be a vector to and the value of x and y is going to be determined by our inputs these inputs have already been created if you go to project settings and switch to the input tab and scroll all the way to the bottom you see that we have move up down left and right you can customize this if you want in case you want to use different keys or if you have a gamepad in my case I'm going to live with WASD so for the value of our motion X the x value is the value of our horizontal movement and it's going to be equal to input the get action strength this way we can have floating values if we are using a gamepad here we're going to select move right minus the value of input but get action strength move left as for the Y value of our motion it's almost going to be the same but for the first argument we're going to instead of check for inputs you move right we're going to check for move down and the second one is going to be move up right after checking for inputs we are going to cut a function that we have not yet created it's going to be called update animation and we are going to pass through it our motion this way we can determine which animation to play based on the values of our motion though is already complaining that we haven't created this function yet so let's create it real quickly down here we are going to expect a motion which means we have type factor 2 and we're going to return void and here we can just pass as of now all right so after calling update animation we are going to move and slide our character the linear velocity is going to be our normalized motion multiplied by our move speed and because we're dealing with a top-down game our floor normal is going to be vector 2 now let's create our update animation function we will begin by creating a variable is going to hold the name of the animation that we want to play we are always going to assign it to be equal to idle now we are going to do a few checks in the case of our motion X is greater than 0 or animation is going to be equal to right if not we are going to check if our motion dot X is lesser than 0 then our animation into equal to left if not we are going to check if our motion dot y is lesser than 0 this means that we are going up so our animation is going to be equal to up and if not we're going to check our motion dot Y is greater than 0 if that's the case for animation you can't be able to now now if you saw previously our animations are always in loop so we don't have to keep playing them in case we are playing the same animation if we do that what's gonna happen is that our animation in every frame is going to start from the beginning and we're never going to see it finished so it's going to give us some weird behavior and because of that we have to either after deciding which animation we're going to play we're going to reach out to our animated sprite and check if the animation that is hurting to being played is different than the animation that we decided that we're going to play here and if that's the case we are going to reach out to our animated sprite and then play this animation we can now save our player script and if we go to our game scene and back go back to the 2d view I'm going to move the player here to the middle of the game and press f5 to play our game we now have a player that can walk around and it's correctly animated now we're going to create our physic box and because we're going to have two boxes in this game as I said before one is physics based and the other one is going to be grid based we can use inheritance to both reuse code and also the scene instead of having to create an album scratch so that's what we're going to do so let's create a new scene by clicking on scene and new scene is going to be a kinematic body so I can click on custom node and search for get a medic body and I'm going to rename this kinematic body to box here we are going to have a sprite so you can search for it and also a collision shape for our kinematic body all right with the sprite selected let's add a texture to it by going to our assets and looking inside of our sprites here we have a title sheet that we can just drag and drop into our texture are going to activate the region by going on the revision and clicking enable this way we can go down here and click on textual region I'm going to expand this menu there's net mode I'm going to set it to grid snap and the size of the grid is going to be 64 by 64 pixels you can choose any box that you want to in my case I'm going to select this red one on the top here once you find the box that you want you can just drag your cursor and because we're using grid snap it's going to correctly select the box now we can close down this menu and you'll notice that we have a box here now I'm going to zoom in into the box and select the collision shape the shape is going to be a rectangle shape 2d and instead of dealing with the handles and trying to create the shape correctly because you know that this price is 64 by 64 I'm going to set the size of the shape to be 31 by 31 this is due to the fact that we had run into some bugs if our extents were to bite or chew this way it would cover the whole box and we're going to see this but when we saturate our grid base box but for now let's keep it at 31 by 31 because it's going to save us some trouble on the future now we can select our box and save the scene instead of our world into props and we're going to leave it inside of this folder right here click on save and with our box selected we're going to add a new script to it which is going to be called box and we can click on create now this box is just going to serve to us as a interface or a boilerplate which is going to be then implemented by other boxes both the grid based and the physics based box and as they are going to inherit we're going to give it a class name which is going to be box and here we are going to define a new function which going to be then implemented by these other two boxes which going to be called push we're going to receive as an argument a velocity which going to be a vector tube it's going to return nothing so return type is going to be void and because this box again is going to be inherited and implemented by the other two boxes what we're going to do here is just print that push was not implemented in and we're going to pass the file name here this way if you later decide to implement a new box and a we and hired from box and you forgot to implement push we're going to note that we forgot to implement something and we can go to this file and implement the function alright now that we have our box rated we can create a new and a heart that's in by going to sin inherited sin but oh it's already going to like box to us because we have this in open so I can click on open then I'm going to rename this box to be physics box I'm going to remove the script from the physics box because we're going to implement our own custom script to the physics box so before creating the script I'm going to save our scene inside up the physics box folder I'm gonna click on save now we can already attach a new script to our physics box you notice that if I try to click here nothing's going to happen this is probably a bug on the DOE version 3.1 better so I'm going to like the sprite suck the physics box once again and click on the attach script now the menu is going to open and I'm going to leave everything as default and click on create now this physics box is going to extend from our box that we created before the class name is going to be physics box now we have to implement the push function that we created on our box so let's create it again we're going to receive a velocity it's going to be a vacuum tube and turn void and simply what we are going to do in our physics box is called move and is live because this box is a kinematic body 2d with the velocity and once again a vector 2 as our floor vector all right now we can save this in go back to our game I'm going to press f1 to go back to the 2d view and with the level selected I'm going to add a new child to with but in this case is going to be a scene and we can select our physics box and move it somewhere around here you know our player if we play the game now you notice that we are not going to be able to move the ball because we haven't yet implemented this in our player so if I move closer to the box and try to push it nothing is going to happen alright let's go back to our game now I'm going to open the player script before implementing the functionality of pushing the box I'm just going to fix a typo here in the animation we're missing a column here now to implement the functionality of pushing boxes what we're going to do is check in every frame if we are colliding with something and if you are colliding with something we're then going to check if we are colliding with a box if it is a box we're only going to push it if we're moving in the direction which is either horizontal or vertical we don't want to push our box if we are moving diagonally so we're also going to have to create some checks because of that now let's stop talking and implement this functionality here right after we move we are going to check if our slide count is greater than zero this means that we are colliding with something and if that's the case we're going to call function at the various rate now it's going to be called check box collision and here we're going to pass the motion because again we have to check if we are moving diagonally or only vertically or horizontally all right after our update animation function I'm going to write a new function it's going to be called check box collision again we are going to receive a motion it's going to be a vector two and we're going to return right now to check if we are moving diagonally what we are going to do is use our motion and here we have x and y and if the sum of the x value and the y value is greater than one this means that we are trying to move in a diagonal direction so let's to do is by creating a if statement and here we have to use the abs function it's going to return as the absolute value of F whatever we pass to it because if we're moving to the left or up these values are going to be negative we might get a value that is lesser than one but in reality we were moving in a diagonal direction so to prevent that from happening it's called ABS motion dot X plus abs pushin dot y if that's greater and one we are going to return from our function now to determine if we are colliding with a box we are going to create a new variable which we are going to call box and we are going to call a function that is provided to us by the kinematic body today which is get a slight collision here we have to pass through it and index because you might be colliding with more than just one body in this case we are always going to check or the first body that we are colliding with and we're going to reach out to its collider which is the object itself that is being collided with our player and we are going to cast it to a box if this casing fails this means that we are not colliding with the box and we don't have to do anything so we are going to check if box this means that if this variable is not new because if this fails we are going to receive a new value in our box now we know that this is in fact the box so we can call the push function that we have created in our box and here we are going to use the push speed that we exported before times our motion now we can already save our game and test our box now if I run closer to the box you see that we are now pushing it and even if you try to we cannot push it in a diagonal direction all right now that we have our player working and also a box to push what we're going to implement now is a platform that our player can push boxes onto which is going to be then pushed like a button is we're not going to really add functionality to this platform what we mean by that is that we're not going to make this platform do anything you're just going to make it usable so you can then later on ID functionality to it for instance making when the platform is pressed door opens or something of this sort as the objective of this tutorial is just to create a simple prototype that you can then later on build upon all right so now that we know what we are going to do let's wait a new scene by going to sin no sin the platform is going to be an area actually so we can search for it double click and we are going to rename it to red platform to make it because I'm going to create a red platform we are going to need an animated sprite which is going to hold an animation or just one sprite or when our platform is pressed and one for when it's not pressed and because we're dealing with an area GD we are also going to need a collision ship all right now let's select our animated sprite and create a new sprite frames to it and open the editor here we're gonna have two animations one is going to be called down or when the platform is pressed and the other one is going to be called up for the down animation we're gonna go to the assets folder inside sprites and inside platforms we are going to find the great 33 this when the platform is pressed so you can just drag it and drop instead of our demo animation and great 38 when it's up now I'm going to zoom in into our platform select our collision shape and the shape for this collision shape is going to be a rectangle shape 2d and you're not going to change the size of our rectangle shape because when we are moving a box on top of the platform we don't want it to be pressed just as we touch the platform we actually want our box to be somewhat in the middle of the platform and by having a really small collision shape like this one this is going to be handled by us without much effort and just before creating a script to our rail platform let's select our animated sprite and the correct animation that we want to display here at the beginning of the game is going to be the website of our platform alright now we can save this scene by pressing ctrl s gonna go up one level and I'm going to save it on the props folder of our world folder with the red platform selected I'm going to attach a new script to it and I'm just going to change the name from red platform to platform and I'm going to click on create we are going to need a reference to our animated sprite so let's grab this by creating a own ready bar it's going to be of type animated sprite and let's grab that reference right here we're gonna have two signals that are going to be emitted when the platform is either pressed or unpressed and that's what I mean before saying that you can then use this to implement the functionality that you want on the ready function we are going to connect to our body and our signal so function code one buddy enter and we're going to do the same with body exited the function is going to be called on body exited now we can create both of those functions so I'm going to just copy their names and create this function here we're going to receive a body which going to be of type physics body GD by the way you can name this body parameter here anything that you want and just going to name it body to keep it the same as what would happen if you decided to connect the signals using the editor and this function is going to be of type point now we have to check what body entered on our air HD and remember we only want our platform to go down if this body is a box so we're going to check if this is not a box and if that's the case we're going to return from this function if not this means that we are colliding with a box and because we have used inheritance any box that we create be it a grid box or physics box is going to be nonetheless a box we can get away with just checking this instead of having to check for every type of box that we have in our game now that we know that indeed a box entered in our area today we are going to reach out to our animated sprite and play the down animation and emit the signal that we were pressed now we can copy this function because the body of our body exited function is going to be pretty much the same and paste it here now I'm going to rename the function to body exited and here instead of playing down and we are going to play up and instead of emitting breasts we are going to emit compressed now we can all read save our scene go back to our game go back to the 2d view and with our level selected let's add a new trailer to it which is going to be our red platform and let's place it somewhere around here and now if we play our game and try to put our box on top of our platform you notice that the functionality is working but we have some problem with our Z indexes here so let's fix that by going back to our editor and open our box in and with a box like that we're gonna go to the Z index on the inspector and set the Z index to be one and one less thing that I have to do is go back to our game scene select our physics box and here we have to go back to the value of our scene by clicking on this icon now our Z index is going to be fixed and every other box that we create is going to be fixed because it is fixed on the main scene of our boxes now we can press a5 to play our game and as you can see it's now fixed we now already have and working prototype but in the next video we are going to create a grid based box in case that's what you want to implement in your game again the whole project is available in github if you have any questions feel free to leave them in the comment section and I'll see you in the next video

Channel: GDQuest

Views: 29,925

Keywords: godot puzzle game tutorial, godot puzzle game, godot tutorial puzzle, godot pushing objects, godot push box tutorial, godot sokoban, godot game engine, game creation tutorial, godot step by step, godot tutorial 2d, godot tutorial for beginners

Id: l2wF2gj_hlA

Length: 22min 4sec (1324 seconds)

Published: Thu Feb 07 2019