Woohoo, I just finished a 2D practice game! I took a bunch of notes, and I’m presenting them here for anyone who wants to make a 2D game of their own.
I had three goals here:
Soooooo here are my notes:
If you’re new to games, the basic idea is either:
- You have a loop where you check the user inputs, update your game state, and render.
- You have a loop where you update your game state and render, and you use event listeners to keep track of user input asynchronously.
You don’t have to be good, but you have to be decent. I started this game after forty days of drawing practice. I just finished it around day seventy. I’m not good, but I’m decent, and getting better!
This game was inspired by King of the Hill, so I drew pretty heavily on it for references.
Don’t be afraid to keep and use references. Just don’t push your reference folder to github!
For the horses I just looked at a bunch of Google Images results. For the fence posts I looked at Legend of Zelda: A Link to the Past.
Shareicon is your friend for a variety of small icons, in this case the Frown, the Home, and the Heart.
Posing and Perspective
A Link to the Past, Secret of Mana and a bunch of other 2D adventure games use a perspective called 3/4 perspective. This has always been hard for me, so to get the right foreshortening proportions for the man and the horse, I used models from free3d.com. Since my Maya subscription isn’t active, and I’m not assuming you even have Maya, it’s worth mentioning that I viewed these models with the free FBX Review tool. I took screenshots and used them directly for sizes in Photoshop.
To make this game, I made use of Photoshop for drawing and finicky image editing, Nima for character animation, Xee 2.2 for photo previews, Audacity for sound recording, and Sublime for programming. I kept track of my work in Evernote and Workflowy. More on some of these below.
First, you really kind of do need Photoshop. Gimp isn’t as easy to use, and there aren’t nearly as many good recipes online. I’ll look the other way if you pirate it.
Second, Photoshop is recipe based. You don’t need to learn all of Photoshop. You just need to ask the internet how to do one thing at a time.
Third, when drawing, use at least two layers, an Ink and a Fill. You fill in the color underneath the outline, and because it’s underneath, it doesn’t have to match exactly, and your coloring won’t mess up your original lines.
Fourth, if you want to draw characters for animation, it’s best to think ahead and decompose your drawing into layers for each body part. You can save a second copy of the file with this layering.
Fourth, batch actions are absurdly useful. I made batch actions to resize collections of images to various different sizes (10 percent, 15 percent, 19 percent), as well as batch actions to recolor collections of images (this is how I got the different color horses).
Character animation is all done using a wonderful free tool called Nima. If you’ve never used any character animation software before, it uses something called Inverse Kinematics. IK works by attaching “bones” to pieces of the animation, then allowing you to move the pieces by dragging the connected bones. You fix the shoulder in place, then drag the hand, and the forearm and upper arm adjust in (hopefully) realistic fashion. You rotate from the shoulder, and the other parts of the arm come along.
You can get pretty far with just the Quickstart Tutorial and the Animate a Robot Character followup. I admit I have a liiiittle experience playing with IK in other programs, but not much, and I was able to read these tutorials and make this game.
Here are my Nima files if you want to look at my work.
In order to get passable walking and trotting, I made careful use of this Youtube tutorial of a man walking (both as learning and as a direct reference), this tutorial of a man walking and some google images of horse trotting.
Yeah, almost everything took at least two iterations. The initial character animations took three or four iterations, but once I got comfortable, everything else was easier. I got the horse kicking and man falling on the first try!
Animation in Code
We’re going for simple, so let’s make it simple. To animate a character, I simply make a dictionary of different animations (“walking”, “falling”, “crap kicking”, etc), then load each collection of images as an array in the dictionary.
To animate, I just increment a frame counter, loop back to the first frame when it’s complete, and draw the current animation current frame.
It is very simple and it works.
You’re making a 2D practice game. I’m making a 2D practice game. Don’t make stupid mistakes, but also, don’t insist on the highest standards. You aren’t building a Cathedral. You’re building a Military Camp. Part of being a good engineer is knowing the right and wrong context for particular kinds of quality.
“Jesus Christ Martha, The Horses Got Out Again” is relatively clean and understandable, but it won’t go on my source code resume, and that’s a good thing.
There’s a game source file, a map source file (with hard coded maps), a dude source file, and a horse source file. Everything is ECMAScript 2015 classes. There are globals because in a tiny program, globals are supremely useful.
Logic The Shit Out Of It
I wanted the horses to be difficult and inscrutable. So they don’t respond directly to user behavior very often. Instead, they wander around randomly on a series of waypoints.
If the horses are close to the man, they’ll pick waypoints that take them farther away from him. If they haven’t recently reversed direction, they’ll even reverse back to the last waypoint.
If they recently saw the man but he’s no longer close, they’ll choose waypoints that take them home. They need to be either afraid of the man or dreaming of home to choose to walk back into the pen.
The map contains the waypoints as a poor man’s annotated graph.
The map also contains a string diagram of the pen. Both hit detection and rendering make mechanical use of this diagram.
For music, I went to Youtube and searched for “Royalty Free Western Music“. I got some great stuff, including this collection from which came all four game songs. I had to buy two of them, for a buck and six bucks respectively, and I couldn’t be happier about doing so.
For horse sound effects and a few other random things, I used fellow FriendsOnMountains guy Trace’s http://splice.com account and found some nice things. I edited a few of these in Audacity.
The horse kick was a boxing glove punch sound I got from Youtube, slowed down in Audacity.
For cussin’, I got myself in a bad mood and just recorded my best Hank Hill impression in Audacity, then cut up the files and exported mp3s.
One Last Bit of Juice
When a horse kicks the player, you should shake the whole screen.
And there you have it, boom, done!