Avatar: The Time of Peace

Juusan and Ching-Shih Fight

My weekly roleplaying group just finished up Book 1 of Avatar: The Time of Peace. Set in the aftermath of Avatar Kyoshi’s death, that title is more propositional than descriptive. Our five player characters have taken on the roles of Kyoshi’s hand-picked peacekeepers to deal with warmongers, troubled spirits, and their own conflicted pasts and desires.

Our illustrious GM commissioned the above image of a key scene. Juusan, our fire bender and trouble-maker, was on a path to learn how to control his bending that ended in a spectacular mid-season duel. His old friend and partner-in-crime, Ching-Shih, had been blackmailed into killing him by a shared enemy.

Juusan prevailed, of course – as did the rest of us. It’s a kid’s show, after all. (Or maybe more for teens…) From our main cast of player characters (including H’sad the sand bender and disciple of Wan Shi Tong, Kesak the water bender and former pirate, and Pema the air bender and friend of adorable spirits) to a great cast of supporting characters (but mostly Koko, great-great-great-granddaughter of Kyoshi, 16-year-old stowaway, ninja, comic relief, and team mascot).

But the trouble isn’t over yet! Book 2 starts in a couple weeks. My own character, Daiyu Feng, Kyoshi Warrior and leader of our little gang, is being tempted to follow in the footsteps of Chin the Conquerer (whose angry ghost was Book 1’s Big Bad). Wouldn’t it be so much easier to maintain her beloved peace and order by just… ruling the world? With command over the Kyoshi Warriors and the entire Fire Nation army at her back, nothing can possibly go wrong!

I also designed some custom Primetime Adventures character sheets for our adventures:

Avatar Character Sheet

After getting feedback on the first version, I removed the duplicate ‘issue’ and made the alignments consistent within each of the edges and connections sections. That way it’s easier to see which edges (or connections) you’ve used up at a glance.

Avatar Character Sheet 2

Game Feel & Motion Design

I’ve been thinking a lot of about interface/interaction/user experience design recently. As usual, two ideas clicked together for me: game feel and motion design. I wrote a bit before about designing game feel for Prospora, how the sounds syncing up with the actions made even small actions feel satisfying. Móe was all about creating a dream-like mood, using colors and music, motion and shape to accomplish it. In fact, in early play-testing, the boids were triangles, and when they flocked towards the player it felt menacing – rounding their appearance and slowing them down a tiny bit made a huge difference in tone.

Biome screenshot

My games tend not to be about points, challenges, or even narrative. They’re about moment-to-moment actions and reactions. The creators of Biome (so… pretty… look away, Sarah, look away!) talk about loops as the core of their game, little mini story arcs:

Lets say you had a coffee. Maybe you decided you wanted one. Then, you made it. Then, you drank it. That was the story of when you had a coffee (wasn’t it great?), and you remember it because it had closure. #

Or an exploration game loop:

See something interesting in the distance -> Travel towards it -> Reach it. #

Really, with examples like these, it becomes abundantly clear that this isn’t even about games anymore. The loops can be so minimal that we could be talking about little interface interactions: flicking a notification off the screen, the little bounce that some panels get, the clicking into place of an object hitting guides.

Google Material effects animation

Google’s Material and Paul does a good job of describing how these sorts of interactions can begin to feel naturalistic in a way that is fun, satisfying, and ultimately communicates something about how the thing works. What’s important about the playfulness of them is that they invite exploration and experimentation.

Traditional computer interfaces are just not inviting. There’s something about them that makes people afraid to just mess around. Sure, some learn after years of use what they can and can’t play with – I admit, I’m one those people – but most people never do. Computer interfaces generally have awful affordances.

It took smart phones and tablets to change the paradigm – a fresh start, with interaction design leading the way. User interaction is a higher priority here, at least partly because the limited space and hardware constraints require very intentional design to create something at all usable. Alan Cooper, in The Inmates are Running the Asylum, points out that this is how physical objects get designed: tight constraints require tough feature trade-offs, leaving only what is essential.

Otner Botner finger plane

Photo of the original PalmPilot

