Archive for the ‘Blog’ Category

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.

Why Critical Analysis Makes Movies Better

I’ve discovered that critical analysis adds to my enjoyment of media. Heck, even if there’s something I dislike, it becomes fun to engage with in a critical way. I’m looking at you, Moffat’s Doctor Who and Sherlock! My friends and I talked our way through Skyfall and Revenge of the Sith, praising awesome set-pieces, clever dialogue, good framing, satisfying plot-twists – and yelling at the screen when characters get needlessly problematic or when a few key edits would have made the movie so much better.

I love watching smart film reviews, too — the ones that deconstruct their subject to show how editing, framing, lighting, and narrative structure are used to communicate character, relationships, and story. Even when the movie (or tv-show or video game) in question fails to use these tools well, I still get to learn something. The piece becomes interesting because I now understand what makes it tick, for good or ill.

awwww Franco and Franco

I had some friends over to watch Snowpiercer (with bahn mi!) recently. I’m not sure any of us were in love with it — the premise is difficult to swallow (all humanity is dead except for a few hundred people stuck on a perpetual-motion train circumnavigating a world frozen in a misguided attempt to stop global warming), the darkly humorous tone is uneven (or is it even supposed to be funny? ‘Happy New Year!’), and the emotional poignancy of some early scenes is established in retrospect towards the end of the film (oh, that’s why I was supposed to care!). The best characters are the supporting characters, namely the badass wordless parkourist Grey and the badass wordless rasputin-of-a-henchman out for revenge for his murdered lover (also a badass wordless henchman). And of course Tilda Swinton’s wacky maniacal spokesperson, Mason: ‘A shoe doesn’t belong on your head. A shoe belongs on your foot. A hat belongs on your head. I am a hat. You are a shoe. I belong on the head. You belong on the foot. Yes? So it is.’

But one of the reasons I wanted to watch two hours of post-apocalyptic-dystopia-on-a-train was to watch Tony Zhou’s two-and-a-half-minute analysis of its framing techniques. He points out that the back of the train is always to the left of the screen, the front of the train is always to the right. As our protagonists move forward to the engine, they move from left to right. And in individual scenes, choices are presented front/back, left/right; humanity behind, something more ominous and monstrous ahead. We liked the film a might bit better after having this subtle bit of craft pointed out to us. The ridiculous premise becomes an artistic device, a construct for realizing this linear motion on multiple scales. When it is simplistic, it is to sharpen contrasts and push some thought-provoking ideas. It’s spec-fic, it’s sci-fi, and it makes good use of the visual medium it’s presented in.

now kiss! Franco vs. Grey – who will win?

Other times it’s my ability to re-imagine the story as better than it is that makes my enjoy it more. Like my ongoing writing project, Empire of Shadows, inspired by some compelling core buried deep inside the Star Wars prequels. My frustration with the mistelling of Anakin’s story led me to write my own version of it. And now I’m subjected my own work to the critical process — my friends who know more about the craft of writing can teach me how to more effectively, evocatively tell the story I want to tell.

RISD taught me how to give and take criticism, but I think it also taught me how to enjoy the critical process. Finding the good, the worthwhile, the could-be-better-with-a-bit-of-tweaking makes more a more engaged reader and watcher of media. I get to be a participant in the story-telling, and I don’t have to be satisfied with what’s put in front of me, either. Never give up, never surrender!