Easily create levels/maps for Love2D games (with Tiled)

hello folks in this video i'll be showing the basics of using tiled a fantastic level editor that is a must-have for game frameworks like love2d which does not have any kind of built-in editor we'll go through the process of adding a tilesheet designing a map and then importing our level into a love 2d game first you'll want to have a tile set to use for this this is just a large image with a bunch of individual pieces that we'll be using to design our level you're free to use the same tile set that i'm using by downloading it with a link in the description once you have it ready i like to keep my stuff organized so in my game project folder i'm going to create a new folder and i'm going to call it maps and then right in this maps folder i'm going to paste in that tileset.png image if you don't already have a project to use for this tutorial there's a link to the same sample project in the description next up you'll need to download tiled again the link is in the description note that this is a name your own price tool so although you can download for free if you do find it useful i highly recommend paying some amount of money to support the developer once you have tiled installed go ahead and start it and we can create a new map by going up to file new new map and in this window sorry it's a little bit small this text does not scale well here but the top portions up here can all stay at their default values that's orthogonal csv and write down next is the map size we can choose how many tiles wide and high our map will be i think this default 30 by 30 is okay here and then finally we need to specify our tile size which is the size of each individual tile this is dependent on what tile set you're using but with mine each tile is 64 pixels wide and 64 pixels tall and then we'll click save as you're going to want to navigate to your game project folder and i'm going to save this in the maps folder and i'll simply call this test map and click save once that's saved the tiled editor should pop up which is where we'll be designing our level first we need to import our set though this happens down in this bottom right corner with this new tileset button first we need to give it a name again sorry this is small i'll name this test tiles and then make sure you have embed and map turned on then we need to choose our source which if we browse we're going to navigate back to our maps folder and find our tileset image then again specify our tile width and height which in our case is 64 by 64. and then margin and spacing you can adjust these values if there's any gaps between or around the tiles but in my case all the tiles are right next to each other with no gaps in between so the spacing is going to be 0 and there's no margin around the border of the tile set so the margin is going to be 0 as well and once you have that configured go ahead and click ok and in the bottom right you should see your tile set pop up now at this point you're able to click on any of these individual tiles and use them to draw in parts of your map and you can use this to design your level i'm actually going to start by putting in a baseline of this grass image and i'm going to use this paint fill tool to put grass in all around then from here i can choose individual tiles and use this stamp tool to draw in like my individual paths for the rest of the level one thing you might notice while designing is that if you try to make say one of these trees and put it right here it kind of deletes the grass underneath of it so and this is because the surrounding portions of the tile is transparent so it replaces the grass around it with that same transparency we can get around this by making a new layer right now we're working off of this tile layer one but we can create a new tile layer and i'll call it trees now if i go back to this tile layer 1 and replace this tile with grass as soon as i go back to the trees tile layer now any tiles that i put will be put on this new layer so the stuff on tile layer 1 isn't going to get replaced so this fixes that issue and while we're at it i might as well replace this name with something like ground and then from here it's just a matter of designing your level so go ahead and go through and design your level however you want i'm keeping this very simple for now but whenever you're done with your map you can go ahead and save the project and then go to file export as so now we're going to export our project so then navigate to your game project folder and again i'm going to put this exported version into our maps folder and you'll see at the bottom that we're saving it as a lua file i'm going to call a test map so this is very convenient since love2d uses lua that makes the process of converting it over pretty simple so go ahead and save and our map is now exported as a lua file now to get this map into our love project we'll need to utilize some open source software check the description for a link to this page which is the github for simple tiled implementation this library will read that exported map and help with drawing all those tiles in game so to get this code you can either clone this repo if you know how to do that or if you don't know how to do that you can go to code and we'll just download the zip file then once it's downloaded you're going to want to extract the zip file and then navigate into these folders and what we really want is this sti folder sti stands for simple tiled implementation of course now gonna copy this folder and then go back to our game project folder i like to keep all of my open source code into a libraries folder but you can organize this however you want i'm just going to paste in that sti folder and once you have that sti folder ready we can include it into our code with love.load and don't worry about any of this extra code it is not necessary for this to work but at the top of that load i'm going to put in sti equals require and then in these single quotes i'm going to put the path to that folder which was libraries slash sti and that imports all of that sti code into this sti variable and then after this we can create our map or load it into the game by storing it in a variable i'll call it game map equals sti parentheses and in these parenthesis we need to provide the path in single quotes to our exported map file which that was in the maps folder slash test map dot lua since our map was exported as a lua file and now that this map is loaded into game map all that's left to do is to draw it so down here in draw function we're going to get rid of any other background that we're drawing and instead i'm going to do game map colon draw and that's it one very small note is if you're using the sample project i'm going to change the scale of the player down to 6 as opposed to 10 just so it matches the tiles a little bit better but whenever you're ready go ahead and save the project and run and it worked we have our tiles in place and we can play the game as normal that covers the basics of using tiled and importing maps into your love2d projects a noticeable problem though is that we're stuck in this upper left corner of our game level so there's no way we can actually see the rest of it in the next video we'll add a camera that follows the player around that will let us explore the entire space if you found this video helpful please leave a like i would really appreciate that i also post gamedev content here every single week so feel free to subscribe for more videos thank you so much for watching to the end and i'll see you in the next one

Channel: Challacade

Views: 3,105

Keywords: game development, lua, coding, programming, love2d, love, tiles, tiled, level design, simple tiled implementation

Id: IHmF_bRpOAE

Length: 7min 55sec (475 seconds)

Published: Thu Sep 09 2021