Welcome to part 7 of the 2d sprite animation tutorial this will be essentially part 2 of using custom animations were I will go over using the new custom animations to allow you to move left, right, up and down with an idle state for each direction using just two animations, an eight frame animation for moving and a four frame animation for your idle state. I would suggest downloading the Dude sprite sheet in the source code at the bottom of the page and following along using your part 6 source code as it is the exact same for now. So lets declare our two main variables, our keyboard state and our dude.Now that we have our dude animation lets load him in using our generic constructor and setting his position as usual. Now instead of just a name, row and frames where now going to add in an Animation Class which for typing reasons i named 'ani'. Now our animations are all the same just at different rotations so with each new animation we just have to change the rotation and add it to our dictionary just like this.
Don't forget to set the current animation to something otherwise it will not draw which is what were doing next, although its the same as before.
Now if you were to run the game so far you would notice that it draws the bottom facing animation and not the right facing animation even though we set it to that. This is because when we set our animations we used the same animation class so each time we changed it, it would change for all of them. Now we can fix this a couple of different ways, the way I am going to do is were we create a copy of our animation and use that in our animations and not the original. So for this all we have to do is create a copy method in our animation class that will return a copy of the current animation.
After we create this method lets just copy paste a ".Copy()" to the end of our "ani" for each of our animations in the Load method. The result will be as follows.
So now we have our dude correctly loading we just need to update and move him so lets do that now. This is all basic so I am not going to go over it in much detail I just want to mention one thing. The else statement at the very bottom is were we will be adding in our idle animation code which will be the next image.
So if you look at how we organized our animations you will see that our idle animations just have "Idle" added to the end of the direction so what we can do is say if your not pushing a direction, check to see if our current animation contains the phrase "Idle" otherwise add it to our animation and it will now correctly set it to the animations we want it to. Also don't forget to update the dude.
Now if you run it you will see him correctly animating and moving, but there is one problem that you may notice or rather eventually you will crash the game. The reason for this is because when we change our animation from a running to an idle were going from an 8 frame animation to a 4 frame animation without resetting the frame index. Essentially its trying to load rectangles that don't exist, so what were going to do is change the string Animation from a public string to a property. Explaining what a property is would not be part of this tutorial I would suggest looking it up or asking a question, for now just replace the public string Animation with the following. This changes the frame index to 0 while changing the current animation which is what we need it to do.
That is it for the final part of the 2d animation tutorial, at least for now, if I can think of more ideas I will make more tutorials. If you have any suggestions post a comment.
You are free to use or modify this source in any way it is for learning purposes