Game Programming - Episode 89: New Player Animation + Poll!
Key Takeaways
The video demonstrates game programming concepts, specifically animating a player sprite using an Animated Sprite class and sprite sheets, and handling player movement using sprite animation. Tools such as Sprite sheets, Animated Sprite class, and Animator are utilized.
Full Transcript
hey what's up guys My Name Is AO and welcome to episode 89 of game programming So today we're going to talk about finishing our little player animation so we see that if we launch our game what we have is this dancing little player guy not cool let's go into our player class and see what we need to do to finish our player guy so what we have is an animated Sprite class that's what we made last time we also have this awesome Sprite Chet that I made um in episode uh 86 85 I don't know but the point is we have these we have four directions here right down up left and right let's apply them into um into our game so if we hit up the animated Sprite I think that's the one that NOP okay so Sprite sheet I think yeah Sprite sheet has our different player Sprite sheets our sub Sprite sheets let's copy and paste that uh three times for each of the directions player up player uh left and player right okay so now we have four different Sprite shades for the directions now we need to work out which of these numbers go here so this Z is Z is the X and Y offset okay uh X and Y offset as we can see over here is actually in uh Sprite Precision not pixel Precision so for for up which is the one we'll do now it's offset one one on the xaxis as you can see and the width and height is the same so all we need to do is type in um one over here for player up um similarly left is offset by two and right is offset by three from the beginning in terms of the x axis so we need to pop in uh two and three and that should be that should be totally fine okay so now that we've done that if we hop back into our player class um we have these animated Sprites here so let's copy them paste them a few times here change this one to down this one to up this one to left and this one to right and out of out out of this thing we'll create player up of course as the Sprite sheet player left here and player down player right sorry here okay okay and um of course the sizes of the sprice don't change and the amount of frames in the animation is obviously three since we oops since we have one 2 three for each of these okay awesome now that that's figured out let's apply these things so we've got test. update we need to make sure that we update the current one that's selected now there's so many different ways we could do this okay um I'm just thinking right now there's really a lot so what I want to do instead because we don't want to update all of them if they're not used I'll make another animated Sprite object called uh anim Sprite I don't know um let's capitalize that and we'll set that equal to null for now okay but when we do create the player it's kind of like how we set the Sprite equal to sprite. player forward here we'll set the anim Sprite the animated Sprite equal to uh down I guess to begin with okay and that'll set it to this okay it won't create a copy of it it'll just set it equal to this okay kind of like a pointer I guess um and then what we'll do is we'll up we'll update the animator Sprite so if we run this just real quick to see what what it looks like once we fix our error here which is test I guess right we'll set it to ANM Sprite do gu Sprite Let's uh check that out okay we got a nice little crash here we got an N pointer exception for some reason um so what's not at this point and Sprite we set that equal to down here I believe uh down is actually equal to a value I'm not sure why we're getting a null point of that um so is anim Sprite null at this point yeah that's okay that is n okay let's um H let's let's do a few things first of all let's actually move these what if we um H that's quite odd it's because um I know why that's happening but it shouldn't be okay let's uh let's probably drop um we could set this equal to down technically if um let's take a look at that quickly okay that works cool um let's get rid of it here so basically what we want to do here at this point is um we also want to make sure that obviously when he changes Direction he moves so instead of all this uh anim well okay we've cleaned up the animation code already so that's great but what we need to do is set the direction so when we hit the up uh button we've also got the down button here input. left and input do right we'll set the animator spr equal to to a Sprite so um let's set input do up to um so let's set anim Sprite equal to uh up I believe and for down let's move this up here uh left and right we'll do the same so for down obviously we'll set it to down for left we'll set it to left and for right we'll set it to right okay let's check that out so if we move okay of course I screwed something up there um okay left what is left left is left okay what have we done here hm now that should be right that's weird let's go back to our player so for some reason up and this works that works but if we go left we kind of screw up here um even though we do set animat Sprite equal to left which is the player. left sheet which um which is set to that one so that should be right hm I'm not sure why that's not working um with the high is still the same I wonder if we change this to one yeah that works huh so what if we change it to three so now that works huh okay that's um why is that happening I have no idea huh it's like oh I must be no that is player sheet maybe I'm referring to a different file I have no idea okay anyway that seems to work um I'll walk that out later okay so now that oh that's annoying as well isn't it huh okay so uh the other thing we need to do is probably say that um let's go back into our player there's a few little quirks that we should fix up such as um uh these things so else if we cheuck on else here it'll make sure that we can't select both at one time um as well as with down uh because we can't set both at one time um and the other thing we need to do is probably say that um if we're going down and left we should handle that as well so for example um it's just cuz of the nature that it's setting it uh I think that if we go ahead and say in left if um well we could just okay so let's just check that problem out real quick if we move up and right for some reason it's um setting that equal to that okay um there's I think hang on a minute there's oh we've does this thing matter oh crap we've got this stuff I thought we removed this code damn it um oh great okay I thought this should be an update anyway ah let's um comment that code out quickly not that that should do anything but um yeah there we go that fixed it okay yeah that was weird um that was a quick little bug that we had there um now what we should do is probably fix this animation stuff up so what we want to do is only play the in the the um animation if we're walking okay and that's actually really easy to do right all we have to do over here um I'll leave that code commented out all we have to do over here in update um is if walking we need to update it otherwise don't update it now that's not you can see how that kind of works now what we might what we might want to do is set the frame equal to zero as well so in other words um else uh ANM Sprite dot uh we can't set the frame can we okay so we should set frame to set frame to zero okay and we'll make that method real quick so uh let's create the method so public void set frame and uh index I guess and all we'll do here is we'll actually set the Sprite equal to sheet. get Sprites index oops now to handle this quickly um we can say that if uh index is greater than sheet dog bries uh do length minus one then uh let's return and let's also print out an error to the console so system. error do print line index out of pounds in plus well we could just say this can't we but um would probably be better if we said no that's fine okay cuz that'll give us the exact memory address of this thing Okay cool so that's just in case we do the index so back in player we'll set frame to zero so if we're not walking what we should see is the that frame okay and that's a very simple way to fix it now our Sprite looks our sprite animation looks terrible cuz I'm not I'm not good at this kind of stuff um but I might fix that up in my own time and then maybe let it get back in but that is um that's going to pretty much wrap up this episode now there is one thing that I wanted to show you guys okay um that's the thing that I uh told you guys at the beginning of the last episode um if you head over to my website right now okay what you'll see is um this okay so this is www.eero.com what you'll see is on the homepage straight away there'll be a next topic and then there'll be um a bunch of options now I don't know how okay I don't know how people have already voted there's 15 total votes um already okay I don't have a clue how because I I did not announce this anyway but the point is this thing is here for you guys to be able to choose um what you want me to do next because we're at the point now that we've pretty much done everything and the stuff that we need to do next could be done in any order cuz the main engine at least the graphics of the engine have been laid down so what I'm giving you guys the choice of is uh non-player characters a menu an inv ENT system or items so what I mean by by mobs essentially is well AI kind of thing um by menu so basically onpl characters so we can have mobs like roaming around and stuff uh menu by menu I mean well what do you think a menu that's pretty obvious isn't it like a main menu so you guys can select if you want to quit if you want to play the game if you want to change the level whatever inventory system like an inventory system like uh r with the Mad God has where you can um drag and drop items and I guess inventory system really does link with items pretty well but um that's what it's looking so it's looking mobs are winning right now again this voting hasn't technically started um if you don't um hang on okay to vote you need to register an account you might already have one if you do hit login but otherwise hit register okay all you need to input if you hit register is look at Google trying to autofill my stuff automatically um to register all you need to do is pick a username spaces are allowed by the way pick a username enter your email address and create a password and of course do this capture thing so that um so that Bots don't make accounts and vote on my PS um but yeah that's all you'll have to do okay um and then hit create a new account you don't even have to like confirm your email address I would make sure that it is valid because if you do forget your password you can request another one over here okay um but once you do log in okay if you do hit login and you log in what you'll see um is if I go back to home here um what you'll see is you can actually vote okay so me I'm probably going to vote for um items I think items are cool okay so I'm just going to hit vote and also there something got one vote so I'll just hit vote and that will actually process that vote obviously and you can see items now has two votes and your vote was recorded blah blah blah um in terms of comments um there also uh if you want to suggest something you can actually leave a comment here as well you can see people already done that um but other than that guys pick something here hit the vote button and that's what we'll probably do next episode now tomorrow there's not going to be an episode of game programming there's going to be an episode of network chat programming cuz people have been bugging me about for a while and I do want to finish that series since it's not an overly big series um but other than that be sure to vote on this poll because that will determine what we do next and um other than that guys hit the like hit the like button below this video because remember 200 likes equals one video per day and 300 likes equals two videos per day all right so I'll see you guys later goodbye [Music]
Original Description
Vote for the next episode's topic here: http://thecherno.com/
Remember: 200 likes = 1 video per day; 300 likes = 2 videos per day!
-------------------------------------------------------------------------------------------------
In this video:
- How to animate a player sprite
- How to change player sprite
- How to use a sub sprite sheet
-------------------------------------------------------------------------------------------------
Website: http://www.thecherno.com
Twitter: http://www.twitter.com/thecherno
Facebook: http://www.facebook.com/thecherno
Subreddit: http://www.reddit.com/r/thecherno/
Steam Group: http://www.steamcommunity.com/groups/thecherno
-------------------------------------------------------------------------------------------------
Outro music is by Approaching Nirvana: http://www.youtube.com/approachingnirvana
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from The Cherno · The Cherno · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
3D Game Programming - Episode 1 - Window
The Cherno
3D Game Programming - Episode 2 - Game Loop
The Cherno
3D Game Programming - Episode 3 - Arrays
The Cherno
3D Game Programming - Episode 4 - Drawing Pixels!
The Cherno
3D Game Programming - Episode 4.5 - How Rendering Works
The Cherno
3D Game Programming - Episode 5 - Playing with Pixels!
The Cherno
3D Game Programming - Episode 6 - Performance Boosting
The Cherno
3D Game Programming - Episode 7 - FPS Counter
The Cherno
3D Game Programming - Episode 8 - Alpha Support and More
The Cherno
3D Game Programming - Episode 9 - Beginning 3D
The Cherno
3D Game Programming - Episode 10 - Floors and Animation
The Cherno
3D Game Programming - Episode 11 - Rotation
The Cherno
3D Game Programming - Episode 12 - User Input
The Cherno
3D Game Programming - Episode 13 - Render Distance Limiter!
The Cherno
3D Game Programming - Episode 14 - Basic Mouse Movement
The Cherno
3D Game Programming - Episode 15 - Textures + More!
The Cherno
3D Game Programming - Episode 16 - Walking, Crouching, Sprinting + More
The Cherno
3D Game Programming - Episode 16.5 - Exporting Runnable Jars
The Cherno
3D Game Programming - Episode 17 - Small Adjustments + Birthday!
The Cherno
3D Game Programming - Episode 17.5 - Creating an Applet
The Cherno
3D Game Programming - Episode 18 - The Beginning of Walls
The Cherno
3D Game Programming - Episode 18.1 - A Few More Things
The Cherno
Episode 18.5 - Creating an EXE File in Java
The Cherno
3D Game Programming - Episode 19 - Rendering Walls
The Cherno
3D Game Programming - Episode 20 - Continuing Walls, Fixing Bugs, and Managing Crashes
The Cherno
3D Game Programming - Episode 21 - Texturing Walls, Fixing Clipping, and Fixing the Mouse
The Cherno
3D Game Programming - Episode 22 - Random Level Generator + Properly Fixing Clipping
The Cherno
3D Game Programming - Episode 23 - Graphical User Interface (GUI) Launcher
The Cherno
3D Game Programming - Episode 24 - Making Our Launcher Work
The Cherno
3D Game Programming - Episode 25 - Writing and Reading Files
The Cherno
3D Game Programming - Episode 26 - Custom Resolutions
The Cherno
3D Game Programming - Episode 27 - Decorating the Launcher
The Cherno
3D Game Programming - Episode 28 - Continuing our Custom Launcher!
The Cherno
3D Game Programming - Episode 29 - Launching The Game
The Cherno
3D Game Programming - Episode 30 - Colour Processing In-Depth
The Cherno
3D Game Programming - Episode 31 - Sprites!
The Cherno
3D Game Programming - Episode 32 - Sprite Mapping
The Cherno
3D Game Programming - Episode 33 - High Resolution Rendering
The Cherno
3D Game Programming - Episode 34 - Entities
The Cherno
Genesis - My Game for Ludum Dare 24
The Cherno
Vlog + Ludum Dare Results
The Cherno
Game Programming - Episode 1 - Resolution
The Cherno
Game Programming - Episode 2 - Threads
The Cherno
Game Programming - Episode 3 - Game Loop
The Cherno
Game Programming - Episode 4 - Window
The Cherno
Episode 5 - Buffer Strategy
The Cherno
Game Programming - Episode 6 - Graphics Initialized
The Cherno
Game Programming - Episode 7 - Buffered Image and Rasters
The Cherno
Game Programming - Episode 8 - The Screen Class
The Cherno
Game Programming - Episode 9 - Rendering Pixels
The Cherno
Game Programming - Episode 10 - Clearing the Screen
The Cherno
Game Programming - Episode 11 - "Out of Bounds, Baby!"
The Cherno
Game Programming - Episode 12 - Negative Bounds
The Cherno
Game Programming - Episode 13 - Timer
The Cherno
Game Programming - Episode 14 - FPS Counter
The Cherno
Episode 15 - Tiles
The Cherno
Game Programming - Episode 16 - The Map
The Cherno
The Walls 2 - Minecraft PvP Survival Map
The Cherno
Game Programming - Episode 17 - Key Input
The Cherno
Game Programming - Episode 18 - Controlling The Map
The Cherno
More on: Agent Foundations
View skill →Related Reads
📰
📰
📰
📰
React Introduction
Dev.to · Karthick (k)
Why SnapDOM Beats html2canvas for DOM-to-Image Capture
Dev.to · Juan Martin
I built 42 landing page templates as single HTML files (no npm, no build step)
Dev.to · Segcam spa
Part 7B — Section 2 — React Event Handling Explained: Forms, Event Object & User Input.
Medium · JavaScript
🎓
Tutor Explanation
DeepCamp AI