Make Games with Love2D - Setup, Structure, and Development Basics

hi my name is Kyle and in this video we're going to go over the core fundamentals of using the game framework love to D we'll start off by talking through the process of installing love and getting your programming environment set up then talk more about how projects are organized with love and finally we'll start the process of creating a game from scratch while working on this game we'll talk about key features of love including the core load update and draw functions getting the structure of our game set up with our global variables drawing shapes and colors to the screen 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 this is going to be a super short lecture because installing love is very easy just go to love to do org and the download links are right there just click on the appropriate link for your operating system if you're on Windows I would recommend the Installer and it will automatically install love to your Program Files honestly that's basically it I would recommend having a shortcut available on your desktop as it'll come in handy soon when we actually start creating our first project love is a pretty simple program to work with and a 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 a text editor but if you want my opinion on the best way to work with love is to use atom now if you haven't heard of atom it's a highly customizable text editor that was built with programmers in mind anyone is capable of writing up their own add-ons for atom kind of like extensions with Chrome and you can add these modules to make the editor more suited towards you and this is good for us because there just so happens to be a few modules that help with making games for love I should add that this is completely optional since you can just program in any text editor so you can skip to the next lecture if that's what you want to do but if you want a bit more convenience when you're programming I'd recommend going to Adam Daioh then click on the download link and then install a program then once it's installed go ahead and open it up and you should see something that looks like this ears will probably look a bit more bare than mine because I already added a few add-ons let's go ahead and get the love package installed to Adam we can go up here to Adam Preferences or if you're on Windows I believe it's file settings and then it'll bring up the settings tab and we'll go down to install and the package we'd like to install is called love - IDE and if we search for that the very first hit should be the one that we want so go ahead and hit the install button while it's installing it might ask to install dependencies as well and a message will appear in the upper right corner of your screen so just say yes whenever that happens when it's installing you'll want to go to packages and then search through our packages for love IDE when it pops up you want to click this Settings button it'll show us a few different things that will be worth looking at the most notable of which is this this is the path to the love executable you may have noticed that when love IDE was done installing this little play button up here appeared what this does is whenever you click on it it'll run in love but before that will work we first need to define the path to love on our computer it even gives you hints up here for where the program is based on your operating system if you're on Mac it should be this path and with Windows this should be your path this x 86 refers to whether or not you're using the 32-bit version of love so if you download the 32-bit version keep the x 86 but for using the 64-bit version then don't include that part so once that's there you can keep scrolling down if you like and list out all of the different features that this program comes with and all of them are really excellent for what we'll be doing you still won't have all the package installed that I do but that's fine because now you know how to install new add-ons for atom feel free to go through and add whichever ones you feel would be useful or you can wait until we actually start getting into programming and then find some packages then so if you haven't already go ahead and run love as it is by clicking on the shortcut and you'll be greeted with something it depends on your version of love but here I have super toast what the screen means is that love is running but no game files are found and that makes sense love need some actual code from us the programmer before it can do anything so once you're done watching this go ahead and close it for now so as you've noticed love doesn't actually have any kind of editor that it comes with so it's not like unity or game maker instead it's up to the user to provide code for everything that occurs in the game and after running it you can see the game in action now I know that may sound scary not having immediate feedback on what the game looks like but believe me having this code focused paradigm allows so much more freedom on the part of the user and you'll see what I mean by the time we move along with a series we're going to use outside tools in conjunction with love in order to get everything accomplished in an easy way now this next part is very important games made with love have a particular folder structure in order for them to work looking for us it's really easy and straightforward first you need to create a new folder and you can call it whatever you want I'm just gonna call mine game of course a more descriptive name like the name of your game that you're making would be best but for now it's okay now in this folder we're going to actually start putting some code in so what I'm going to do is I'm going to open up Adam and in Adam we can add a project folder and go to our desktop where we created our folder and choose game and you'll see that on the side we can see our project game now if you right click and choose file we can give it a new file and this new file is going to be called main Lowa make sure you give it the dot lua extension in order to make it a lua file in addition to that main is also a very important component to this it has to have this exact title but once you have that that's all you really need this structure we have right here is a fully functioning loved game so let's talk about how we actually run it there's a few ways the first way to take the game folder and we created on our desktop and we can simply drag it on to love and when we do that the game starts up now there's nothing there it's just a black screen but that's because we didn't add anything to the code so we can close that or the other way is in atom since we made this play button and we haven't mapped to the love executable all you do is click the play button and it's going to start the game it's gonna run our code through love let's add a little bit of code into this file just so we can have something show up on our game screen so we're gonna write function love dot draw and for now don't worry about what this means we'll discuss this love deck graphics dot print and in here we'll have hello world between quotation marks and make sure you put end at the end on also don't forget to save it's very important so what this code will do is love is going to print or draw to the screen the message hello world and if we run the game we can see that it does up in the corner we get a little hello world message and with the structure set up we're ready to start programming as I mentioned love utilizes the programming language Lua to do all the coding if you haven't used Lua before I recommend checking out my full course on udemy comm titled Lua programming and game development with love this course features a full section discussing Lua teaching you everything you need to know to start programming your own games the whole course assumes no prior technical knowledge so if you've never programmed before they'll be perfect for you but even if you do have experience programming they'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 let's go ahead and start developing very first game with love we're going to start by making a very simple game and this is what's gonna end up looking like once we're done it's a very simple button pressing game you have a timer at the top it's counting down and the goal is to press the red circle as fast as you can before the time runs out and of course it keeps track of the score at the top and that's basically it although the game is very basic it's an excellent game to get our feet wet with making games because it covers most the basics by the end of this video we will get through most of the functionality for this game finally we're going to start programming our first game first things first is we need to create our project folder so go ahead and create a new folder and you can name it whatever you like I'm gonna name mine button and once that folder is created we're gonna go ahead and open up atom and then we need to add that project folder to atom and that's this one then once that's added we need to make a new file and remember it needs to be called main.lua in order for our game to function correctly so just to make sure this works if we click run love opens up but it's just a black screen because we haven't added any code yet so that's good 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 is the load function the update function and the draw function let's go through these one by one first we got love dot load this is what this function will look like in our code since we see this function has love in it it's clear that we are going to start working with the features of love that the engine has the offer for this function in particular is going to run the moment the game starts so whatever you put in here is going to execute 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 set up before the game fully starts the next function we have is love a dot update now you'll notice this one is a little bit different because it has a parameter DT DT stands for Delta time but you don't really need to worry about what that means right now we'll get into that a bit more as the game moves along love that 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 inside love that update will be called 60 times every second finally we have our love draw function 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 something that happens inside this function draw is actually sort of similar to love to update because it runs every single frame as well however it is important to remember that draw is reserved for anything involving graphics or images you shouldn't perform any calculations or declare any important variables 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 make a new variable and call it number go ahead and 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 increase number by one now since this one code exists in the update function that means that every frame that the game is running the value that number contains is going to increase by one and finally in love dot draw we're gonna write the following line loved art graphics dot print and then we're gonna pass it number keep in mind that this is the same line that we were using before when we were doing our programming lessons so if we run our game up in the corner although it's small we can see that the value that we're printing out is quickly increasing it's the value of number every frame it increases by one and since your game should be running at 60 frames per second it's increasing by 60 every single second this whole process that we just went through is pretty much how love games work major variables are declared in a load function the variables are altered during the update function and using those values something is drawn to the screen in this case number was initialized in load it increases during the update and the value is drawn to the screen with this fundamental concept understood we are ready to move on in order to slowly introduce ourselves to how drawing graphics works we're going to only use basic shapes in this game let's start by first getting rid of all the stuff we had in the functions before now we're going to take a look at the draw function as I mentioned in the previous lecture it isn't here that any drawing functions go let's start by drawing a basic rectangle to do this we're going to use the function love graphics dot rectangle this is a function that love includes for us that when we use in draw 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 and there's two options filled or outline and we want our rectangle to be filled so we'll put fill in here the next two parameters are the position on the game screen that the rectangle will start in other words it'll be the upper left-hand corner of our rectangle so we'll start by putting it at 0 0 next is the width in the height of the rectangle so I'm going to make the width be 200 and the height be 100 and that's it with this function in place we should expect a rectangle to be drawn to the screen so when we run we see in the upper left-hand corner we have a white rectangle it's a direct result of all the stuff we put into this line as we specified in the function our rectangles filled and not just an outline we could change this to line for example and save and run and now our rectangle is just the outline of the rectangle the 200 and the 100 are the width and height parameters we can see this when we run the game our rectangle is twice as wide as it is high and that's because we specify the width to be 200 and height to be 100 like I mentioned it's in pixels so it's 200 pixels and 100 pixels and finally the 0 in the z-row are the X&Y coordinates of the upper left-hand corner and by X&Y I mean the location of the point in the game right now we have it set to be 0 0 which is the upper left-hand corner of the screen so this point right here in the upper left-hand corner that's the coordinates 0 0 the game world is one big grid and every pixel on screen has its own coordinates an x and a y value if you remember from your basic math classes X refers to the horizontal location on a grid and in Y refers to vertical location well might be a little bit different than what you may remember is that in love Y increases downwards rather than upwards for example if we wanted to find a pixel at coordinates 200 400 we would look to the right 200 pixels and down 400 pixels so let's try this out back in the code we're going to change the position of the rectangle to 200 400 so that means if the x-value of our rectangle is 200 and the y-value is 400 and when we run the game our rectangle has clearly moved before is in the upper left-hand corner but now how it has moved to the right 200 pixels and down 400 pixels and that's this point right here the upper left-hand corner of the rectangle because that's where the position of the rectangle is note that the size of the rectangle didn't change we didn't change a 200 over 100 here we only change these two values so the rectangle is the exact same size it's also worth noting that when we specify the width and the height here the width increases to the right 200 pixels and the height increases downwards 100 pixels that's what I mean when I say that the position of the rectangle is the upper left-hand corner see this is the position right here then it finds the width 200 pixels to the right and the height 100 pixels down and that's how a rectangle is formed a great thing about love is that it comes with so many helpful tools for us as programmers and makes our jobs easier just like this rectangle function and it's kind of the point of a game engine it would take quite a bit more time in code and over for us just to get to this point with one white rectangle in the game window love offers so many functions and features that make game development much simpler take a look for yourself open up your internet browser and go to a search engine and type in love 2d wiki the first result you'll find is this page this is the love wiki 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 and how to use it for now since we're focusing on drawing graphics let's click on the section called love dot graphics here is a huge list of all the options that this graphics module has to offer if we look under the functions section we should find our love dot graphics that rectangle function and here it outlines all the different parameters that were in the function and explains what each one does even if you scroll down to the bottom it has some sample code here of how the function is used real code so if you're dealing with a function in love and you forget how to use it just go to the wiki and search for the function or even easier you can normally just type in love 2d rectangle in Google or something and the first result will be this page now the game we're working on right now involves clicking on circles on the screen so let's go back a screen and find love dot graphics dot circle here before we use this function let's take a look at the parameters we got the mode which is the exact same thing as the rectangle one see they're filled or line then we have the X and the y which is the position of the circle which in this case is the center of the circle and finally we have the radius of the circle which is the size let's go back to our code and try it out on a new line let's type in love graphics dot circle and we'll make it filled we'll make its position zero zero and for radius let's do one hundred and save and let's run now we can see that there is part of a circle up in the upper left hand corner and the reason we can't see all of it is because we define the center of the circle to be zero zero so a lot of the circle is just off screen we can fix that by changing the position of our circle to be something like I don't know 100 100 so now we have 100 for the x-value 100 for the y value and also 100 for the radius of the circle so when we run we can see the full circle and all's glory and also notice that our rectangle is still being drawn to the screen because we left the rectangle function call still in here in the next lecture we're going to give a little bit of color to the shapes and we're gonna talk about what happens when these shapes overlap with each other looking at just a black-and-white screen 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 your three primary colors and if you ever took an art class at some point you knew that by mixing these colors together and certain ways will yield different colors in fact every color can be represented by some combination of these three primary colors which is why programmers like to use RGB because they can precisely get the exact shade that they are looking for in love there's a really handy function called love that graphics dot set color feel free to look up this function in the documentation for more detailed information but basically accepts three parameters one for red one for green and one for blue each of these colors will be given a value from 0 to 255 0 being none of that color and 255 being as much as possible for example if I did the combination zero comma zero comma 255 that would mean that we're giving zero red 0 green and full blue and we can see this since we call a set color function and we gave it parameters these two shapes down here will be affected by that so when we run our are now blue because the RGB scheme that we specified was just blue I need to interrupt the lecture real quick to talk about how love was updated in version 11.04 some of the stuff I just talked about isn't entirely accurate anymore like I just mentioned originally color values were integers in the range of 0 to 255 in versions of love that are 11-point oh and later this is no longer the case the range is now decimal values from 0 to 1 this course was filmed using love version 10 point oh so I'll be using the old scheme of 255 but for you you should use the 0 to 1 scheme if you're on 11 point O or later for example if I ever write 255 in one of these color functions you should simply write 1 instead if I were to write in say 180 for one of these values you can simply divide 180 by 255 to get roughly zero point seven zero six and you would write that instead sorry for the inconvenience on the subject in this lecture i only use 255 values so just remember to replace those 255 s with ones so once you call a set color function that means everything after it in the draw function is going to be affected by it so since we set the color to blue here that means both the rectangle and the circle are going to be affected but if we put in another set color loved-up graphics dot color and we put in 255 0 0 then that means we're now setting the color to red because we specified 255 red 0 green and 0 blue so if we run now we should expect to see this circle as red and the rectangle is blue because here which is a color to blue then we draw a rectangle so the color to red and draw the circle now here's a question what would happen if these shapes were drawn at the same location well if the rectangle was actually drawn at the same place as a circle let's test it out and our code instead of drawing the circle at 100 100 let's try at 150 350 based on that location the circle should overlap the rectangle a little bit so let's run we can see that where the circle overlaps the rectangle the circle is on top now why is the circle on top and the rectangle on the bottom and that has to do with the draw order we drew the rectangle first and then we drew the circle if it was the other way around then the rectangle would be on top this is because drawing on the screen is kind of like drawing a painting on a canvas if you draw a rectangle somewhere on your canvas and then you draw a circle afterwards a circle is gonna be on top of course because he drew the circle afterwards it's important to be mindful of what order you draw things in so that graphics don't get drawn over each other so in this game there will be a circular button that appears on the screen and then the player will have to click on it as fast as they can once they click on it it'll reappear at a different spot on the screen each time they click the score goes up in order to easily coordinate all this we're going to create a button table that stores a few values for us if we keep all of values related to the button in one table it'll be easier to manage and remember where everything is stored so in order to do this we're going to initialize our table and 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 go up here and we'll write button equals two curly braces this is the table that will refer to whenever we want to talk about this main circle button now the button needs to have a position so let's go ahead and give it a button dot X start off at zero and button dot y equals zero so now the button has an X and a y-coordinate another thing this button needs as a size so we'll put button dot size equals 50 we'll say and this is about covers all the main aspects of our button so let's go down to the draw function and use these values to actually draw this button that we just created we'll use this graphics dot circle that we already had so we do want the button to be filled but we don't want these three parameters that we have right now what we want to do is use these values up here so remember this first value is the x-coordinate of the circle that we're drawing so we're gonna put button X this next value is the y-coordinate so put button dot y and this last thing is the radius so we'll put button dot size see if we have the button object appear and all of these values associated with the button table are going to be used here when we're drawing the circle so essentially this draw function or the circle function is drawing our button for us so when we run we can see our button right up here it's in the corner because it's position is zero zero but we can change this position to whatever we want let's say 200 200 now we can actually see our button but regardless it's now banged on to the screen now to wrap this lecture up let's put some global variables into this game for this game we need to have a score so we'll have a score variable up here and we'll have a variable that keeps track of the time so timer will refer to these two variables whenever we're talking about the score or the time when we click this button we want our score to increase let's go through how to do this first we want to easily be able to know what our score is so let's print out the score value to the screen so we can see it well do this using the same function that we were using before love that graphics step print and here we're going to put score now when we run the game there's a few things that you might notice first of all the score is super small and you can hardly even see it and second it's red so let's first fix the red problem remember how I mentioned that when you call a set color function it affects everything after it well that's our problem so what we need to do is we need to set the color again here and we'll put in white which is the most visible color on our black background so we'll do 255 255 255 which is white white is what you get when you get full values for r g and b next to address the text being too small we'll need to change the font so up to the load function we're going to create a new variable called my font when you just study equal to love deck graphics dot new font and this my font variable isn't really a variable because we're setting it equal to a new font this is a function that creates new fonts for our games and this function takes a few parameters one thing about functions that we haven't really talked about yet is how there are oftentimes optional parameters for example in this function a required parameter is the font size but an optional parameter is the file name of the font file such as OTF or TTF we don't need to worry about providing font files since the default font that love uses is just fine so the only parameter we need to foot put in here is the font size I'll make it 40 remember all this information about this new font function is in the love 2d documentation there you can view all the different parameters that this function could take and get a better feel of what you can use to specify your different fonts so now that we have our font object we need to actually set the font to do this we use the function love that graphics dot set thought and the parameter for this is just the thought we want to set two which is my font the font that we just created so now anything that uses the print function after this line will utilize my font and to verify that works it is the font is now much bigger because it's using this new font or my font that's of size 40 and the text is white because we use the set color function here so all the problems are not fixed with that now that we can clearly see our score at the top we're going to go through and see how we can click on the button we're gonna be using loves mouse press function if your go-to loves wiki page we can find all the information we need to know about love that Mouse breast the way we use this function is a little bit different from the others and you'll see what I mean in just a moment what we're gonna do is simply copy this function definition right here and we're gonna go back to our code and we're gonna paste it at the bottom like this and don't forget to add the keyword function you have to have that there in order for this to work now the reason we did a copy and paste with this one is because we're not gonna be changing these parameters we're gonna leave them the exact same as they were and that's why this function is a little bit different what we're doing is we're overriding this function which just means that we're changing how this mouse press function works whenever it's called that's what these parameters are going to help us with whenever we click a button on the mouse that's what causes this function to be called when that happens these parameters change to the certain values that are accurate to what's going on right then the X is the x-coordinate of where the mouse was on the game screen when we clicked the y is the y-coordinate for the same situation the button is which button on our mouse was pressed when the but waiting this function went off the left click right click or the mouse wheel and finally this is touch parameter is use for mobile development and it lets us know if the teaser touched the screen in order to conduct this mouse press because in mobile development they're basically the same thing Mouse presses and touches this is verifies which it was but for now we don't really care about that because we're not working with mobile at the moment so now that we have this function in place let's go ahead and add some code to it the first thing we should do is check to make sure that the button that was clicked on the mouse was the primary left-click so to do this all we need to do is do a conditional statement to check for that so we'll say if button is equal to one then so what this if statement does is it verifies that button when the mouse was pressed is equal to one and if we go to the documentation on this this button parameter that we're working with says that one is the primary mouse button so by checking to verify that button is equal to one that's basically checking to see that the button that was pressing the mouse was the left button which is what we want inside this conditional statement we'll need to test to see if the mouse was located inside of the circle when the mouse button was pressed that way the button is only clicked whenever the mouse is hovering over it so we left up in the previous lecture by testing to see that the mouse button that was clicked was the primary left button we did that by testing to see if button is equal to one because one when it's from this parameter button means left click now there's something that we need to account for is that this parameter has the keyword button but up here we have the same word button so to avoid any confusion it would be a good idea if we change this to just be for example we can change it to anything so now whenever we want to refer to this button parameter we just need to say B instead and that means the exact same thing as before and that's the beauty of parameters is that you can redefine the names to be anything you want and it's important to always make sure you have distinctions between the parameters and any keywords you define earlier in your program so now inside of this if statement this is where we're going to test to see if our mouse is inside the button so when we click then that means the button is underneath the mouse and to do this it's going to require a little bit of math to figure out if we have the mouse's position and we have the buttons position how can we verify that the mouse was located inside of the buttons circle in other words how can we make sure that the mouse is inside the button when it clicks because of course if we're clicking on the button the mouse has to be over top of it in order for the click to count so we know with the button the buttons X Y value is right here right in the center of the button and the other important information is the radius of the circle which is the distance from the center of the circle to the edge of the circle 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 we have the buttons point and we have the mouse's point if the distance between these two points is less than the radius then that would mean that the mouse is inside the circles perimeter for example if the mouse is here to the right of the circle the distance between the center of the circle and the mouse is larger than the radius since the radius is only from here to here in the distance from the mouse to the button is from here to here clearly that difference is much bigger but if say the mouse was here the distance between the mouse and the center of the circle is less than the radius the radius is this big and if our masses inside that range then we know for sure that the mass is inside the circle so with that information we're going to have to utilize the distance formula but if you remember from your math classes measures the distance between two points and we can use that to know whether or not the maths inside the circle so the distance formula looks like this D is the distance calculated and we have two points each with an X and a y-value so that's for this x1 x2 y1 y2 comes from the first point has an x1 y1 and the second point has an x2 y2 so we could say that the circle utilizes x1 and y1 and the mouse utilizes x2 y2 and if we use those values in this formula it will return the distance between those two points so all we need to do is we need to implement this equation into our code so that we can plug in those values and get the actual distance unfortunately there is no function built into Lua or love that calculates the distance between two points so that's why we have to write our own function for this so we're going to write function distance between you can name this whatever you want and we need to give it four parameters we need to give it an x1 y1 x2 and y2 just like it does in this function here so we're going to write in x1 y1 x2 and y2 and don't forget to put this end at the bottom like all functions need now inside this function we're going to use these parameters that we defined in order to perform this formula now that might be a little bit tricky because this isn't something that you can just easily type into your code it has a square root symbol it has the power of two so let's go through how we can do this first we need to handle the square root Lua comes with a function called math dot square root and that's how you do the square root anything that is between these parentheses is going to be Square rooted so all we need to do is we need to put all this stuff that's underneath the square root inside these parentheses here so for example if we put 4 in here it would calculate the square root of 4 or if we put x1 plus y1 we calculate the square root of x1 plus y1 but we don't want to do that we're just going to enter in what the distant formula needs so let's just do the step by step if you look at the distance formula it starts with this y2 minus y1 power 2 so let's get started with that we're also gonna use the parentheses for this y2 minus y1 now we need to take this to the power of 2 because that's what it does in the formula and luckily for us this isn't too hard because lua comes with this character all we need to do is caret to that's the same as saying to the power of 2 which is what the formula does now let's move on next we need to add x2 minus x1 and again this is also taken to the power of 2 and that should be it if we compare what we have here inside the parentheses of the square root it should match we have here in the distance formula so essentially this calculates the distance between this point x1 y1 and this point x2 y2 now all it's left is we need to return it so we just write return all of that so although it was a little bit tricky we just wrote the distance formula as a function that accepts two points point one and point two and it does this big calculation and returns it so that's all we need to do for that now that we have this function all we're ready to use we can go back to our code inside the mouse press function and we're going to utilize that function when we're testing to see if the mouse is over top the button to do this we'll need another if statement so we're going to write an if statement inside of an if statement we call that a nested if statement so we'll write if and the next thing we need of course is the distance between the mouse and the button to do that we're just gonna call our distance formula function distance between now we wrote it so that we need to pass the parameters and those parameters are the X and y values of the mouse and the x and y values of the button so we're gonna start with a button it doesn't really matter which is which will do button X and button dot Y so these two values are going to correspond to these two next we need the Mouse's X and the mouse is Y now we can't just do Mouse dot X because we didn't specify a mouse table anywhere and this mouse not X doesn't really exist instead love comes with a function that we can use that gets this value for us it's called love that Mouse get X and also love that Mouse that get Y so with all these parameters in place this whole line should calculate the distance between the button and the mouse next we want to check and see that that value is less than button dot size or the radius of the button and right then and and that was a lot of work I understand that it was a lot of information at once so if you're bit unsure of what we just did I encourage you to go back and watch that process again just to get a better handle of how we did this but once you're ready let's go ahead and finish this up we now have an if statement inside of an if statement and how this will work is first it'll go to this first if statement if the button is equal to 1 or in other words if the player clip there click there left button then it's going to move on to this one and remember this if statement checks to see if the distance between the button and a mouse is less than the radius of the button or in other words is the mouse overtop the buttons circle and if it is we want score to increase by one and that should do it with everything in place here when we run the game and we click inside the button our score goes up and notice that if you click outside the button nothing happens anywhere you click it only works if you're inside the button itself and that's because we're checking to see if the mouse is located over top the button also note that if you try to right click it doesn't work that's because we made sure in this time I hear that the player was using their primary left button in order to do that click so none of the other buttons work for this in the final game we want to make it so that when the player presses on the button the button will jump to another position on the screen let's implement that now the code we're going to write is going to go right in here where the score increases all we need to do is change button X and button dot Y to different values let's try a basic example here we'll set button X to 500 and button dot Y to 400 now those are different values to what they were initialized to so when we click on it the button should jump to a different position so we click and the button moves but it doesn't last long because it's it's just going to keep jumping to 500 400 every time I click it's not going to change after that so what we want to do is add a little bit of randomness to this lua comes with a math dot random function using this we can generate a random value and we can assign this value to the coordinates of the button this would put it into a random unexpected position now there are several ways to use this function but the best way to do it with this particular situation is to provide a minimum value and a maximum value for example we could write 0 comma 20 and that would mean that this line will generate a random value between 0 and 20 more specifically they'll generate an integer between those values this can be applied very well to what we're doing go and start the game we want the x value of the button to jump to a random value between 0 the left side of the screen and the right side of the screen so we need to figure out what the width of the screen is and then just make the random value generate between 0 and the width and the same applies to the height with the Y value we want Y to be between 0 the top of the screen and whatever the height of the screen is at the bottom so let's figure that out right now so first let's take care of the x value well first @x to be math dot random and like I said we want this range to be from zero to whatever the width of the screen is and we can actually get that because love provides a function called love graphics dot get width and this just returns in pixels the width of the screen so essentially let's say that width of the screen was 1,000 pixels it returned a it would return an integer between 0 and 1000 which is exactly what we'd like it'll put the x position of the button somewhere randomly in between the left side of the screen and the rights of the screen and we're gonna do the exact same thing for y we're gonna do math dot random 0 comma love Dec graphics that get height this time and it works the exact same way from 0 to whatever the height of the screen is and that takes care of that if we won the game every time you click the button is going to be in a different position on the screen somewhere which is exactly what we want there is actually one small exception we need to account for if we keep clicking you will eventually see like this the button goes off screen a little bit and that's because we decided to make the range B from zero to the very edge so it could potentially be right on the edge the center of the circle and we actually don't want that because we get situations like this where the circle is partially off-screen we should do is make it so the position is between the radius of the circle and the height minus the radius this would mean that the center of the circle would always be a radius length away from the edge of the screen so we wouldn't ever get this situation where it's off screen at all so how about instead of zero right here we just say button dot size and let's do that for y as well button that size and for the width and the height what we're going to do is we're going to is subtract button dot size this will keep it from getting too close to the edge and that should fix that now if we keep clicking it'll never get too close to the edge this is about as close as it'll get because the center of the circle can only get as close to the bottom as the height of the screen minus the radius of the circle which is about right here that about wraps up this introductory tutorial of love 2d Congrats on making it all the way here however we've only scratched the surface of what love has to offer we discussed the core basic features here but there is so much more to learn if you'd like to dive deeper into this framework be sure to check out my full course on udemy comm called Lua programming and game development with love this course features all the footage from this video but with so much additional content coming to a total of more than five and a half hours of video lectures in these lectures we will continue on and finish this button clicking game by implementing the timer adding a main menu and polishing up the game in general following that we will move on to complete two more fully completed games with love the first being a top-down shooter in a second being a platformer we go over so many important topics in these videos including drawing sprites getting keyboard input making a character move rotating graphics adding enemies and projectiles implementing a camera using the physics engine adding animations using tiled to design levels and saving and loading data after going through all these concepts you will be fully ready to create your own games with love if you're interested there's a link in the description of this video to the course using this link will automatically apply a discount code so look it over and see if it's something that you'd be interested in all you to me 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 the comment on this video and if you enjoyed the content here be sure to hit the like button thanks for watching this tutorial and I look forward to seeing you in the next one

Channel: Challacade

Views: 78,915

Keywords: love, love2d, lua, programming, game development, indie, setup, installation, project, structure, basics, beginner, atom

Id: yrIwFflGeyA

Length: 56min 11sec (3371 seconds)

Published: Thu Dec 20 2018