Game Programming - Episode 45 - Player Graphics

Key Takeaways

hey what's up guys my name is the channel welcome to episode 45 of game programming so first of all I've got a new mic microphone which actually literally cost me less than half the price of my previous one and you know it's it's better like it sounds better in my opinion so um that's kind of uh it's kind of cool um but yeah so if I sound different that's why it's a different microphone so um so yeah all right anyway let's get started with this so last time we talked about the move method and actually finalizing I guess the movement for the player and if we launched the game apart from these coordinates we also saw that the game basically functioned as as it needed to but we actually you know kept track of the players coordinates which was pretty cool um now today we're going to we're going to talk about the player Sprite so we don't actually have a Sprite for the player so if I launch this what you are seeing actually in reality let's just go ahead and hide the coordinates if I go back to game. Java um in in the game class the game. Java class I can I'll just get rid of um I'll just get rid of this this draw string thing and uh all right so basically what you're seeing is you know essentially an invisible player in the middle of the screen and the um the map is sort of scrolling uh with him I guess so let's uh let's actually make him a Sprite now instead of going ahead and drawing a Sprite um I actually got an email a few days ago from uh from Andy wall that was his name so um shout out to him cuz he actually like he actually drew a Sprite for me called King Cho and um and I I I mean I didn't even ask for it like I just got an email and he's like you know wrote me like a long message about um you know thanking me I guess for my tutorials and stuff like that and he attached uh King chero so I mean that's just freaking perfect um honestly like he he just dashed it like just as a present um and uh and yeah and I asked him if I could use it for the series he said yeah go ahead so um yeah we'll be using this King chos Sprite Which is pretty cool actually so that kind of you know takes the uh takes the drawing of it out of me so if we go to our um sprite.png file and I can find it for you here if basically it's in workspace it's in your workspace and it is in let me just find it all right so in your rain directory um in in the resources folder in textures we made a file called Sprite Sprite sheet.png Which is what contains our grass Sprite at the moment so over here right what we're going to do here is we're going to pop that Sprite in now you guys can make your own Sprite if you really want me to make it available for download this thing I might um pop a link in there or something with the next next episode tomorrow but but um as far as this goes uh you guys can probably make your own Sprite but uh here's a Sprite so I'll just pop it it is 16 by 16 sorry guess that would be 32x 32 wouldn't it hang on is each Square yeah it be 32x 32 so it is quite a large Sprite um but we'll talk about that today so I'll just pop it like I might actually just pop it down at the very bottom just cuz I don't know I might make it into a 16x 16 Sprite in the future but you know for now we'll just see what a 32x32 Sprite looks like so here it is in our game let's just um sorry in in our in paint.net in our sprite.png file um so I'm just going to save that and it's telling me to save as um because it's got multiple layers but I'll just save it as a PNG again that's what it was before just like that oops save and all WR it all right sweet so and we'll flatten by the way um okay so now that we've got this King chernos Sprite we kind of need to like kind of need to draw it right so let's start off with drawing this one right here the top left one um it's it's first of all first thing we need to realize realize honestly is that it's it's kind of big right it it's essentially four Sprites it it makes up four squares right it's got four parts to it so so back in Eclipse here if we go into um into our sprite. Java class we can actually make it so there's a few different techniques for this I'm going to guide you through the first one which is doing it in 16 size chunks so we'll make a few Sprites and one of them is going to be called player zero all right that's going to be like the first part of the player they'll set that equal to new Sprite and it'll be again 16 size and over here I'll have to find the X and Y coordinates so if we come down here we know that that's zero that's 1 2 3 4 5 6 7 8 9 10 so that's 10 on Y and of course zero on X so that's what it's going to look like and then obviously it's using our Sprite sheet for the tiles so yeah I probably should have put it into another Sprite sheet but we'll we'll organize that stuff later let's just make sure this works first um and I'll obviously duplicate that a bunch of times and rename this 321 right so we've got four different variables um and as for here U player one will be you know this part so it'll be 10 but one and then that'll be 111 all right so Four Corners all right I'm probably not going to have time to rush through this and explain everything but you guys you guys should get this if you don't open up a thread on Reddit the link is in the description to my subreddit anyway um um so now that we've got the four Sprites we also need to make the four well we don't need to make the four things but if we go back into player um we kind of need a kind of need to set a Sprite here as well so the way that I like to do this is because player will be animated in the future that's something you need to consider right now we're not going to animate it today but we will animate it in the future obviously um the way that you could do it is you know the fact is this player class right now it extends mob and MOB only has access to one Sprite so that's that's an issue in itself um that's all right we we can sort of see through that if we really have to so the way that I like to do it is in the screen. Java class I like to have a separate class for rendering mobs or rendering you know the player in this case so because um because we kind of do have four things to render um because we have four things to render it it might be a little bit difficult it'll be different from the render tile method obviously first of all it's going to be different from the render tile method cuz it's completely different iteration of rendering um but it's also going to be different from mobs possibly and from the standard rendering method because it is twice as large so let's just basically make something called render player so it's going to have a few parameters going to have in XP YP and player player um and it's going to have the same rendering lot let's just copy this method the render sty method into here and then we'll we'll change it as we need to so first of all we know that the size of the player is 32x 32 oh no we'll be doing it in chunks though so 16 x 16 um and let's import player um this stuff again I'll just you know make sure that we're doing stuff the right way and for here um all I need to do is player dot oh but we won't even be doing it that way so I'm sort of doing this on the Fly By the way um all right so there'll be four different Sprites so it'll be whatever Sprite we fed into it so I guess better way would be Sprite Sprite and then it would be Sprite dot pixels and then um you know our standard X+ y oops plus y * well yeah right do size do we have a um well it's going to be 16 so might as well pop that in here all right so that's going to give us our basic logic here so if we come back into player we've got a method here called render and we can start feeding that stuff in here first thing we need for render is the screen all right that's very important uh the second thing we need is the actual location of the render to be taking place so the way that sort of happens is um you know because we're rendering we kind of need to be rendering it at a specific location uh obviously um even though even though you guys might think that the player sort of is in the middle of the screen at all times that's a very bad way to look at it um because the thing is like you don't want to be like oh it doesn't matter what where the player is I'll just render him in the very center of the screen yeah you could do that but that's not cool like that's you don't do it that way and I could of course give you reasons for that one of the reasons just off the top of my head is if you want to like animate a cut scene or some or something that's running on the game engine you want to off you might not want basically you don't you might not want to have the camera centered on the player at all times all right you might want to change that you might want to make it so that the camera is slightly off center like if the player is moving really fast forward you might want to just bring him back a little or something like that bring him down a little um there's so many different things to do it so you always want to be rendering it at the location what you want to do is set the location of the camera rather than the location of the player to be fixed all right sweet so one thing we want to do is keep track of where the player is luckily obviously in the entity class we've got two integers which keep track of where the player is so over here in Renda um we're just going to Simply go screen dot um render player yeah we call it random player at X Y so in other words we're just fitting that stuff in and the Sprite is going to be interesting so the Sprite at the moment looks like it's going to be sprite. player Z now you guys might be thinking but hang on a minute you know why are we doing it this way um what happened to the rest of the players spres and we'll deal with them in a minute but first of all we need to really talk about how this screen kind of gets here so if we go back to the place where it overrides um we're overriding screen which is wonderful but we haven't actually ever made the screen class visible in an entity before have we and we kind of need to because if we want to access the screen class in player um you know we need to fit it in there but that's not really a problem because we're going to do that from the game class so right now our issue here is the screen gives us a null pointer exception and I'm sorry this episode is going to be a little bit longer than usual but there's a lot to cover here and uh and I really don't want to split it up into two parts cuz you guys all hate me for doing that so yeah um but if we go back to our game. Java class jav I keep saying like if we go back to our game. Java class um you'll find that we had do our player here and to render player we can simply call in the render method after we render the level player. render and then we can plug screen in that way and now we've got the screen thing so we've solved that n pointer accept because it's feeding screen in from here and over here screen is actually equal to a new instance of that class so that's all lovely and we're probably going to work perfectly um so that gets rid of that and finally I think let's just run it see what we get all right look at that so we've got the this this guy up here in the top left corner of the um of the screen that's that's awesome so the first thing we need to fix is why is he not not in the middle and the reason he's not in the middle is because we actually haven't given him an offset to be at so what we've said right now is you know just be wherever we haven't really been like you know be in the middle so first thing you'll notice is that like it is kind of working perfectly in in a sense like it's doing what we intended it to do it's just not it's just not a line that's all if you check out X and Y um you'll see that that is actually worth surrendering them and as we move you know it's it's still there it's like still in the middle you know what I mean like the this thing's actually moving along with the player it's just over there so in other words if we were to do something like X plus the 300 and let's just say y+ 20 right then you you know you'll see that that that doesn't work you know that doesn't work so in other words you know this is having an effect of where the player is and at X and Y why it's working perfectly let's jump back into our render Player thing um and you can see that that's sort of how we're playing around with the offsets now we do have this set offset thing that people keep talking about that's kind of useful because you know it let's us set the offset of the player but what's happening right now is that player is centered right it's cented but it's off center so what's happening is as we debug the game as we move this thing's moving along with the camera which means that it's tracking the location of the player which is perfect so right now if we go back to our game do Java class um then if we go down to our rendering thing we can actually you know see that we're setting player X and player Y at a particular location so if we hit up level. render you can see that the screen offset is being set you know according to player controls because we go back here you can see player dox and player doy is being set up that way but what we really want to do here is actually I guess offset their locations to be in the middle of the screen so we can do that with you know basically a few simple math calculations so first of all I'm just going to make two integers just to make this a bit easier I'm going to call the first one X scroll so that'll that'll deal with the actual horizontal position of the player um and we'll set we'll set X scroll equal to playerx minus screen do width / 2 so what that's doing is basically putting it in the middle of the screen um based on X right um and then we'll also do y scroll as well which obviously will be exactly the same except player. y minus screen. height ID by two okay so it's getting it's getting the location of the player and then it's subtracting half of the width of the screen which is putting it right into the middle of the screen uh X wise and then it's doing the same thing into it's doing the same thing with Y as well so if we substitute these for X scroll and Y scroll our new variables that we've made that of course use playx and play doy which is what we used before you'll see that now check this out the player is the center of attention so a few things I want to just touch on first of all we haven't notice notied that we haven't actually changed the location of this rather we've changed the location of the map the location of the map used to assume that the player was in the top left corner right when we move the player here we sort of move the map and that's really cool so you can see how that sort of works out um to being now in the center um just a few simple calculations that's really how powerful this little set offat thing that we've done is um but yeah right now the players deid of one tile and uh it's there still this is only one quarter of room so um so yeah we'll figure out the the rest of the three quarters in the next video so I hope you enjoy this episode of game programming um let me know what you think about the new microphone hopefully um my voice is even more sexy with this thing but um until then guys we'll see you tomorrow later [Music]