Custom 2D Platformer Physics In Godot GDScript (Part 3 - Bounding Box Collision)

hello again welcome to part three of this series on how to create your own physics system using godot engine for your 2d platform game and in this video we're going to implement the heart and soul of every physics system which is the collision checks and we're gonna do it using bounding boxes it's gonna be a longer video so make yourself a cup of coffee or tea or whatever you like and let's start to start things off we need to add new scene that will define the hitbox so click on the plus to add the new scene and i'm gonna name it hitbox and save it under the scenes folder now let's attach a script by clicking the attach button and i'm going to name it hitbox as well save it under the scripts folder okay cool now i'm going to add some export variables to the hitbox if you don't know what export variable is it's just a variable that is available in the inspector in the editor so i'm going to add the export bar x and y and i'm also going to add the width and the height and it's better to give the default values for export variables so 0 0 and 16 by 16. okay another variable i want to add is the column so we can see the hitbox in the inspector so i'm gonna add the color i'm gonna do default color as blue so 0 0 1 and i'm going to give it a opacity of half now in order to run some code in the editor we need to use a special keyword and it's the tool so we add tool to the top of the script now every code that runs in the script is going to run on the editor as well and i'm gonna add the draw function so i'm using the built-in draw function draw and i'm gonna do draw rect and i'm going to pass it the rec 2 with our x y width and height and also the the second argument it accepts is the color so we send colo we also must call the update function in order to redraw the rect if you don't do that we won't get live changes so right update nice okay now let's add the hitbox to the player so i'm gonna choose the players in and i'm gonna choose the root and click on the link scene button and choose the hitbox nice as you can see the origin of the hitbox is at zero zero it doesn't fits the player so i'm going to change the values of our export valves and i'm gonna do x minus 4 the y minus 7 the width to 8 and i'm going to set the height to 24. next thing i want to do is to add a reference to the hitbox inside the player script so we're gonna do already var hitbox equals dollar hitbox remember on the first video we made the wall scene so finally we're going to use it i'm going to open the wall scene and i'm gonna add hitbox to this scene as well so link scene and hitbox and in the wall i don't want to move we can offset the hitbox to be also in the center but for me the origin on the top left is fine so the x y are going to stay zero and the width and height are 16 by 16. okay now let's attach a script to the wall and save it to the script folder delete all that okay so now let's add reference to the hitbox just like we did in the player script so i'm gonna do on ready bar hitbox equals dollar hitbox now in order for us to easily find the walls in the level i want to add in the ready function call to add to group and i'm going to say walls that way we can easily find all the walls in the level and we're gonna filter the nodes that are in this group cool so now let's add some walls to the level scene i'm gonna go to level and i'm gonna add the new node and just pick a node here and rename it to walls it's not related to the walls group we did earlier it's just for order and i'm gonna link the walls in so link wall and now i have one wall in the scene and one thing i want to do is snap it to grid because we set every all the position on integers so it's better for you to do that also the player needs to be on the integer values and i'm going to add some walls to the scene i'm going to ctrl d to duplicate and let's make some flow here duplicate some more i'm going to choose all of that and duplicate ctrl d making some beautiful flow and that's it i'm going to pick the playlap okay before we continue let's actually change the color of the boxes for the walls to something else purple is nice okay okay so now i want to do a little explanation on how two boxes are colliding we're going to separate collision on the x-axis and then the y-axis so let's say we have this bounding box and no matter if the origin is in the center like in the player on the top left like on the walls we can calculate the boundaries of the box right left top right and bottom so let's say this box is box a and now we get another box box b and also for that we can calculate the boundaries left top right and bottom we could say that we have a collision on the x axis if box a right is greater than box b left but that's not enough because if we imagine that box a is sliding to the right it will end up here but you see box a right is still greater than box b left and there is no longer collision on the x axis so we need another condition that box a left is smaller than box b right so if i'm gonna write it down we say a dot right is greater than b left and a left is smaller than b right that sums up the collision on the x axis but in order to fully intersect we need also to check the y-axis collision and it's pretty much the same like the x-axis so i'm not going to repeat everything to sum it up it's a bottom greater than b top and a top is less than b bottom let's add this function to our hitbox now uh first i'm going to add the boundaries so i'm going to add left now and i'm going to use the set get keyword which lets you define a getter function this function is called automatically when accessing a variable outside the object so get left and i'm going to do the same for the right top and bottom so top set get get top and bar bottom set get get bottom okay so now let's write quickly the getter functions func get left so where is the left boundary it's just the globalposition.x plus the x offset right for the right boundary it's like the left plus the width so it's global dot x plus x plus width for the top is global position y plus y and for the bottom is global position y plus y plus height great now let's add the intersects function which returns true if two boxes intersect so we're gonna write func intersects and it accepts the other box and we start with the x-axis check so we're going to do self dot write greater than other dot left and self dot left is less than other dot write notice that we must use the self keyword in order to activate the getter functions from within the current object and now for the y axis we're gonna do self button is greater than other top and self.top is less than other button so we're almost done with the hitbox i just want to add another thing remember in our move exact code we move pixel by pixel but we first want to check if we have a collision and then move so i want to be able to move the hitbox and then check for collision and then move so we need to add another argument here and it's going to be the offset vector2 so self.write plus offset x i'm going to change this and also the self dot left plus offset x don't forget the parentheses and now for the y axis we're gonna do self dot bottom plus offset y and self dot top plus offset y okay that's it great now this function is perfect uh so how do we use it we need to add a script that will act as the game manager and it will be responsible for checking the collision between objects so i'm going to add a script and call it game and it's going to be a single done and if you don't know what a single dom is it's just a script that is available from everywhere you don't need to attach it to any object so right click the scripts folder and add script i'm going to name it game to define the script as single tone all you need to do is to go to project then project settings then you should go to the autoload tab click the folder icon then add the game script one last thing make sure that the singleton checkbox is checked cool so now let's open our game script and we're going to create a new method here which is check walls collision which takes an entity to check and iterate on all the walls in the current scene it also accepts the offset like we used in the intersect function write it down func check walls collision and accept entity and then offset great so now we need to iterate on the walls and to do that we use a special function so var walls equals get three dot get nodes in group and now we pass it the walls okay so now i'm going to use a for loop so for wall in walls we're going to do if entity dot hitbox intersects intersects with what with the wall hitbox and we're gonna also pass it the offset then we return through and if there was no intersection we're going to return false and that's it for this method great if you got here don't give up i know it's a long video with a lot to take but we're almost done we just need to change our movement functions and some code in the player class so bear with me okay so let's start with the movement functions open the actor script and first thing i want to do with the movement functions is i want to add a callback and we are going to fire this callback when there is a collision it is a good way to let the player react to collisions in this tutorial we are just going to change the velocity to zero when we are colliding so add a callback here in move x and also in move x exact add the callback and in move y and move y exact also in the calls to move x exact and move y exact and we're done finally let's check for the collision so inside movex exact inside the while loop i'm gonna do if game dot check walls collision and i'm gonna pass self as the entity and the second argument is the vector2 and we're gonna pass step as the x value and 0 is the y value and if it's true then we're going to do call back dot call func and right after it we're going to return because there is a collision and we can't move anymore don't worry about the call func i'm going to explain it in a little okay now let's do the same in the move y exact function and it's going to be almost the same i'm i'm going to remove the fake collision rose that we wrote and we're going to do ifgame dot check walls collision again pass self and here we pass vector tube and in the x we pass 0 this is the difference and in the y we're gonna pass the step and again right after it we're going to do callback.call func and return before we move to the player script i want to add two helper functions to zero the remainder so i'm gonna add func zero remainder x and all it's gonna do is just do remainder dot x equal to zero and the same we're gonna do for y zero remainder y and remainder y is equal to zero and now open the player script and let's add the functions to call on collision and it's going to be on collision x and all we're going to do here is set velocity.x to zero and we're also going to call the method 0 remainder x and we do exactly the same for the y so on collision y velocity y equals to 0 and now we need to pass this callbacks to the move functions so in movex we're going to use a special keyword and the keyword is fun craft and it lets you define the reference to function and in order to call the function you use call func like we did earlier and it accepts two parameters the first one is the object that owns the function so in this case it's just self and the second one is a string of the function name so we're going to use in the move x we're going to do on collision x and on the y we do the same with on collision y before we run and test it i just want to add some walls to the level and i'm going to duplicate some walls here so that it will be more interesting and we also get a x-axis collisions finally we got to the moment we can run and test the game so let's do that f5 and nice i'm colliding with the walls but for some reason i cannot jump oh yeah i know what it is remember that we used to fake the on ground when we start the frame now we need to actually check for collision so i'm gonna add the collision check game dot check walls collision and here i'm going to send self again and the direction is vector 2 dot down and i'm going to save and run again and now yep we are jumping that's great so friends we got to the end of this video and probably this series um i hope you had fun if you got any questions or ideas for me for the next videos or anything you want to ask me in general please leave your comments below and if you like it please like and subscribe love you bye

Channel: Game Code Samurai

Views: 3,678

Keywords: Godot, Platformer, 2D Platformer, Custom Physics, Celeste, Celeste Game, 2D Physics, In House Physics, DIY Physics, Godot Engine, DIY Physics Godot, Games, Game Coding, Game Dev, Game Dev Tutorials, Game Dev Guides, Coding Tutorials, Godot Tutorials, Godot Guides, 2D Plaformer Physics, Celeste Physics, Celeste In Godot, Celeste Godot, Celeste Mechanics

Id: knQgw2h7weE

Length: 17min 57sec (1077 seconds)

Published: Tue May 04 2021