[2021 Update!] Make Games with Love2D - Setup, Structure, and Development Basics

hello my name is kyle and in this video we'll be going over the core fundamentals of using the game framework love2d we'll start off by talking through the process of installing love and getting your programming environment set up then we'll talk more about how projects are organized with love and finally most of this video will be dedicated to creating a simple game from scratch while working on this game we'll go over some key features of love including the core load update and draw functions getting the structure of our game set up displaying shapes modifying colors and reading mouse input from the player covering these basic concepts will give you a great understanding of how love works as a whole so when you're ready let's get started the first thing that we'll be doing is installing love this is very easy you just go to love2d.org and the download links are right here just choose the appropriate link for your operating system if you're on windows i recommend the installer when it's done downloading go ahead and run it and just go through the steps next i agree make sure you keep track of this destination folder we will be visiting this path in just a moment choose next and then finish one thing i would recommend for you to do is to create a shortcut to love on your desktop or if you're on mac just add the love application to your doc but for windows it's best to create a shortcut to do this you just go to the path where you installed love which for me it was see program files love and then you're going to find the love.exe or it might just be called love if you can't see the file name extensions it's an application file right click on it choose send to desktop and then it creates a shortcut to double check that this works you can go ahead and run the shortcut and it should pop up some love window and it should say no game it might not look exactly like this but any love window should mean that this is working love is a pretty simple program to work with and the reason i say this is because there is no interface to deal with or an editor that takes time getting used to in fact a completely viable way of programming with love is to do all of your programming in any text editor but if you want my opinion on what the best way to work with love is is to use visual studio code vs code is a lightweight text editor built with programmers in mind there's all kinds of built-in helpful tools that make programming a lot easier and there's also tons of packages that you can install that provide additional features in our case we're going to be using a package catered to love2d and lua now keep in mind that this step is completely optional you can use any text editor you want to write lua code and love2d games i personally find vs code to currently be the best option for love development so i'm going to go ahead and show you how to set it up the installation process is very simple you can search online for visual studio code or you can go directly to code.visualstudio.com and then you're going to install this program for your operating system this will work fine even if you're on mac i'm going to demonstrate this on windows and let's run this when you're installing i'm going to go ahead and create a desktop icon as well and install and it's done so let's go ahead and open up visual studio code this is what it should look like as soon as you start it up how it works is you can open any file or folder in this program and it'll let you directly edit the file contents so it'll let us write our lua code very easily in order to run our lua code directly with love though it'll be helpful to have a certain extension installed vs code allows us to install extensions which are just some extra tools that help with certain tasks to install an extension we're just going to go over here to this button click it and then we're going to search for the extension that we want to install if we just search for love 2d the first option should be love2d support and this is the one we want i'm going to click install and you'll know it installed as soon as you see this uninstall button what this extension does is it gives us some added support for love2d projects but most of all it lets us easily run love2decode directly from our editor before we close out of this we do need to check some settings on this extension so we go over here to this little gear icon and we're going to choose extension settings there's a few things we can check on here but the main thing that we want to look at is this love2d path this is the path to love.exe when you installed love it installed to some directory on your computer and this is the path that we looked at last time in order to create our shortcut for me it is c program files love love.exe and i encourage you to go to this path in a file explorer or something and verify that there is a love.exe in this folder if there isn't then you'll need to reinstall love so when you have this box accurate we'll be testing this out actually in the next lecture but first we'll need some sample code to run so when you're all ready you can go ahead and close out of all this stuff and you can move on to the next lecture where we will talk about setting up a love project so if you haven't already go ahead and run love as it is by double clicking on the shortcut and you'll be greeted with some weird-looking love2d window it might not look exactly like mine depending on your version but i can guarantee it'll be something a little weird what this screen means is that love is running but no game files were found and this makes sense love needs some actual code from us before it can do anything so once you're done watching this you can go ahead and close out of it now this next part is very important games made with love have a particular folder structure in order for them to work luckily for us though it's really easy and straightforward first you need to make a new folder this can be anywhere on your computer i'm going to put mine right on the desktop right click new folder and then you're going to give it a name i would recommend naming it either the name of your game or your project i'm going to call mine test project next inside of this folder we're going to create a new file so i'm going to right click new and it's going to be a text document at first but we're going to be changing it from a dot txt to a lua file and it has to be called main.lua and yes we do want to change the extension if you cannot see the extension of the file you can go up to view and then there is a file name extensions box that you can click once you have this file created everything is set up and ready to go like i said at the start of this section love utilizes lua code in order for us to create games and this will be our first example of showing that in action now if we want to open this project in our development environment in my case i'm using visual studio code i'm going to start the program and then i'm going to go to file open folder and then now i need to navigate to wherever i had that folder in my case i had it on the desktop and here it is test project so i'm going to choose this folder and then choose select folder and now our project is open in visual studio code we can see our main.lua file that we just created and if we double click on it it opens up the file and we're able to edit its contents now that we have a project with the correct structure we can actually run this as is in order to run a love game you have several options a surefire way is to take your project folder click and drag it directly onto love like this and if it works you'll get a black screen that says untitled at the top this is normal the game project we made is running it's just that since our main.lua has nothing in it that means that nothing is going to happen another option to run your games which you will probably prefer is to run the project within visual studio code itself if you have your project open like this you can use the hotkey alt l and it'll take your code and run it through lua just like before keep in mind that this requires you to have the setup steps from the previous lecture so if alt l isn't working for you in visual studio code take another look at the previous lecture to see if you miss any steps as i've mentioned love utilizes the programming language lua to do all of the coding if you haven't used lua before i recommend checking out my full course on udemy.com called lua programming and game development with love this course features a full section discussing lua teaching you everything you need to know in order to start programming your own games the whole course assumes no prior technical knowledge so if you've never programmed before it'll be perfect for you but even if you do have experience programming it'll be a great way to become more familiarized with the language especially with the tricky concepts like tables which are important data structures that are unique to lua there's a link to the course in the description and using this link will automatically apply a discount code so be sure to check it out now that love is installed and everything is ready to go we can start talking through love fundamentals and get started with making our basic project which will look like this just a quick demonstration of the game window drawing graphics and text and receiving input from the player since this is a brand new project with a brand new main.lua file we don't have any code yet now whenever i start a new game with love i always start by putting in the three main functions that make our game work and that's the load function the update function and the draw function let's go through these one by one first we got function love dot load this is what this function will look like in our code since we see that this function has love in it it's clear that we're going to start working with the features that the love game engine has to offer for this function in particular it's going to run the moment that the game starts so whatever we put in here before the end that code is going to be run immediately when the game loads and it's here that we're going to specify our global variables adjust the window size and perform any other preliminary setup before the game fully starts the next function we have is function love dot update notice that this function is a little bit different because this one has a parameter dt essentially love.update is going to be our game loop in other words this function is going to be called every frame that our game is running since by default games made with love run at 60 frames per second that means that the code that we put inside love.update will be run 60 times every second finally we have our function love.draw as the name implies this function is used for drawing graphics to the screen basically anything that the player sees on their screen is going to be a result of some code that we put inside this function draw is actually sort of similar to love.update because it runs every single frame as well however it is very important to remember that draw is reserved for anything involving graphics and images you shouldn't perform any calculations or declare any important variables in here let's do a simple example to help you get a better understanding of how these three functions interact with each other in the load function let's put in a new variable i'm going to call it number and i'm just going to set it equal to zero since this variable is declared in the load function that means that this variable will exist from the moment that the game starts next in the update function let's update that number variable we'll say number equals number plus one now since this line of code exists inside the update function that means that number is going to increase by one every single frame the game is running finally in the draw function let's put in the following line love.graphics.print and we'll print out the value of number we're just taking this value and printing it out to the screen and keep in mind that in order for this print function to work it has to be run within our love.draw function so now you can go ahead and save and let's run and although it's small in the upper left hand corner you'll be able to see the value of number it's very quickly increasing by 1 every single frame and since the game is running at about 60 frames per second that means that the variable will be increasing by 60 every single second this whole setup here is essentially how love games work major variables are declared up in love.load the variables are altered in some way in love.update and then using those variables we're going to draw something to the screen in love.draw with this fundamental concept understood we are ready to move on so far in this course the only thing that we've drawn to the screen has been text now unless you're going to make some kind of text-based adventure sort of game you're probably going to want to have actual graphics in order to slowly introduce ourselves to how using graphics works we're going to start off by using simple shapes before moving on to showing real sprites or images let's first start by getting rid of the code that we included in these functions in the previous lecture since that was just for a short demonstration now we're going to start off this lesson in the love.draw function as mentioned in the previous lecture it's in here that anything that we want to draw to the screen will go let's start by drawing a basic rectangle we'll do love dot graphics dot rectangle this is a function that love includes for us that when used in the draw function allows us to draw a rectangle now this function has several parameters that we'll need to take care of and i'll explain what each of them means after we type them in the first parameter is what's called the mode of the rectangle which just specifies if we want our rectangle to be completely filled in or we want only an outline of a rectangle we'll make this a filled rectangle so the first parameter will be fill in quotation marks the next two parameters are this rectangle's x and y position values in the game world which for now we'll just leave to be 0 and 0. finally the last two parameters are the rectangles width and height go ahead and make these whatever you'd like but i'm going to go ahead and do 200 for the width and 100 for the height and that's it with this function in place we should expect to see a rectangle drawn to the screen now we'll just save and run and there it is our rectangle is up here in the corner as we specified in the function this rectangle is filled in and it's not just an outline for reference if we were to change this fill to line like this and then save and run it is now just an outline of a rectangle but i'm going to change this back and run again the width and height parameters that we specified were 200 for the width which we can see it moves to the right 200 pixels and a height of 100 which is 100 pixels tall now the last thing to discuss here is the x and y position values of this rectangle by x and y i mean the location of the rectangle in the game world right now we have it set to be located at position 0 0 which we specified with these parameters right here the position 0 0 is this upper left hand corner of our game window see the game world is one big grid and every pixel on screen has its own coordinates an x and y value if you remember from your basic math classes x refers to the horizontal location in a grid and the y-coordinate represents the vertical location what might be a little bit different than you may remember is that in love y increases downwards rather than upwards for example if we wanted to find the pixel coordinates at position 200 400 we would look to the right 200 pixels and then down 400. and let's actually try this out back in the code we can change this zero zero to say 200 400 so now our rectangle will be located at the position x equals 200 and y equals 400 and we can save and run once more and there it is we see that our rectangle has moved to this new position essentially its x value changed from here 0 0 to 200 to the right and 400 pixels down making its new position right here and also should i clarify that the x and y position of a rectangle is its upper left corner so this point right here then we specified the width and the height to be 200 100 and that width stretches to the right from the position and down from that position as well a great thing about love is that it comes with so many helpful tools for us as programmers that make our jobs easier just like this rectangle function right here it would take a lot more code and a lot more time just for us to get to this point with one white rectangle in a game window love offers so many functions and features that make game development much simpler and you can take a look for yourself open up an internet browser and go to this page love2d.org wiki on this site there's all kinds of information about what love has to offer but what you'll find most useful is this section on the side the documentation here every function that love comes with is outlined and explained thoroughly so you'll always be able to figure out how something works or how to use it for now since we're focusing on drawing graphics let's click on this love.graphics section here if we scroll down we'll see a huge list of all the different types and all the different functions that come with love.graphics in this functions section under functions drawing we can see all kinds of simple shapes like live.graphics.circle or triangle or there's also the function we were working with love.graphics.rectangle and let's try clicking on this one what we get is a very detailed overview of what this function does and how it works up at the very top it simply tells us it draws a rectangle following this it comes with this synopsis section which tells us what each of the different parameters mean and how to use them it's the same parameters that we defined in our file we had mode x y width and height so if you're dealing with a function in love and you forget how to use it or you don't remember which parameters you need to specify you can just go to the love wiki and you can just search for the function or even easier you could just type love2d rectangle into google or something and the first result will most likely be this page each of these pages even have examples if you go all the way down to the bottom that show an example of this function being used in action so be sure to take advantage of that if you ever need additional help because sometimes it won't always be completely clear just looking at the documentation now the game we're working on right now involves clicking on targets that will pop up on the screen which will momentarily replace with simple circles so let's go back a screen and scroll up to find love.graphics.circle before we use this function let's take a look at the parameters we got the mode which is the same deal as with the rectangle where it defines if it's filled in or just an outline we got the x and y position and we have the radius let's go back into our code and try it out we'll type in love.graphics.circle and our mode i'm going to choose fill again our position i'll keep at 0 0 for now and the radius can be whatever you want we'll start with 100. when we save and run we'll see that our circle is being drawn in the upper left hand corner of the screen but most of it's cut off this is because with circles the position value is the center of the circle so since the center is at position 0 0 that means three quarters of the circle is being cut off let's change this position value to something like 300 200 now let's save and run that there we go now we can see the circle in its entirety and you'll notice that the rectangle is still being drawn to the screen as well and that's because we left this rectangle code in our draw function in the next lecture we'll give a bit of color to these shapes and talk a bit about what happens if these two shapes overlap with each other looking at just a black and white screen like this is getting kind of dull so let's add some color in programming at least in most cases color is defined by using a color model called rgb which simply stands for red green and blue these are the three main colors that computer or television screens use and by mixing these colors together in certain ways you can produce different colors sort of like how you can mix paints together to get different paint colors and actually every color can be represented by some combination of red green and blue which is why programmers like to use rgb because they can precisely get the exact shade that they're looking for in love there is a very handy function called love.graphics.set color feel free to look up this function in the documentation for more detailed information but basically it accepts three parameters one for red one for green and one for blue each of these colors will be given a value from zero to one zero being none of that color one being as much as possible and then for partial values you will use a decimal value for example if i did the combination 0 0 1 that would give us a very blue color since the third parameter is for blue and we set it to the maximum amount or if we did 1 1 0 that would give us a very bright yellow color because we maxed out red and green and used no blue and red and green make yellow and like i mentioned earlier we could use partial amounts so let's say we set green to 0.4 this would give the resulting color more of an orange color since it's less green let's go ahead and start things off by adding a call to love.graphics.set color and for the parameters put in whatever combination of red green and blue that you prefer for now i'm going to go with 0 1 and 0 which should give us a strong green color when we save and run the game you'll see that both of these shapes that were white before are now green in case you're wondering why both of the shapes change colors is because when you call set color everything else in the draw function will be affected by that color shift by default the draw function sets the color to white which is why we were originally seeing the white shapes in our game let's try making our shapes different colors after the rectangle function is called let's go ahead and call another love.graphics.set color and this time i'm going to make the color 1 and 0.63 and zero now go ahead and save and run the program as you'll see both shapes have their own colors this is because in our code we started off by setting the color to green which then we called the rectangle after that we changed the color over to this orange shade and then we drew the circle the shapes were drawn while the color was set to something different for both of them here's a little thought what would happen if these shapes were drawn at the same location what if the rectangle was actually drawn up here towards where the circle is we can actually test this out real quick if we change the rectangle's y position right here to something higher like 250 higher up on the screen if i save and run we'll see that the circle overlaps the rectangle well this raises another question why is the circle on top rather than the rectangle well it comes down to the drawing order if we look at our code in the draw function we drew the rectangle and then we drew the circle since the rectangle was drawn first the circle that gets drawn afterwards just draws over top of it think of it like pieces of paper i first put the rectangular piece of paper on my desk and then i put the circular piece of paper on top of it of course since i put down the circle after the rectangle the circle will be on top the same concept applies here it's important to be mindful of what order you draw everything in so that important graphics don't get drawn over before wrapping up this lecture if the concept of rgb is new to you i recommend checking out the w3schools color picker page for more detail about creating colors you'll notice here that if i choose a color and then i look down here to the rgb section the scale is actually represented on a scale of 0 to 255. this is actually typical rgb normally is represented on a 0 to 255 scale love used to do the same thing but in version 11 of love they switched over to the zero to one scale that's used today so if you're playing around with this picker and choosing colors that you want to try out in your love games you could just take these values here copy them and if you wanted to use this exact same color you could paste them into the set color function but then divide each one by 255 so we can divide all three of these values by 255 that would transition it from the 255 scale to the 0 to 1 scale now that we have a firm understanding of how graphics work in love let's move on to start implementing some gameplay elements so in this game there will be a circular target that appears on the screen and the player will have to click it as fast as they can once they click it it will reappear at a different spot on the screen each time they have a successful click their score goes up in order to easily coordinate the setup for the target we are going to be making a target table that stores a few values for us if we keep all the values related to the target in one table it will be easier to manage and remember where everything is stored so in order to do this we'll initialize our table in the load function as you may remember the load function executes immediately when the game begins so this is the perfect spot for us to put this table we'll write target equals empty table now this is the table that we'll refer to whenever we want to talk about this main circle target now this target needs to have a position so let's give it a target dot x and we'll start off at 0 and a target dot y also starting off at 0. one last thing that this target needs is a size since our target is a circle we need to store the value for the radius for now let's make target.radius equal 50. this about covers the main aspects of our target so let's go down to the draw function and use these new values to actually draw this target table that we just created and we actually do not need any of this stuff right now so we'll get rid of it we'll use the love.graphics.circle function we'll want our target to be filled but this time we're going to make the position for the circle to be target.x and target.y and also we're going to use target dot radius for the radius of this circle instead of filling in specific values for this x y and radius position like we were doing before we're using our variable values from the table this makes things much more clear what values these represent now in addition to just drawing a circle it would be nice to have some color so i'm also going to include a love.graphics.set color and we'll make our target red so i'm going to make it 1 0 0. now if you save and run we'll see a little bit of this circle in the upper left hand corner same issue as before our target is currently located at position 0 0 which means that this position right here is its center we can move this out of the way so we can see a little bit better by adjusting these values right here i'm going to put the target at position 300 300. keep in mind that we're not adjusting this draw function the circle function at all all we're doing is adjusting the target.x and target.y values which in turn adjusts these values right here so if i save and run once more our target has moved to a more visible position now that we have this in place let's go ahead and specify our global variables besides the target itself there are two values that the game will keep track for us and that's the score which we'll specify here score we'll start off at zero which will increase each time we hit a target and also the timer which will count down in real time during gameplay for now we can initialize both of these to zero and that's all we really need for now we'll flush out the functionality for these values in later lectures in the next lecture we're going to talk about how we can incorporate the mouse into this game when we click on this circle which is currently representing the target we want our score to increase so let's go through how to do this we have our score variable right here so what we can do is print it out down here in love.draw we're going to do love.graphics.print and we're going to print out score at position 0 0. this will put the value of score in the upper left hand corner so let's save and run and you'll notice a few things first the score value is very very small and hard to read and also it's the same color as our button let's fix these issues now first regarding the color in order to fix that we need a new set color call right before we print our text that's simply done by doing love.graphics.set color and then we want to make it white so that's one one one maxing out all three values results in white and we can check this the text is now white now let's work on making it bigger which we'll just need to change the font up in our load function let's create a new font we'll do game font equals love.graphics.new font with two parentheses whatever number we put in here let's try 40 is going to be the new font size for this game font if you look at the documentation for this new font function there are actually some optional parameters that you can put in here as well one of them being an external font file say you want your font to be different from the default love2d font you can include a dot ttf or otf with your game and then reference it in this function we'll be doing this in a later game but for now using the default font is just fine so now that we have our new game font we just need to set the font love.graphics.set font and the font we want to set the game to is game font now if we save and run our text for the score is much more readable now and if you want to be bigger or smaller you can adjust that number in the new font call one thing to notice is that this set font call works very similarly to these set color calls all font related drawing after this point will be affected by this font change so if you want multiple fonts in your game you'll need to call this set font function before each of your print statements now that we can clearly see our score at the top we're going to go through and see how we can click on that target we're going to be using love's mouse pressed function if you go to the wiki and you search for mouse pressed you'll be able to find this page on this function that we'll be using this is love.mousepressed and the way it works is we can actually copy this whole function go back to our code and at the bottom we'll type function and then paste this all in and put end i know the way that we're setting this up is a little bit different than what you might be used to but bear with me i'll go through exactly what's happening after we're done with this function in place we're ready to start adding code to it the way we use love.mousepressed is a little bit different than the way we've used a lot of the other functions here what we're doing is we copied this declaration and what we're going to do is add our own code to this function so that whenever the mouse is pressed our custom code will be run we want to know when the user clicks their mouse so we can determine if they clicked on the target or not these parameters up here help us accomplish this the x and y parameters represent the mouse's current position when the mouse is pressed or when you click a key on your mouse the button tells us which button on your mouse was clicked and these is touch and presses parameters are not very important to us right now those are just used for mobile but we'll worry about those later right now we're focusing on these first three to reiterate what we're trying to accomplish here is whenever the player clicks the mouse particularly the left mouse button we want to increase the score if it's over top the target so we're going to be utilizing this button parameter to verify that the button that was clicked was a left mouse button to accomplish this we're actually going to utilize an if statement we can do if button is equal to 1 then and the reason we're checking to see if button is equal to one is we can go back to the documentation this documentation gives us an overview of the parameters we can see this button parameter and it says here specifically that one is the primary mouse button or the left click two is a secondary mouse button and three is the middle button so in our case we want to make sure that button is equal to one before continuing on so with this if statement we're verifying that the button that was clicked is the left mouse button and for now if it is let's increase the score score equals score plus one and we can save and test this out as is we'll run if i click we can see our score increase however you'll also notice that if you right click nothing happens and that's because we are checking that the button that was clicked was specifically the primary button any of the other buttons will not work you will notice though that currently i can click anywhere on the screen and our score will increase when rather we want the score to only increase when we're clicking on the target itself so in the next lecture we're going to take care of that we can currently click anywhere on our screen to increase the score but for our game we need so that the score only increases when we click on the target or inside of this circle here basically we'll need to ask the question when the player clicks the mouse is the mouse located inside of the circle if so increase the score otherwise don't do anything this will require a little bit of math in order for us to figure this out if we have the mouse's position and we have the target's position how can we verify that the mouse is located inside of the target circle here is the target's x y position value right in the center of the circle and at the mouse's tip is the mouse's x y value the other important information is the radius of the circle it is this length with all this information it might be easiest to measure how close the mouse is to the center of the circle we have two points here if the distance between these two points is less than the radius of the circle then that means the mouse is located inside of the circle for example if the mouse is here the distance between the center of the circle and the mouse is larger than the radius of the circle so that means that is outside the circle but if the mouse was here the distance between the center of the circle and the mouse is less than the radius of the circle turns out to be pretty simple logic in order to implement this logic we'll need to utilize the distance formula which looks like this what we're going to do is use this formula to calculate what the distance between the mouse's xy position and the target's xy position is then if that distance is less than the radius of the circle then we know that the mouse is inside the circle the distance formula is not included with lua or love so that means that we are going to have to write our own function that does this formula down at the bottom of our code we're going to write a new function that will do this we're going to call it function distance between if we refer back to the distance formula we can see that it uses four different values to determine distance it needs the x and y of one point and the x and y of another point so that means our function is going to have four different parameters it'll have x1 y1 x2 and y2 representing the two different x y coordinates and then don't forget the end now inside of this function we are going to use these parameters to perform this calculation what makes this tricky is that we somehow have to convert this formula into code which is a bit weird because how can we make this square root symbol or these squared values we'll go through how to do just that let's take this one step at a time we'll start with the inner part of the square root let's take a look at this x2 minus x1 squared part to do this we'll simply put in x2 minus x1 then we need to somehow take this to the power of two this is done pretty easily just with power of two and let's take clear the first part this is essentially the same as this so let's do the next part which is actually pretty similar we're going to add y2 minus y1 squared and that's everything for this formula that's under the square root symbol which means all that's left is to actually square root everything that we have here this is done by using the function math dot square root sqrt and then we just need to put whatever we want to square root inside of its parentheses so if i open the parentheses on this side and then put the closing parenthesis on this side that means all of this is contained within our math dot square root call now that this value is successfully calculated and it matches the real distance formula we just need to return it so we can say return and although it was kind of tricky we successfully implemented a function that calculates the distance between two points now that we have this function all ready to use we can go back to our code inside of the mouse press function right here and utilize it now recall what we're trying to do here we need to test to see if the distance between the center of the circle and the mouse is less than the radius and if it is that means we're inside of the circle so let's give this a shot first i'm actually going to delete this line because we don't need it quite yet and first off i'd like to use the distance between function to actually get the distance between the mouse and the target at this point in the code and i think it would be best to store this in a local variable we'll say local mouse to target equals and just as a reminder we're using the local keyword here because this variable is only going to be used for this calculation and that's it we don't need to make it global now to use the distance between function we need to make a call to it so we're going to say distance between and then we need to provide all of the parameters for this function remember that the parameters are defined right here x1 y1 x2 y2 it's just two separate points and the points in question here are the mouse's position and the target's position let's start with the masses position we actually have the mouse's position right here as parameters in love.mousepressed so for x1 y1 we can clarify just x and y and these refer to the mouse's xy position next we need the targets x and y values which we have stored as target.x and target.y pretty simple so with its parameters in place that means that after this function runs in our code mouse to target is going to contain the distance between the mouse and the center of the circle with this value ready to go we now need to verify that this value is less than the radius before increasing the score so this is going to require another if statement we're going to say if mouse to target is less than target.radius then now one thing you'll notice here is we actually have an if statement inside of another if statement what's going to happen is this s statement is going to run whenever the mouse is pressed then it's going to go on to this middle section calculate the distance between the mouse and the circle and then it's going to ask this question so if this condition in here is true if the mouse the target value is less than the radius of the target that is when we want to increase score therefore this line right here is only going to be reached if we're pressing the left mouse button and the distance between the target and the mouse is less than the radius finally we're ready we can go ahead and save and run and now if i left click outside of the target nothing happens but if i move the mouse inside of the target our score will increase and again only if i'm left-clicking if i right-click like this nothing happens left-click it does work and outside nothing happens i'm very happy to have this working but this isn't much of a game yet there's no challenge when the target stays in place like this the whole time i can just repeatedly click on it in the next lecture we're going to work on making the target change to a different screen position every time it's clicked on in the final game we want to make it so that when the player presses on the target it will jump to another position on the screen let's implement this now the code that we're going to write is actually going to go right here right after the score increases because if the score increases we know that it's okay to change the position of the target and to do this all we need to do is change target.x and target.y to different values let's try a basic example here let's just say target.x equals i don't know 500 and target.y equals 400. if i save and run if i were to click on the target we can see that the target jumps to a different position it doesn't change anymore after that if i were to keep clicking on it it keeps jumping to this 500 400 position that's why this game would vastly improve with some randomness lua comes with a math.random function using this we can generate a random value and we can assign this value to the coordinates of the target this would put it in a random unexpected position now there are several ways to use this function but the best way for this situation is to provide a minimum and maximum value so let's try this out for target.x let's say math.random and like i said we need to provide a minimum value let's make a minimum value of 0 and a maximum value of 100 and let's actually copy this and do the same thing for target dot y what these lines mean is that when we increase the score we're also going to change the x position of the target to some number between 0 and 100 some random number same thing for target.y it'll be some random number between 0 and 100. let's save and run and try this out so i'm going to click on the target once and it jumps up here i'm going to click on it again it moves a little bit it keeps jumping to random positions but it's isolated to this really small area in the upper left hand corner that's because we defined the random values to be between 0 to 100 pixels and 0 to 100 pixels so there's just a small box up here ideally we would want this range to extend from the whole left side of the screen to the whole right side of the screen and the whole top of the screen to the whole bottom meaning it would jump to anywhere on our game window so in order to accomplish that instead of going from a random value of 0 to 100 we'll go some random value between 0 and the screen with this whole width of the screen same with height 0 to the whole height of the screen and we can get those values very easily we can simply change this 100 to love dot graphics dot get with with two parentheses this call right here gets the width of our game window in pixels which is perfect and we can do the same for our target.y love.graphics.get height with two parentheses this will get the height of our game window in pixels so go ahead and save and run now and let's try this out now it's jumping all over the place it can jump to any point on the screen now i want to address a very small issue that will help with polishing our game up you see right here the circle kind of went off screen a little bit and there's an expected reason for this the x and y position of the target is the center of the circle right here so if the circle can go anywhere from zero the very very top of the screen to the height of the screen the very very bottom that means that this center point could potentially be right on the edge making half of the circle inaccessible so this means if we want to keep the circle completely visible on screen we should adjust this range slightly so how can we adjust these random ranges here to prevent that from happening well we know the radius of the circle target our radius so if we make sure that there's at least a radius length between the center point of the circle and the edge of the screen we'll know that the circle is always completely visible with this in mind we could just change this 0 to target.radius so since target.radius is 50 that means that this random range is from 50 to whatever the width of the screen is and we can actually do the same thing for our y position target.radius so doing this takes care of the left side of the screen the circle will never get so close to this left edge or this top edge that it'll become slightly hidden however it is still possible that since we're going all the way to the edge here and this bottom edge that it could go off screen somewhat there to fix that we just need to adjust this final value if we decrease target.radius from this top value same here target dot radius that will prevent the circle from going off screen at all so with this we can play the game and now we can know with confidence that the target will always be 100 visible each time we press on the target we've only scratched the surface of what we can do with this game framework and there's still plenty of things we could do with this simple game that we created just to flesh it out a bit more if you'd like to dive deeper into this framework be sure to check out my full course on udemy lua programming and game development with love this course features all the footage from this video but with so much additional content we add more to the game from this video where we include real graphics to it create a main menu and have a timer that counts down from there we go on to create two full additional games first being a top down shooter then moving on to a platformer game there's also two dedicated sections talking about deploying a web game with love and creating mobile games there's a link in the description to this course where you can find more information about all the topics covered also using this link will automatically apply a discount code and by the way all udemy courses come with a 30-day money-back guarantee so there's no risk in giving the course a try if you have any questions leave a comment on this video and if you like this video be sure to hit the like button and subscribe for more game development content thanks a lot for watching

Channel: Challacade

Views: 23,881

Keywords: game development, love2d, lua, coding, programming, gaming, kyle schaub, course, udemy, tutorial

Id: wttKHL90Ank

Length: 55min 45sec (3345 seconds)

Published: Fri Apr 02 2021