A Sitting Target is a Dead Duck

May 21st, 2011

Let’s face it: static art is so fifteenth century. The Mona Lisa may be considered by some to be the very height of artistic achievement. And yet it is doubtful that even they could spend multiple hours staring at La Giaconda on their computer screen. Static art still has its place (as background, for example), but what keeps people’s attention and makes an artistic fantasy come alive is movement.

Ever since animation came to adventure games in the early 1980s there has been no going back. Players may forgive a bad plot (although they’ll whine about it on the internet), but lack of animation is a complete turn-off to the vast majority of the gaming public. Accordingly I have allotted more time to animating Curses & Castles than any other aspect of the development process.

I’ll share many examples of my techniques over the coming months, but for now I will limit myself to discussing one of my first and most important animations for this project: my main character’s walk-cycle. A walk-cycle is an animated loop that plays over and over again as a character moves across the screen. In a game as large as Curses & Castles Princess Porphyra will do a considerable amount of walking, and therefore that animation will easily be the one that players see most. Therefore I wanted to make it as fluid and eye-pleasing as possible.

The problem was that I am not a professional animator, nor have I studied human anatomy, nor am I a particularly observant artist. As far as my wife knows, I never even look at other women, so my points of reference for this “amazing animation” were virtually nil. Sure I’d animated the occasional walking character in my capacity as a freeware developer, but those were usually ad-hoc affairs with a jolly kind of swagger resulting from happy accident and my willingness to abandon the process as soon as it looked “good enough”; this wasn’t really an option for a project like Curses & Castles where I’d set the artistic bar so much higher.

I did what I always do in this kind of situation where my knowledge and skill-set are completely inadequate to the task before me: I turned to the internet. I studied the walking frames of plump actresses from 1920s movies and read tutorials published by members of the AGS community. I even played with a walk-cycle generator and downloaded some animation software that used “bones” to simplify movement, but nothing seemed to help.

In the end the solution came from watching Disney’s Sleeping Beauty with my daughter. After the film was over I moved to shut it off and she begged to watch the credits (we don’t allow her to watch much TV so she considers any such extended screen time a treat). I shrugged and probably went back to reading the magazine I was hiding from her. Then, out of nowhere, this short documentary starts playing, showing how the movie was put together. There was a lot of impressive art work on that movie, but the key thing for me was this dorky guy in tights struggling up a slap-dash film set and flailing about with a broom handle. Then it cut to the brave prince, doing the exact same actions struggling up a rocky slope and fighting the dragon with a sword. Then it cut to the lead animator of the project: “Sure we could have done it from scratch,” he said, “but that’s the hard way.” Of course! A live model to base my character’s movement on!

When my daughter was in bed I got out our old digital camera that takes low-res avi movies and convinced my wife to do a bit of marching for me at various angles. Then I found some free software that extracted frames from avi format movies, and imported that into my drawing program. A little bit of tracing and, VOILA! I had it:

The main movement lines of my wife’s gait, soon to be co-opted by Princess Porphyra.

No, my wife does not suffer from an eating disorder: these are just her main movement lines (I won’t even say bones, since this is a huge simplification). Next I carefully redrew Princess Porphyra over each stick-figure, putting her roughly into the same pose (some concessions had to be made for her cartoony proportions). A little editing of cape and clothes to flow more smoothly and I had my walk-cycle:

Of course the final product has alpha channels that will blend those blocky outlines better in the game, but the motions are the same as you will see in-game.  Sorry for not synching the animations -yes, the princess is walking a bit too fast.

I’ve re-employed this same technique several times for complex movement of human characters in my game so far, although for simple actions such as reaching or speaking I fall back on my creative animation skills. The result (when finished) will be a game full of movement and action: an exciting adventure that players [hopefully] won’t be able to get enough of!

Absence Makes the Heart Grow Fonder

May 15th, 2011

Just a quick note updating the lack of web log activity lately.  I’ve become involved in a short experimental game that has really diverted my energy and attention away from blogging.  I am not at liberty to disclose the exact nature of this project as it’s a bit of a mess to explain at present, but the gist of it is that it involves a large number of game developers spending a very short amount of time each contributing to a collaborative game (as little as one hour!).  We’re not sure how exactly it’s going to turn out, but it’s very interesting to watch the project evolve.  Unfortunately, I’ve come to assume a coordinating role in the project, which eats up considerably more time than the minimum communicating with other participants.  Rest assured I have continued to make progress on Curses & Castles, but I’ve just had no extra time or energy for more writing when it comes to updating the old web log.

