Love2D Tutorial EP2: Using a Spritesheet

good day everyone it's fantastic to see you again we're back and when we last left we had this bit of text on the screen and we had a little colored rectangle going back and forth and we had a little bit of an issue with it and if you sit there and watch it long enough you'll see it will start if it gets outside of its little bounds area where we were putting it and remember by the way and there we go boom as soon as you click off of it you know we get this really squiggling effect and what's going on there is when it gets below like let's let's take the the case when it comes down here to 120 when it gets less than 120 it will say okay I want to swap that direction and so then it goes along its way and it swaps the direction but if this delta time is not enough to get it out of this section where X is less than 120 when it NEX rolls along if it's still net less than 120 it's going to flip the direction again and thus it's going to stutter like this so that's one of the two things that's going on that's not right so let's fix that first and then I'll show you the other thing that can and and that can happen okay so if X is less than 120 we want the direction to just be positive so else else if X is greater than 400 then we want the direction to be equal to negative 1 and now when we run this we will not have that problem but if we grab this window and we hold it you see how the rectangle skipped well what's going on is when we grab that window love 2d is not calling update during that time but it is accumulating that Delta time and so the next time that right as I let go as you let go of that window it will begin to call up data can and it will but the first time it calls it it will call it with a giant Delta time like if I hold this for a second or two seconds when I let it go it will call update with that with that huge Delta time and that messes things up it makes things appear to jump so what we can do to combat that is we can come in here at least initially right now we can say if Delta time is greater than let's say 30 I don't know let's say 40 milliseconds then just return so basically we're saying look if Delta time gets above 40 milliseconds then just don't even bother to call our update you see and I forgot p.m. all right so now when I grab it I can hold this window and move it around and then when I let it go watch the rectangle see it just starts right back up that's more of the behavior that we want it's just a trick of finding a value in here that works so that you don't begin to if the computer or if were ever your Wrentham is if it's a very demanding game if it begins to slow down you don't want it to just completely stop because the framerate just dies anyway there's other ways to handle this or whatever but I just wanted to make you aware of that's what hat that's why that was happening so it was really kind of two things going on there so we fixed that so that we're kind of that's good now that we've completed that little chunk what we want to do today and we don't need any of this code today oh I want to do let me just grab this I'm going to stick it over here for now but we don't need any of this code so we're going to delete it all what we want to do today is we want to load an image and display it and I found looking around and found a cute little image it's actually a sprite sheet of a little guy it's got some animations and we're I'll show it to you right here so it's got some cute little animations right here so let's load this whole image and let's draw it to the screen let's see how we can do that I've already dealt actually you saw that I already downloaded the image I create came in here and I created a new folder I called it assets and that's where we'll store our graphics and our sounds and all that kind of stuff I made another folder called GFX or graphics and then I put the hero dot PNG file in there so what we want to do is we want to make a local let's say let's let's call it the hero atlas and then love that load which is again called once whenever you execute your game just once so what we want fun initial loads on it so we only initialize stuff we want to load this hero Atlas so the hero atlas equals and there is a function called new image and it's love dot graphics dot new image and I'll show you dot new image and that takes a file name so our file name is going to be relative to where this file is which is right here so we want to go into the assets folder assets and then we want to go to graphics and we want to load hero dot P and G now we've loaded it or well that's what that's done now that one draw it well that's no problem either we can go love dot graphics dot draw so anything that is a drawable object you see there's any kind of drawable object and you go here and you can see what does that mean it's a superclass for all things that can be drawn on the screen ok so all sorts of different things that can be drawn on the screen as you can see now we know that this is one of those things an image it's an image so we can take the hero atlas and we want to draw this we'll draw it at 25 and we'll do X of 25 also and we'll run it and you'll see the Atlas appear wonderful fantastic beautiful we can also do things we go back to draw we can also scale that so we put a zero for the orientation we don't care about that let's scale it by 2 just for fun and enjoyment because and you can see there is some it when it scales it utilizes certain algorithms to do that and you can see if we want pixel art it's fuzzing the image right now and that is not exactly what we want so what we want to do is we want to change that image interpolation mode and I cannot remember exactly what that command was filter mode that's it that's what we want so how do we there we go the image that filter so can't we set can we set just a canvas or do we have to set the image filter let's just go ahead and sit let's just set the image filter on the hero atlas will do set filter let's go see what the we want actually their mode we want how do you set the filter mode is there a set filter mode surely there is loved graphic Scott let's do that I know there is I've used it I just can't remember what it's called filter now we want to set default filter set there we go see sets the default scaling filters used with images canvases and but that's what we want so we want to do we'll just do that here in love dot load and I'm going to put it up here because I don't know feels like it should be up here graphics dot set default filter now so yeah so we got a filter mode a minimum filter mode a maximum filter mode in and we don't need that parameter and that's going to be linear is the default what we want is nearest that's like that you boom so now we load it and we're going to scale and see how we're nice and pixelated which is exactly what we want now something else that we want is we want I'm going to bring that back down to 1/4 now we want to draw this thing we we want to draw a part of it and level it allows you to do that it's a different type of object and that is a quad so what we want to do is we'll create yet another variable and we'll call it just here Oh call it ero sprite because that's pretty much what it is so let's do that one let's set that up initially here in the love dot load so we'll set heroes sprite equals love graphics dot new quad and and now this as you see is the top left position in the image along the x-axis and then there's a y so what we want to do is we want to figure out where we want to come in and grab that and I happen to know that that location is offset X 16 and 16 and these little guys have a cell width of 16 pixels so square 16 pixels for each of these so we want this one actually probably probably want that one ah cohered oh I know what happened this was originally all this this around it was originally this color and I just didn't get this piece that looked kind of weird there and figure some right here that I didn't get I want to get all of that stuff out so that you could there would just be plain old transparent pixels around it there we go I think I want this one and that's going to be 16 that's going to be 32 16 should be so for the for the X we're going to be 32 into the into the image that we that we want it that we're going to want to use and 16 down from that original image on this Atlas that we're fixing to use and we know the width is 16 and the height is 16 and 4 now actually we do we have to do the reference width of the image I'm not sure [Music] you now let's just do that let's take I think this is what you're supposed to do not a her atlas how many times have I done that here atlas and we'll do get dimensions by the way you'll notice that sometimes we'll use the dot if you don't know a lot if you don't know much about lua sometimes you'll see you'll use the dot too to call certain functions and then there are other times where your uses : what is this : versus the dot well the colon is an interesting little device a little little you know syntactical sugar kind of thing and what really that does is it says when you call this function pass this object into that function it's like it's called self but it so it basically passes an additional hidden parameter into that function so that function can operate on that really that's a table it can operate on that table that particular table so and then some of these right here don't require a specific object you know this is creating an image this is setting the default filter this is creating a new quad so that's what's going on there now [Music] yeah so we've got the bible-- uh love that graphics draw image top left bottom left let's see what happens when we do love dot graphics dot drawl and let's try to draw the hero let's just see what we get let's draw it same here and let's draw it a hundred most probably draw it 200 down ah Oh at the zero one one and we don't need that right now I'll just stick it in there okay so bad argument to draw draw will expect it got quad okay so what did a bottom left oh really okay well that does make sense I mean you got it you got a you've got to you've got to reference that somewhere and that's something that I'm going to have to do in the in the Visual Studio code extension I don't I did I do that I think I did that here we go see here's what we want to do yeah hey that's the one we want so that's our Atlas and that's the that's the quad that we want to draw on the screen and it's a position we want to draw the object for x and y so let's save that and let's run that and see what happens and there he is there he is a little fellas right there now let's make them a little bit bigger scale factor let's do four times four X NY there he is and he still has that little did I not save that wanna save that oh that's the wrong aisle fantastic let's yeah say hi to the old hero let's do this real quick boom rename disappear and I'll just go ahead and get rid of this now you'll be good yeah perfect so we've got our hero so what we can do is we can just let's comment this out by the way I just I just hit ctrl forward-slash which is kind of a nice thing because it will comment out dependent you know it's independent of what kind of code what type of language you're using Visual Studio code recognizes it it will just comment it out pretty cool so let's draw this instead of 200 let's draw it at 25 by 25 there it is so wonderful and fantastic isn't that awesome the orientation we can go and do things like math dot pi divided by 4 and you'll see this kind of thing now what's going on is remember that at least at this point right now the origin is in the upper left-hand corner of any image that you draw so when it rotates it it rotates it clockwise by the amount of degree and we're in radians so that's why I'm doing math dot pi divided by four and there is a function and I believe what does it call it lua laughs two degrees I think it is it's two degrees or degrees here we go and just did a little search Google is your friend people Google's your friend there it is so if I want to if I want to go to radians which I do for because this function takes radians and I would just use this one so I could do math dot rad and this is a standard Lua library and you know love 2d supports it so if I want to rotate 45 degrees I could do that like that and he rotates 45 but again I don't want the origin I really don't like the origin at the upper left hand corner I mean that's just me you and it depends on what you want to use and what you want to use it for but when I'm rotating something I definitely don't want the origin at the upper right hand corner but that's okay because when you're drawing with this function not new quad but with the where did it go [Music] we've got a scale factor X&Y and now you've also got this origin offset x and y offset for x and y axis so what we can do is since we know that this image is 16 by 16 pixels wide and tall let's take half of that and see if we can't put our origin in the middle and if we do that indeed it's rotating from the center of the image but notice it also draws let's let's remove the rotation now it also draws that image from so when it's positioned now its position positioning it right here whereas normally this place right here would be the lower left or the upper left-hand corner and then it's just offsetting it by that amount of offset that we gave it and I think you know typically we probably will want to mass probably will end up centering these things and having the origin at the center of the image will have to create a class of some sort maybe like a sprite class or a sprite object that will kind of do some of that stuff for us and so we can just simply say draw the sprite draw it here and then we can set the origin you know maybe it'll default to the center and then if we want to change it we can and that will internally call this with appropriate parameters including the scale of the of the thing so that's cool man we can do some cool stuff with that matter of fact let's put him in the direct middle of the screen since since his origin now is in the middle whenever we draw him these coordinates are going to be the center of that sprite so let's like to configure see how big this thing is so we can draw him we'll just divide these two things in half we'll drive it 320 by 180 you should be center of the screen and he is beautiful fantastic we're getting somewhere we really are let's do one more thing just for fun and we'll do a little bit you know we're going to do a little bit of animation because it's fun to do animation to fun let's let's give us an our selves another local and we'll call it angle equals zero we'll start at zero and instead of zero here we'll say angle and then so we're going to draw him at that we're going to rotate them at that angle clockwise remember and in update we're going to angle equals angle plus some speed angular speed in degrees per second let's say half of 45 which is twenty seven point five times Delta time oh and look I forgot that too let's go ahead and keep this in here too if delta T is less than three plus eight to five millisecond the effect we're doing right now but in least it won't be jumpy so there it goes and it's going why is it going too slow there we go that's why cuz it wasn't updating oh you know what I did it needs to be greater than sorry people sorry people there we go a rotating little character you know we could animate all sorts of stuff in here but now how how could we you know we've got this one file what about using other files and how do we do that but we'll talk about that next time and and so until next time we'll just leave it right here have a great one people see you next time

Channel: recursor

Views: 10,293

Keywords: Love2D, Tutorial, Programming, Lua, VSCode, Software, Love2D-Tutorial

Id: xItXOKRhEzk

Length: 21min 39sec (1299 seconds)

Published: Thu Feb 23 2017