How To Make A PLATFORMER GAME In 2021! - The Map (Love2D) 1/6

this tutorial series will teach you everything you need in order to get a good foundation for your platformer game on the screen you can see the end result the map is being drawn out of tiles and uses the love.physics module for collision detection we have a player that is able to move around and jump there are spikes and enemies that we need to avoid as well as coins that can be collected thanks to the physics module we have objects like this stone that we can push onto spikes and use as a safe platform there is also a system for multiple levels when i reach the end of this level it gets cleared out and a new one is loaded while this is a beginner guide there are a few things that you need before you can get started the framework that we will be using is called love if you don't know what that is then you should check out my introduction video to love it covers installation on how to set up your first project if you have little to no previous lua programming knowledge it would also be beneficial to check out my crash course in lua both of these videos are very short and you will be ready to get started in no time if you are already familiar with lua love or programming in general then we can move on all you need to have in order to be able to follow along is a main.lua file that contains the three base love callback functions love.load update and draw next you need a conf file inside the conf file i have set the window size to be 1280 by 720 pixels enabled the developer console named the game platformer specified that the love version that we will use is 11.3 and disable vsync i also have a folder named assets which contains all of the assets that i intend to use in this tutorial series there is a link in the description where you can download the files though i recommend creating your own before we start coding we need to create a level to do this we are going to use a program called tiled it is a completely free tile map editor head over to mapeditor.org and download the latest version after you have installed and opened it you should be greeted by this screen click on create a new map and a new window will pop up where we can configure our map orientation sets the perspective for the tiles we want to set it to be orthogonal no not ornithological this makes it so that our tiles are all squares the tile layer format should be csv which sets the file structure for the exported map next make sure that tile render order is set to right down now we need to set the width and height of the map in an amount of tiles to calculate the size that we should use we need to take three variables into consideration first the size of the tiles in our tile set in this case it's 16 by 16 pixels second the resolution of the window which i set in conv.lua to be 1280 by 720 pixels third the scale which we will set to be 2x since the assets are made using pixel art and look better when you zoom in a bit to get the width in tiles we divide the window width 1280 by the tile width 16 and then divide it by the scale two the result in this case is 40. for the height we do the same thing divide the height of the window 720 by the height of the tile 16 and divide that by the scale 2 which leaves us with 22.5 we can't have half tiles so i will round it up to 23. now we can go ahead and save the file to keep our project organized i will create a new folder inside of our project folder named map i will create another folder and name it tmx when we work with tile we need to have two different files for each map tmx is a file format that the program tiled uses in order to save and load your maps when we want our game to read the map we need to export it as a lua file the reason we need to keep the tmx files is to be able to go back and change the map later down the line as tiled can't load the lua file now we can go ahead and save the map into our newly created dmx folder i will name it 1.tmx because it will be the first map in the game tiled is a very modular program you can move different elements around hide them and even make them pop out into a separate window if you accidentally mess things up you can always return to the default layout setting by pressing view in the top left corner then views and toolbar and clicking on reset to default layout the program may seem a bit intimidating at first but you won't need all of the features and i will cover the ones that we need as we go along before we can create our map we need some assets to use these are called tile sets and usually contain multiple tiles in one file i have a tileset named tiles in the asset folder before we can use the tiles we need to import the tileset into tiled to do this click the button named new tileset in the bottom right corner and a pop-up window will appear first click the browse button and navigate to the tileset that you want to use and open it make sure to check the embedded in map checkbox this ties the tile set to the map and makes it available immediately now make sure that the tile size is correct if your tileset has a margin before the tiles begin or if they are spaced out then you should set those values as well i will leave them at 0 since the tile set i will use doesn't have that make sure that use transparent color is not checked this can be used to chroma key out a specific color though you really should use a png file with actual transparency instead now press ok and as you can see the tile set has appeared in the bottom right corner i can now click on a tile to select it and place it on the map the tiles are quite small so i will zoom in on them by holding down the ctrl key and scrolling on my mouse wheel while my mouse cursor is on the tileset window the same thing can be done in the actual map window to move around you can hold down the mouse wheel button and move your mouse or use the arrow keys before we start placing out the tiles we should create some additional tile layers otherwise if i place out a couple of tiles and then want to add some grass on top of it i'd just end up replacing the existing tiles with grass tiles first i will rename the tile layer 1 to something more suitable for example ground then i will create a new tile layer by right clicking the window and selecting tile layer i will name it grass make sure that the grass layer is above the ground layer otherwise it will draw the grass behind the tiles holding shift and left clicking will enable you to draw a line with your selected tiles simply click again to place them out to get rid of a selection of tiles you simply right click if you make mistakes there is an eraser tool which you can use to delete tiles you can also undo by pressing ctrl z and redo with ctrl y this is enough for us to actually start implementing the map into our game so let's go ahead and save the file we also need to export it as a lua file press file in the top left corner and select export as select lua files in the drop down menu and save the file as 1.lua i will save it in the root of the maps folder in order for us to load this map file we are going to use a library you can think of libraries as add-ons that implement features that love does not have natively in my opinion it's best to try to keep the amount of libraries that you use to a minimum especially when starting out however there are certain times when it's unnecessary to reinvent the wheel in this case we will use a library made by my friend karai17 called simple tile implementation or sti for short i will link to the github page in the description simply press the green button named code and download it as a zip file we only need the folder named sti so copy it over to your project folder now we are ready to get the map to draw in our game open up your main.lua file at the top we are going to require sti and set it to be equal to a local variable which i will name sti inside of love.load we are going to load the map into a variable i will name it map and set it to be equal to sdi parentheses inside of the parentheses we will pass in the path to the map as a string to draw the map we need to call map draw in the love.draw function this function takes 4 arguments first the x and y positions which we will set to be 0 followed by the x and y scale you might recall that we wanted our game to be scaled up to 200 percent so we will set them to be 2. if we run the game you can see that our map is being drawn properly right now we are only applying this scale to the map which is currently the only thing that we have since it would be smart to fix the scaling for future stuff that we intend to add as well we'll go ahead and do that to do this we will use love.graphics.scale which takes two arguments the x and y scale just like with the map we will scale it up to 200 percent by passing in two to make sure that we can draw objects that we don't want to scale up we should make the scaling end at a certain point we do that by pushing and popping love.graphics.push saves the current transformations to the stack transformations means position rotation scale etc if we want to return to the state before we apply transformations we just call love.graphics.pop this retrieves the information from the stack and resets everything to this state this means that anything drawn before the push and everything drawn after the pop will not be affected by the scaling sti has support for the built-in physics module love.physics which is built on the popular physics engine box2d in order for sti to understand what tiles should be solid we need to add a custom property to the layers and objects that we want to be solid go ahead and open up tiled again personally i prefer creating one designated collision layer i think it's a cleaner solution first we will create a new object layer that i will name solid on this layer i will create rectangle shapes using the insert rectangle tool located in the toolbar at the top by default it can be difficult to see the object due to the gray color we can change the color of the entire layer by first selecting it then we get a option on the left side where we can pick a different color now we need to tell sti that this rectangle is a solid object by creating a custom property select the rectangle with the selection tool then press the little plus sign located in the bottom left corner sti looks for a boolean property named collidable so we will name it that and select bool in the drop down menu when we press ok a new property named collidable appears which has a checkbox next to it by default it is not checked since we want this rectangle to be solid we will check it now we can copy and paste the rectangle so that we don't have to keep repeating this process make sure that you cover everything that needs to be solid with a rectangle make sure that you save both the tmx file as well as export a new lua file now we need to open our main.lua file and initialize the love.physics module to do this we will add a second argument to the sti function that loads our map add a comma then a table that contains the string box2d this lets sti know that we intend to use books to d in order for box2d to work we need to first create a physics world we do that by creating a variable which i will name world and setting it to be equal to love.physics.new world this function takes two arguments the x and y velocity for the world this could be used to for example create gravity but we want to do that ourselves not only because we are awesome but also because box2d tends to make it feel floaty therefore we will set them to be equal to zero next we will tell sti to load all of the layers and objects that have the custom property collidable into the physics world we do that by typing map colon box2d underscore init and then parentheses this function takes one argument the world that you want to insert it into in our case that's world if we run the game you can see a bunch of white rectangles this is the object layer that is being drawn we can disable this by setting the layer's visible variable to false we can reach the layer by typing map.layers.solid then adding dot visible and setting it to be equal to false if we rerun the game you can see that they are no longer visible in order for us to be able to have things moving around in our physics world we need to call world update in the love.update function otherwise everything will be frozen and that's a movie for kids we're making a game the black background is quite depressing so let's add something more colorful in main.lua i will create a new variable named background and set it to be equal to love.graphics.new image this function takes the path to the image that we want to load as a string the image that i want has assets background.png as its file path we can now draw the background by calling love.graphics.draw and passing in the image that we want to draw in this case background this function takes up to 10 arguments but if we don't pass anything other than the image it will be drawn at 0 0 which is what we want anyway make sure to draw the background before the map so that it is drawn behind the map you might have noticed that we add dt into certain functions that stands for delta time which is the time that it takes to produce a frame we use this information to make the program run the same on all hardware regardless of fps if you want a more in-depth explanation delta time and a lot more is explained in the lua crash course video in the next episode we will start working on the player character remember that there is a link in the description for the full source code if you made it this far chances are that you enjoyed the video so consider liking and commenting remember to subscribe so you don't miss the next episode [Music] you

Channel: DevJeeper

Views: 15,702

Keywords: programming, coding, lua, love2d, game development, Platformer games, platformer, platformer tutorial, unity, godot, how to make a platformer, tutorial platformer game, tutorial platformer, scratch, game dev, programming tutorial, Tiled, how to make games, how to use love2d, programming in lua, how to code

Id: XfIDHUyLpQ0

Length: 15min 10sec (910 seconds)

Published: Sun Oct 25 2020