Anyway, I hope to get a post up this week to prove that I’m still committed to Curses & Castles, and once the experimental collaborative effort makes a little more progress I’ll be sure to write a log entry about it.  In the mean time, wish me luck on my many multiplying projects!

Seeing is Believing!

April 12th, 2011

Quick readers will have noticed that I’ve edited my previous log. It had been very lengthy in draft form so I had purged much of the material to make it short enough in order that people might actually read it. Unfortunately this had the effect of making it not entirely clear, so I have split it into two (the previous post and this one) and added back some of my deleted thoughts.

The previous log entry is now principally concerned with issues of artistic style, while this one deals with issues specific to designing a single background scene. When designing an interactive in-game scene there is much to be considered. Firstly, where will the main character have to move? What is the location and movement possibilities of secondary characters? These “walkable areas” need to be well flagged so that the player knows where is “in bounds” and where things might be inaccessible. Secondly, it is very important to consider elements of a scene that might change, such as a mirror that can be picked up or a switch that can be flipped. These elements must be drawn separately and placed seamlessly over the static background as objects that can be changed dynamically. Thirdly, are there any special animations to be shown? Not only must the designer consider the room necessary if, say, a monster were to throw a fit, but also the efficient uses of humdrum animations such as the main character climbing. It takes twice as much time to draw a character climbing from two different angles: if scenes can be designed so that she always climbs in profile or always with her back to the player then your animation workload can be halved. Finally, the composition of a scene should give clues as to what the focal point of the scene is: what’s important, and what’s just background.

The following in-game example will demonstrate these design principles in action. The scene is the kitchens in the bowels of the princess’s castle, now the lair of the fiercesome dragon that guards the castle ruins. Originally I saw this background as a means of demonstrating the dragon’s destructive capacities, perhaps by drawing him in a nest made of shattered furnishings and the bones of his victims. But there were scaling problems: with a relatively large princess sprite on screen, the dragon would either have to be unimpressively small or only partially visible. Removing the princess, thereby making the scene viewable but not walkable, would take away from the antagonism between the two characters and fail to give the impression of the looming presence one would expect of a powerful dragon. I drew this scene from several angles before finally alighting on a solution (obviously some of the abandoned work is incomplete):

The princess meeting the dragon was supposed to be a powerful scene, evoking in the player a sense of awe and foreboding. Cramming in the dragon was a challenge, however.  Should he be coiled up (so that the player could see more of him), or only partially visible?  What angle would best reveal his size and power? I ended up going with one of the preceding experiments: see if you can guess which one.

All of the above have their advantages. The first would show the dragon looming over the princess below, although unfortunately only showing him from behind. The second would accentuate the dragon but reduce walking space and movement cues (where are the exits?).  The third would show what a violent creature the dragon can be with a very detailed nest of shattered furnishings, weapons and bones, but the level of detail required an awful lot of time to implement and it would shrink the size of the dragon.  The final one attempted to ameliorate some of the issues with the second one.

Having found myself wasting time doing drawing after drawing, I decided to refocus on fundamentals.  What was really necessary to make this scene work?  In a moment of clarity I finally realized that the fact that this scene took place in the castle kitchens was really irrelevant to the story. The effect of the dragon’s nest, although revealing, could be shifted elsewhere: shattered furnishings and bones could litter the rest of the castle. What was really important was the dragon, and since he was so immense and powerful he would dominate the scene, leaving little room for anything else. Once I had conceptualized this the background problem resolved itself: as long as I could fit a dragon character on the screen, the background would simply be whatever space was leftover. Finally, while I was testing the scene I stumbled on the idea of blacking the princess out in order to accentuate the radiant force that was the dragon. This is the result:

The final version (so far!).  The dragon dominates the scene, leaving little of the background visible.  The background is actually identical to the second one shown above: note how the focal point of the dragon’s character overwhelms any thought of the background being just a ten minute incomplete mash (which it is).  Too bad I hadn’t thought of that right off the bat!

Again, paying closer attention to what is really important in a scene would have saved me some work, but it is not always obvious beforehand how to actualize it quickly and elegantly.  Experimenting with various options has the benefit of focusing me on what is really important, which usually results in a much improved end-product.  As my work has progressed I’ve become a little better at anticipating design dead-ends, but I still rely heavily on visual experimentation to solve my problems -for me, seeing is believing!