ADDING ASSETS TO YOUR GAME! - Tutorial Using Love2D & Lua

while we do have a somewhat functioning game i think we can all agree that it could use a splash of color it is good practice to split up your game's logic and assets so i'm going to create a folder inside of our project folder named assets in here i will add the five graphical assets that i want to implement sprites for the player paddle the ai paddle and the ball as well as two sprites for the background i would suggest that you try to create your own assets but the ones i use are available in the link below let's start by adding the sprite for the player paddle open the player.lua file in here i will create a new variable that i will call img we are going to load the player sprite to it using the love.graphics.new image function this function takes one argument a string that contains the path to the file as well as the file name and extension in our case it's asset 1.png we are going to change the hardcoded values of the player's width and height to instead get their values from the asset itself so that the hitbox for the player will match the image to do this we first type the variable that contains the image followed by a colon and get width this will return the width of the image we can do the exact same thing for the height except that we use get height now all that remains is drawing the image all we need to do is replace the love.graphics.rectangle down in the playerdraw with love.graphics.draw this function takes 10 arguments but we only need to pass in the first three the image and the x and y coordinates and now we have a cool image instead of a boring white box now we can do the same thing for the ai paddle open the ai.lua file create a new variable called img and set it to be equal to love.graphics.new image inside of the parentheses we need to type a string that contains the location of the file that we want to use in this case assets2.png just like with the player we are going to replace the hardcoded values of the width and height and get them directly from the image itself finally we need to draw the image so replace the rectangle code with love.graphics.draw and pass in the image and position variables great now the ai paddle has a cool sprite as well the ball is the last surviving white box let's make them go extinct open the bold.lua file and create a new variable called img and set it to be equal to love.graphics.new image and type in the path to the file as a string next we make the width and height variables get their values directly from the image again we need to replace the code that draws a rectangle with love.graphics.draw and pass in the image as well as the x and y variables no more white rectangles good job while we are in the ball.lua file we should clean up some of the code the collision function is very bloated right now it does multiple different things which is a sign that it should be broken up into smaller functions first we can create a new function and name it collide player and move the player collision code into it then we can create a function named collide ai and move the ai collision code inside of it next we can make a function called score and move the if statements that handle when the ball collides with the left and right side of the window inside of it these two if statements have a bit of code repetition we can reduce it by creating a new function named reset position and move the code that resets the ball position into it there is one difference between them though the x velocity is set to different values we can add an argument to this function and call it modifier if we multiply the speed variable with the modifier we will be able to set the x velocity of the ball to be positive by passing in 1 and negative by passing in -1 now we just need to call the function and set the argument to 1 in the if statement that checks if the ai has scored and -1 in the if statement that handles the player scoring lastly we can create a function called collide wall and move the code that checks for the top and bottom sides of the window into it now we just need to call all of the new functions that we just created inside of the old collision function while all of this had zero impact on the gameplay itself it's really important to keep your code clean especially if you want to create a large project let's continue making the game look better the background really sticks out now that the paddle and ball have sprites let's change it into something more interesting i'm going to create a new file and call it background.lua inside this file we can go ahead and create a table and name it background now we just need to create the three base functions load update and draw and make sure to call them in main.lua an important thing to keep in mind is the draw order the background needs to be the first thing that we draw so that it is well in the background otherwise it will cover all of the other images and we wouldn't be able to see anything now we just need to remember to require the background file i have two assets that i want to use for the background one named universe and one named planets inside of the background load function i'm going to create two variables that will load these assets i will name these variables universe and planets and load the corresponding assets into each of them using the love.graphics.new image function let's go ahead and draw them inside of the background draw function now we have a cool background but it's a little bit lifeless so i'm going to make the planets rotate that's why i have them in a separate file i want to change the origin point of the planet's image to the center because images rotate around their origin point to get the center point of the image i will first create two variables that will store the width and height i will name them width and height and set them to be equal to self.planets colon get width and get height respectively we need to store the current rotation of the planets to do this i will create a variable named rotation and set it to be equal to 0. in the update function we will set the rotation to be equal to what the rotation was plus 0.5 times delta time this will cause the rotation variable to increase slowly but the planets won't rotate unless we add the rotation variable to the draw function the rotation is the fourth argument so we will type it here next we want to change the origin point it's the 7th and 8th arguments but in order to reach them we need to first set the 5th and 6th arguments these are the x and y scaling of the image but since we don't want to change the scale of the image we can just set it to be equal to 1. now we can change the origin point to be the middle of the image by passing in half of the width and height we only need to do one more thing since the image is always drawn from the origin point we need to offset the position that we draw the image at by the same amount that we offset the origin point by so we set the x position to be equal to half of the width and the y position to be equal to half of the height if we run the game now you can see that the planets are rotating around slowly manually counting the score is tedious and we want to know who's winning so let's implement a score tracking system we can do this inside of main.lua in the love.load i'm going to create a table that contains two variables player and ai at the start of the game both should have zero points so i will set both of these variables to be equal to zero to display the score on the screen we can use the love.graphics.print function the first argument it takes is the string that you want to type out to make it more clear i will pass in player colon then concatenate it with the player score using two dots this combines the string and the variable into 1. next it wants the x and y coordinates i think 50 and 50 will be fine now we want to repeat this for the ai but write at 1050 instead it would be rather pointless if the score was 0-0 forever i have never been a soccer fan to fix this we need to head over to the ball.lua file and more specifically the if statement that handles when the ball hits the left and right sides of the window inside of the one that handles the left side we are going to set the score.ai variable to be equal to score.ai plus 1. inside of the one that handles the right side we will increment the score of player by 1. now we can actually see the score and if the ai scores we can see that it updates however the text is fairly small almost like it was created for ants to increase the size we can set it to use a bigger font inside of main.lua we are going to create a new variable i will name it font and set it to be equal to love.graphics.newfont inside of the parentheses i will pass the font size that we want in this case something like 30 should be fine to make the love.draw function less cluttered we should break out the score drawing code into a new function i will name it draw score before we print the text we will call love.graphics.setfont inside of the parentheses we will add the variable that we just created and now the text is much bigger and easier to read that is it for this tutorial series i hope that it went well for you and that you are happy with the result if you have any questions or need any help feel free to leave a comment down below also feel free to leave suggestions on what kind of content you would like to see in the future [Music] you

Channel: DevJeeper

Views: 3,951

Keywords: programming, coding, lua, love2d, game development, PONG, game dev, devlog, how to make games, learn to make games, coding in lua, coding in love2d, programming in lua, programming in love2d, making a game in love2d, how to use love2d, art assets, adding assets, art assets code, adding art, art in games, art for games, indiegames

Id: DRdxvYTl34Q

Length: 10min 11sec (611 seconds)

Published: Tue Aug 04 2020