Adding Collisions and Walls (from Tiled) to your Love2D Game

hello folks in this video i'll be showing how to add walls and collisions to your love2d game so that your character can't just walk through walls additionally i'll be showing how to generate these walls in game from your tiled map to start we'll need to utilize winfield which i talked about in a previous video check the corner here for a link if you haven't seen that yet these first few steps will be the same from that video and first you're going to go to the github page right here you can find a link in the description and either clone it into your project or you can download it as a zip then of course you'll want to extract this zip file and then we're going to go in here and grab this winfield folder it's right next to this readme file so i'm going to copy this and back in our game project folder i'm going to go to our libraries folder and paste this winfield folder right in here once that folder is ready we'll need to include it into our code so at the top i'm going to add in wf equals require and then the path is libraries slash wind field keep in mind that this loads the whole winfield folder into this wf variable now we can use this variable to create our world we'll say world equals wf dot new world and then for the gravity parameters this is a top down rpg style game so we're gonna have no gravity zero comma zero we also need to update the world so down in our update function i'm going to put this after our player movement code so probably right here i'm going to say world colon update and then we need to pass in dt just like that and then finally down in draw temporarily we're going to draw the world so we're going to say world colon draw this will allow us to see the colliders that we create but in the end we'll probably want to remove this since we don't want to actually see all of those colliders in the final product also note that we're drawing it inside of our camera so that it appears within the camera's lens now that that's in place we need to give our player a collider or essentially a physics object that allows it to collide with walls so back up at the top where we define our player i'm also going to give it a collider so player dot collider equals world colon and then we're gonna make it a bsg rectangle so new bsg rectangle collider now a bsg rectangle is a lot like a regular rectangle but its corners are caved in a bit so it's more like an octagon shape which in my experience works a little bit better for player characters now for the parameters the first is the x and y positions so for x i'll do 400 and for y i'll do 250 then we need the size the width and height of this bsg rectangle with i'll do 40 and height i'll do 80 and there's one more parameter that determines how far caved in are these corners to help demonstrate this i'm going to make it 14 to start and then one more thing i'm going to do with this collider is i'm going to make it unable to rotate so i'm going to say player collider colon set fixed rotation to true so this prevents the collider from rotating around so now that this is in place i'm going to save and run and we can see our collider it's right here and you can see what i mean by the corners are caved in so it's like a regular rectangle but these corners are slanted so it's more of an oval shape more technically it's an octagon but you'll notice that the collider does not move currently it just stays right in place what we actually want now is for the player's position to always match this collider's position here to help with this we're going to after we update the world we're going to also set player.x equal to player dot collider colon get x and same with y player dot y equals player dot collider coin get y so now the player's position will always line up with the collider if we save and run now we are evenly matched although the size probably needs to be adjusted a little bit so let's do that first i'm going to scroll back up to where we created the collider for the player i'm going to increase the width let's say to 50 and we'll make this 100 and i can also change this 14 so it's less concave i'll change it to something like 10. so let's try that out that's a lot better it's a lot closer to match the player's parameters or the player's size you'll notice though now that we can't move anymore and this is because we're always locking the player's position to the collider's position and since the collider isn't moving we also can't move so to address this we're going to rework all the movement code that we did for the player but change it so that it's addressing the collider instead so all this code is happening in update for these if statements that are checking for the keyboard input and how we're moving normally is changing the x position but instead what we're going to do is change the velocity of the collider so to help with this i'm going to create some new local variables i'll say local vx set that to 0 and local v y and set that to 0. so these are going to represent the velocity in the x direction and the y direction of our collider now instead of updating player.x let's instead set vx equal to player speed and same with all these other ones we'll change vx equals player.speed but since we're moving left we want this to be negative so we're multiplying player.speed times negative one and then down here for up and down we're going to update v y v y equals player.speed for down and then v y equals player.speed but since we're moving up we need to multiply this by negative one and then after all that's done our v x and v y values are updated to match whatever our keyboard input was so we can simply say player dot collider colon set linear velocity and this linear velocity function takes in two parameters one for the x velocity and one for the y velocity so we can pass in v x for the x and then v y for the y so whatever keyboard input we put in it's going to line up with these two parameters and update the linear velocity of our collider so if we save and try this out now if i hold down some directions we can see that i'm kind of moving but i'm moving very slowly and this is because we're updating these values to player.speed and if we scroll back up we'll probably find that player.speed yes player.speed is very low it's only five we need something closer to 300 that's more appropriate speed so if we save and run now when i move around the player moves more specifically the collider moves and it's matching whatever player that x and player.y is so our player character moves with it and with this change you shouldn't notice any difference with how the player feels to control now the next step is to put in some walls for the player to collide with since right now i can just walk through these trees and the buildings and stuff let's put in a very simple collider to demonstrate so at the bottom of our love.load function i'm going to put in a new wall collider i'll call it local wall equals world colon new rectangle collider whoops new rectangle collider not vsg rectangle so with this new rectangle collider we need to give it a position i'll put it at position 100 200 and then for a width i don't know i'll do a width of 120 and then a height of 300. so with that in place we should see that if we save and run there it is this big rectangle right here is our wall but you'll notice that when we walk into it the wall just kind of falls over i hope you were able to see that it's kind of faded but the wall just fell over because both of our colliders are dynamic instead we need our wall wall colon set type to static static means that it's not impacted by collisions and it won't move away so if we save and run now when i run into the wall the wall stays right in place and the character also stops when we walk into it by the way looking closer it looks like the border of our collider doesn't exactly match the player's sprite if you wanted to you could increase the width to be more precise but in my opinion being close enough is good enough anyway we have our wall working and it stops the player what we want to do now is make it so we can generate these walls from tiled keep in mind that this requires you to have simple tiled implementation set up for your project so go ahead and take a look at this video in the corner to get up to speed so in tiled for our map we're going to start by going here and creating a new object layer i'm going to call it walls now that this walls layer is created and we have it selected we can use these tools up here for objects so i'm going to click on this rectangle tool and i'm going to draw in some objects over top of places where i want there to be a wall so i drew two objects and if you use this purple selector up here you can edit these you can move them around and change their sizes but i have two objects drawn in one other tip if it's not snapping to the grid like it is for me you can go up to view snapping and then choose your option here for snapping if you need to make it more precise or make it snap to the grid so with those two objects drawn in i'm going to save the map but then also go up to file export as and then make sure you're exporting it to the correct place in my case it's in my game folder maps and then it's this testmap.lua file i'm going to save over top of that and that makes our map exported anytime you make any changes to your map you need to make sure you save and export otherwise those changes will not show up in the game now we need to create wall colliders that matches those objects that we drew in for tiled so we're going to do a few things for this the first thing i'm going to do is create a walls table so this is going to contain every wall object that we create next we need an if statement we're going to say if game map dot layers with square brackets and say walls so what this if statement is doing is it's checking to verify that we have a layer called walls otherwise we won't do anything else so if we have a game map layer called walls then we are going to iterate through all the objects in that layer and we do that with a for loop we'll say for i comma obj in pairs and then in the parenthesis here we specify gamemap.layer same thing as before walls but then we say dot objects so this gets us every object in the walls layer and then we say do and end now inside this for loop is where we're actually going to be generating our wall objects and we can actually take this code right here and utilize it so we're going to paste this right in here and format it a little bit now right now we are hard coding these like 100 200 stuff as parameters but instead what we want to do is take the object right here from tiled and use those values for these so i'm going to say obj.x and obj.y for the x and y value and same thing with width and height obj.width and obs dot height and save that so now whatever wall we create it's taking those values directly from the object that we drew in tiled and one last thing we're going to insert this wall object that we just created into our walls table so i'm going to say table dot insert walls wall which puts our wall object into walls this helps us keep track of everything that we create just to help clarify why this works if i select one of these objects that we created we can see that it has an x y width and height property which we can see over here on the left and those are the exact properties that we're accessing when we're creating this wall let's go ahead and save and run and we can kind of see the white outline but when i walk into these houses here where i drew those objects we can no longer walk through it and that's the same with this one up here so wherever we drew an object in tiled there is now a wall sitting there that we can't walk through anymore and once you draw in the rest of the objects entitled we don't have to draw the world anymore because everything is accurate to the level itself so if we remove this we will no longer see the colliders which is exactly what we want if we save and run now everything looks back to normal but the player has a hitbox and each of these walls can no longer be walked through so everything seems to be in place and that about covers everything we now have a very solid foundation for an rpg type of game i hope you found this helpful please leave a like if you did also i post game development content every single week so be sure to subscribe for more thanks so much for watching and i'll see you in the next one

Channel: Challacade

Views: 1,527

Keywords: game development, love2d, lua, collisions, physics, windfield, programming

Id: dZzAxYrUMRg

Length: 13min 53sec (833 seconds)

Published: Mon Oct 25 2021