I grew up with PalmOS, a descendent of the Newton and precursor to iOS and Android. It succeeded where Windows handhelds failed, and, let’s face it, where most desktop systems as well. The PalmPilot kept things simple and took advantage of the touch interface, making affordances more ‘natural’ – that is, more closely related to the way we relate to physical objects. Palm used a stylus, and had us writing Graffiti rather than typing.

iOS and Android use an even more tactile motif. Everything is soft and squishy, for our fingers to push around. In mobile, we see dynamic, animate, feedback-y interfaces flourishing. Developers are trying to make their apps not just easy to use, but actively joyful. A series of tiny pleasurable experiences that complete one loop and invite another. This is all still new, but I don’t think it’s a fad. Paul Stamatiou thinks it’s the way of the future:

You’ll begin choreographing. In the next few years consideration for motion will be required to be a good citizen of your desktop/mobile/wearable/auto/couch platform. It will be an expected part of the design process just like people will begin to expect this level of activity and character in software. #

Just navigating the Android interface sometimes feels like playing a game. And not because it’s challenging! A gameworld has a novel and arbitrary set of rules, and it must communicate those rules to the player in an intuitive way. The same goes for any piece of software. Its mechanics are hidden from view, so it should use every tool at its disposal to make interactions feel real and satisfying, making you want to interact with it more. Little loops of action and reaction make that hidden world palpable, knowable, and explorable.

Letters from Prospora

prospora-screenshot

This little game of mine (you can find it here), which is probably the most polished game I’ve made yet, actually began its life as a prototype for a completely different game. But I got side-tracked with the idea of little planets populated by colonies of what were once ‘memes’ and are now ‘spores.’ And when my friends actually enjoyed playing it, I was driven to keep going with the concept.

The actual mechanics cemented very quickly. You control not individual units, but the behavior of your colony as a whole. Moment to moment, each spore decides whether to attack an enemy spore, breed into an empty space, or do either of those things on a connected planet. The AI’s each start with randomized settings for attack/spawn/travel, but you — special, special you! — get to muck about with the settings in order to take advantage of the changing landscape of the game board. The emergent behavior is surprisingly and pleasingly complex, though, even without the human player in the mix. The hardest part was actually coming up with an algorithm for the AI’s spore launching that created ‘life-like’ networks of planetary connections that had local density with a few distant satellites — my brother helped, and we spent many hours two Christmases ago pouring over logarithmic graphs.

tutorial-3

The other thing this game taught me was the importance of ‘game feel.’ I was imagining this as a mobile game, so the control scheme had to be intuitive and responsive without resorting to keys or right mouse buttons. My favorite part is the player’s spore launching mechanism. I spent hours tuning the size and color of the halo, the angle marker, and the accompanying sounds to make this feel satisfying. In general, the interface took as much or more time to put together and polish than the game itself.

Right now I’m ready to move on to other things — after all, I’ve worked on Prospora off-and-on for two years — but if I gather more energy for a new version, I’d love to put together a great interactive tutorial. Right now, it’s just a series of annotated screen-captures. What it really should be, though, is a stripped-down version of the game that adds layers as the player completes tasks:

  • ‘Here’s your planet! Click to select.’
  • ‘Now try launching a meme!’
  • ‘Uh-oh, there’s a planet full of enemy spores. Better increase your attack and travel.’
  • You get the idea.

This might be more important than such flashy features like multi-player or a mobile version. However simple and engaging Prospora may be (I couldn’t help playing at least half a game whenever I ran it to check updated code), a static tutorial is never going to hook new players as well as something hands-on. In fact, that was one of the first comments I got when I posted it the LÖVE forums.

Give it a try, give me some feedback, and conquer those tiny universes!

tutorial-7

UPDATE: In version 1.1, I took another bit of LÖVE forum advice and made the player spore color the same blue shade as the interface. I then set the AI colors by randomly selecting a hue from the non-blue parts of the spectrum. Aesthetically I think I prefer the original white spores because they provided a nice contrast to the colorful enemies and to the bits of the interface that are blue, but this also makes it clear which spores are yours and helps them stand out from the stars.