Progress Video – Some Kind of Poetry Game?


Here’s a quick progress video for an idea I’m chasing down.

It’s the core mechanic for either a school RPG or a dreamy adventure game. In either case, the idea is to have a poetry jam where the player has to know a poem well enough to pick the next lines at speed.

For the RPG, I think what I want here is to have the player and the opponent exchange verses; if the player fails a verse, the opponent automatically picks it up, and vice versa. The winner is whoever does it better.

I’ll post more later if this idea bears fruit, and if it doesn’t, I won’t!

Game Idea – We Sailed Through An Endless Sky


What’s your name, friend?

<player gives name>

When I was young, I used to hide in a quiet hallway at my school. I would sit in a comfy armchair and do my homework.

Out a grand picture window, I could see our beautiful tower, standing above us all in the bright blue sky. I used to imagine it was a control tower, and the school was a giant ship. There was no land above or below.

<the game title appears>

We Sailed Through An Endless Sky


The game is a swashbuckling mystery. You play as Sam, the rapscallion child of  Sailing School, one of many city-ships traversing the endless sky. There is practical knowledge of high technology, more engineering than science. Everyone remembers that humans used to live on Earth, in a solar system, with gravity. No one knows why people now live in the endless sky instead. Different cities have different character; Sailing School is mostly academic.

You can choose Sam’s gender, but either way, people often guess wrongly. Sam is a sort of natural pirate. There’s intrigue and politics and sword fighting. Sam falls in with the pirate city, but eventually starts to search for the mystery of the sky. And unlike all the other frustrated seekers, Sam finds the answer.

The endless sky is a simulation. Mankind did live on Earth, but grew in technical prowess, and eventually invented truly convincing simulations. Some stayed behind on the crowded, failing earth. But most uploaded themselves, leaving the real earth behind forever.

There were two flavors of simulation. Some favored untethering themselves from natural rules, to explore utterly bizarre new ways of life. Others just wanted to live human lives with more space, and settled on an infinite grid. They agreed on rules of travel to prevent anyone from teleporting onto anyone else’s territory. Have you ever walked off to the left in an old video game? Left the game structures behind, until it was just you walking? And kept on walking for so long you couldn’t find your way back?That’s what happened to Sam’s people. They wanted to explore the void, and they explored for so long they forgot who they were.

Sam’s group also finds protocols that promise a way back. The wild other simulation won’t allow the humans, because they’re… too different now. But Earth will repatriate some simula if they choose it.


This knowledge sparks a fight. Some want to bury it, some want to release it. The release faction wins. The humans of the city-ships learn their fate, and many choose to go back to Earth, to wake up. Most of Sam’s group choose to go back. But Sam has grown to appreciate the virtues of the simulation, and doesn’t think it’s any less valid. The game ends with a player choice. Does Sam stay, or leave?

If you choose to stay, there’s a poetic epilogue, into the sunset.

If you leave…

<name>, wake up. Look around. Stretch your limbs. You’re on Earth.

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

Bro.
Bro.

Tools

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.


Iterations

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

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 Bugsby.net 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 https://watercolorpainting.com/staging/wp-content/uploads/2016/11/wispy-clouds-featured-image.jpg, 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.