How to add a Game Camera that follows the player | Love2D Basics

hello folks in this video i'll show how to add a camera to your love2d games so that it'll follow the player around and you can explore more of your levels all you need in order to start is just some project where you have something that you want the camera to follow in my case i have this player object and player.x and player.y represents the player's position if i run the game as is this is what it looks like currently but of course there's no camera so i can't really explore the whole space feel free to check the playlist in the description if you'd like more info about getting to this point same with many tasks we can add a camera very easily by utilizing some open source software check the description for a link to this github page for hump which stands for helper utilities for massive progression hump is a collection of several different tools including this camera.lua file go ahead and clone this repo or if you're not sure how to do that you can go ahead and go up to code and then download this as a zip then you'll just want to extract this zip file and then inside the folder we'll just find this camera.lua file go ahead and copy that and then back in our game project folder inside the libraries folder i'm going to go ahead and paste in this camera.lua file if you currently don't have a libraries folder you can go ahead and create one just right next to your main.lua and call it libraries once that's edited in go back to your code and we're going to get this camera code imported up in love.load i'm simply going to do camera equals require and inside these single quotes i'll do the path to the camera.lua file which is libraries slash camera so now the camera.lua file is loaded into this camera variable and we can use this to create an actual camera object i'll call this cam equals camera so calling this as a function essentially generates a camera object and is being stored inside of cam so whenever we want to work with the camera we'll be calling this cam variable now that this is created we can change our draw section so that everything is viewed through the lens of this camera we do this by at the start of the draw section we'll do cam colon attach and then we'll indent everything else and then after everything is drawn we'll do cam colon detach like that cam attach marks the point where we start drawing things from the camera's perspective and cam detach is the point where we stopped looking through the camera so in this case everything is being drawn from the camera's perspective now if you're drawing a tiled map using simple tiled implementation like i'm doing right here we actually can't use this game map colon draw notation anymore this unfortunately conflicts a little bit with the camera so what we need to do is actually draw each layer of our tiled map individually if we take a quick look at my tiled map i have two layers i have ground and i have trees so we need to draw each of these layers individually and i can do that by getting rid of this game map colon draw instead i'm going to do game map colon draw layer and inside the parenthesis we need to specify the layer we want to draw we'll draw the ground layer first so we get that with game map dot layers and then in square brackets we need to specify the string name of our layer which is ground and same deal i'm going to copy this and we're going to do the same thing but for trees so at this point we have all of our game map layers being drawn as well as the player being drawn inside the perspective of the camera if we were to save and run now the game probably won't look any different and that's because our camera is motionless at the moment we need to change it so that it's always following the player we'll do this back in our code in the update section so in love.update probably at the bottom of love.update after all this i'm just going to put in camcolon look at we'll put it at position player.x and player dot y so every frame is going to move the camera's position to match wherever the player is located if we save and run now it's working the camera is now following the player you may notice a bit of an offset issue though the player is a bit off-center he's a bit down and to the right too much and this is because the camera is currently following player.x and player.y which at the moment is representing the upper left corner of our player's image by default all animations and all sprites will draw at its upper left point and in this case we actually would prefer to be drawing from the center of the image so that our camera is centered with everything so back in our code we'll go down to where we draw the player which is right here we're drawing our animation and we need to update those offset variables so here we have our rotation then we have our scale x and then after scale x is the scale y which we'll put as nil but after scale y is o x and o y which is what we want to specify for ox we want half the width of the sprite which is 6 since the width is 12. then for the offset y we want half of the height the height is 18 so we'll put in 9. so with that in place if we save and run now we'll see that our camera is now centered and the player is directly in the center of our camera shot the last thing that you can address and this is completely optional but you can stop the camera from showing this black off-screen background that goes beyond where our map is all we have to do is stop the camera from moving when it reaches too far near the border let's start by addressing the left border first so in our update function right after we do our cam look at we're going to do an if statement where we check the width and height of the screen so first let's get the width of the screen and we'll store it in a local w variable and we get the width by doing love.graphics width and this will get the width of our game window then we'll do local h equals love.graphics.get height and this will get the height of our game window now what we need to do is check the camera's position and compare it with this width so we're going to do an if statement we'll say if cam dot x or the x position of our camera is less than half the width meaning that we are just at the border but we don't want to go any farther then we just want to change cam.x to half the width half the width puts the camera just far enough away from the edge of our screen so that it doesn't show that black background and if we save and run now if i go too far to the left we'll see that the camera stops as soon as we reach that border it's not showing that black background anywhere on the left side of the screen let's do the same thing for the upper border we do this in a very similar way i'm just going to copy this instead of checking cam.x we're going to be checking cam dot y in both of these spots and also checking h we're checking the height of our game window this time if we save and run now we'll see that we can no longer go past this upper border it does not show the black outline then for the right and bottom borders it's a little bit trickier because we need to get the width and height of our background so here after all of this stuff i'm going to get another local variable i'm going to call it local map w as in the width and pixels of our game map this is done with game map dot width times game map dot tile width and what this represents is the number of tiles wide our game map is and this represents how many pixels wide a tile in our game map is i should mention that this part is only possible if you are using a tiled map if you're using a regular background then this would just be the background's width not any of this calculation right here we'll do the same thing for the map height map h equals game map dot height times game map dot tile height so now we have the width and height of our map in pixels and i'll go ahead and show you the final code if we have map w and map height we use this to calculate where cam x and cam y should go whenever they reach the right and bottom borders for the right border we put it equal to the width of our map which is this variable right here minus half of our game windows width and that puts us right at the border where it doesn't show anything off screen same idea with the cam y we get the height of our map so all the way at the bottom we subtract half of the height of our game window which puts the camera right at the border where it doesn't show any of that black background if we save and run now if i walk down to the bottom right it stops at the right border and it also stops at the bottom border so now at this point our camera cannot go off screen at all one last thing i want to demonstrate for the camera is if you wanted to have a hud or something that just like appears in front of the camera you do this by drawing something outside of the cam detach so for example let's just test this out with a love.graphics.print and i'll print hello and this will be printed at position 1010 although it's very small you can kind of see that little hello in the upper left corner and it stays there no matter where the camera goes because it's being drawn outside of the camera's perspective it acts like a hud in the next video we'll put in some collisions and make the walls more solid if you found this tutorial helpful please like the video subscribe for more and i will see you in the next one

Channel: Challacade

Views: 2,104

Keywords: camera, love2d, lua, programming, HUMP, game development

Id: F3zKl70RJlk

Length: 9min 56sec (596 seconds)

Published: Thu Sep 16 2021