Cliffs Notes for a 2D Practice Game!

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:

1. Practice character animation.
2. Take an old concept and make it juicy.
3. Communicate the feeling of frustration that I get from horses.

Soooooo here are my notes:

Javascript Canvas

2D practice games should be easy. No framework, no heavyweight engine. Everything you need, images, sound, mouse and keyboard, is all available in Javascript with a canvas element. I use a basic index file with a canvas tag and a source file something like this:

If you’re new to games, the basic idea is either:

  1. You have a loop where you check the user inputs, update your game state, and render.
  2. You have a loop where you update your game state and render, and you use event listeners to keep track of user input asynchronously.

Javascript prefers the latter and I’m very okay with that. We listen for keyboard input, and there’s a main loop to update, and that update calls render. Actually, the dude is faster, so there are two loops. This is in general a very bad idea because it can introduce aync game state bugs, but this is a small game and I decided it was a cheap way to speed up the dude. See below about coding standards.

Drawing Practice

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!

Reference Material

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 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.

Photoshop Tips

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

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.

Animation Reference

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.

Coding Standards

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.

Javascript’s z-ordering (what to draw in front of or behind what else) isn’t very good for my purposes, so the rendering logic also checks draw order; after each row of fence pegs has been drawn, there’s a little check to see if the man or any horses are at the right height to be drawn next, and if so, they’re drawn.

Project Tracking

This is getting hard to keep straight, isn’t it? I use Evernote and Workflowy to keep track. I write ideas and talk to myself in Evernote, and write to-do lists in Workflowy.

Juicy Sound

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 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.

Doing sound in Javascript games is as easy and as ugly as this:

and this:

One Last Bit of Juice

When a horse kicks the player, you should shake the whole screen.

And there you have it, boom, done!

Gallery – 100 Days of Art Practice Days 11-20

Day 11: Finished my first sketchbook! Then started a new one and practiced some Ernest and Celestine style.

Day 12: Watercolor of one of the Ernest and Celestine drawings. It’s easy to mess up an ink drawing with sloppy watercoloring! Then a freehand drawing of Big Ben, our giant old stuffed bear. This was my first real freehand. I liked it.

Also, one ink practice of the game Hollow Knight, and one of my old games, Roshambo.

Day 13: A lot of time spent working on the first page of the Earthbound comic, doing practice drawings of town, doodads and characters, and doing some photoshop layout.

Oh! And I finished the page!

Day 14: Can’t remember what I did. All I have is this bizarre remnant:

Day 15: Avatar practice drawings. I really like the earth bender, though since Jin pointed out that his arms and legs are shrimpy relative to his head, I want to draw a much taller Sokka standing behind him, arms crossed, unimpressed.

Day 16: Hands from a reference. Everyone was right. Hands are so hard. But I had so much fun drawing this.

Day 17: Without setting out to do it, I drew something controversial. Also, Jeremy Clarkson.

Day 18: First tests of the grey pen. Gosh, she looks scary. The perspective drawing is nice though.

Day 19: Discovered Chris Chatterton, whose style I think I would like to copy.

Day 20: I experimented with quickly adding art assets to games, from a hotel room with no tablet or scanner. This was also a good test of Honey. I got the following proof of concept off the ground with about forty minutes of art, ten minutes of photoshop, and twenty minutes of programming.

The background is, and the lovely music is from my friend WhiteShip, a part of the failed game that led to Honey and something I really hope to use in future games.

Gallery – 100 Days of Art Practice Days 1-10

Day 1: Just trying out some styles (Tom Gauld, Zach Weinersmith, Stanley von Medvey) to see how well they fit with my own style.

Day 2: More style exploration. The first picture is Spaceman Spiff with a bit of Aaron Burr.

The second picture is just… weird. I started off by free-handing someone’s space station drawing, then decided it was a hat, then went to photoshop and traced it, then ended up with this:

Day 3: Bunch of ink drawings from reference pictures. The face I tried drawing upside down.

Day 4: More ink drawings from reference pictures. Three of them are from the series “Usagi Drop”. I’m going to try to water color the last one.

Day 5: Sure enough, I did the watercolor. The other stuff is freehand doodling.

Day 6: These ones were my own ideas. First one is my first self portrait. I used references for the pie and the pool float.

Day 7: Might as well start a comic!

Day 8: Bit more comic practice. These are all from Earthbound.

Day 9: Doodles

Day 10: More Doodles.

And that’s the first ten days!