Games, Play, and Joy: Part 5
Adding gamefeel and juice.
This is Part 5 of my series Games, Play, and Joy, which is based on a class I taught in 2019 at NYU’s ITP (as part of my residency there), aimed at games-curious artists. As ever, this essay series doesn’t represent the opinions of my employers or whatever — just me.
Please note that this chapter has videos and gifs that include visual distortion, bright lights, and some screenshake. Take care if you have photosensitive epilepsy or related conditions.
Hope you enjoy.
Theory
- Part 1: Creating joyful possibilities with games.
- Part 2: Using rules as excuses and catalysts.
- Part 3: Playing with systems of power.
Tactics
- Part 4: The art of finding the fun.
- Part 5: Adding gamefeel and juice. (you are here)
- Part 6: The promises and perils of simulations.
- Part 7: The joy of feeling seen.
Your Turn
- Part 8: Epilogue.
Given that we have covered so much theory so far, let’s kick off the tactics section with some super-actionable techniques. (For the sake of demonstration, we’ll turn these techniques up to 11 and go super overboard with some of these numbers; in reality, you’d want to tone them down a lot, both for style and accessibility reasons. Check out more accessibility guidelines here.)
Today we will be dipping our toes into “game feel,” which game designer and author Steve Swink defines in his book as “the tactile, kinesthetic sense of manipulating a virtual object[…] It is a kind of ‘virtual sensation,’ a blending of the visual, aural and tactile.”¹ Specifically, we’ll talk about 5 practical tricks that can help you convey feelings of scale, speed, and power through visual effects in digital games.²
What I love about these techniques is that they are often fairly low-effort to implement,³ but very high-impact. Using these techniques cleverly can often give your players a fundamentally different and enhanced experience of your game, even without changing any of your actual mechanics at all.
Let’s look at a practical example for why we might play with these techniques early in the dev process. Say that I’ve decided I want to make a game that really taps into ilinx (a shock, I know). It’s a super-high speed driving game, in a huge open landscape, during an apocalyptic meteor shower.
Like with the super-simple prototype of Slam City Oracles we talked about last chapter, I decide to make the absolute simplest prototype of how this might feel, to see if I find it fun and sticky enough to keep developing. So, I go and I make a little landscape (a plane) with a little bit of dramatic terrain (a simple ramp); I make a little car (a cube) that’s controllable with mouse and keyboard; and I make a big ol’ meteor (cube) to convey the kind of obstacle that might fall from the sky during a level. I hit play, and this is what I get:
This is… not great. Everything feels slow, and the ramp that the little cube drives off is barely noticeable. It certainly falls far below my daydreams of making the videogame equivalent of Mad Max: Fury Road. “Maybe I just set the max speed too low,” I think to myself, and so I greatly increase the player’s max speed. Here’s what I get:
A fun fact about this: it’s still boring. We may have increased the max speed, but we do not feel like we’re going much, if at all, faster. Frankly, it’s hard to tell when I’m moving at all: the screen looks effectively the same when I’m accelerating and decelerating. The massive falling meteor feels like it might as well be a beach ball. The whole thing feels sludgy and floaty.
And here’s the other thing: by increasing the max speed, we’ve also opened up a whole other can of potential issues. For example, think about speed and its relationship to level design. Pretend that, instead of taking place on a flat plane, this prototype took place in a cityscape I already designed and playtested. If we double our max speed, all of a sudden our roads and levels may feel way too small for our players, and what previously felt like a fun landscape of cleverly driving at top speed now is just a continually frustrating experience of slamming into walls. Accurately testing our speed change means we have to change our level scale to give the speed a fair shake — and reworking those big swaths of spaces can be expensive, time-wise. There’s a big ripple effect.
Before we huck this prototype in the trash, let’s back out of our increased speed approach and think of other, cheaper ways we can convey this feeling of “high speed, massive object.” We don’t want to spend too much time on assets or effects we might throw away, but we take an afternoon to play with techniques and visual effects around this mechanic. (And, for the sake of a clear comparison, we crank all our effects and numbers up super-high.)
At the end of the day, we have this:
Would you have guessed that the prior prototype had a faster top speed than this one? Even without playing the prototypes yourself, which feels more like a high-speed drive to a massive object?
It’s neat: just through these tactics (and a few others that we’ll cover later in this series), we’ve created a fundamentally different experience of the same objects in our game world. The landscape feels wider; the car feels smaller and faster; the massive object feels way more massive; and the prototype starts to feel fun and sticky. All that without changing any core numbers or mechanics at all.
Reverse-engineering
Rather than spoil you by giving you the techniques up front, let’s look at some games that leverage these techniques really well, and see if we can reverse-engineer what they’re doing right. As you watch these gameplay videos, ask yourself: why do the objects in these videos feel fast, big, or heavy?
It can be hard to pinpoint this stuff, since it’s meant to be nearly imperceptible — “an invisible art,” as Swink says. But try imagining the very first prototype you might make of each game (cubes and a camera following the player, like our prototype above), and use that benchmark to try and suss out what the difference between that and the final product is. Don’t take anything for granted. It’s okay if you don’t have precise words to describe what’s happening — just note what you see and sense.
So, what did you notice?
Alright, I’m done leaving you hanging. Let’s go technique by technique.
Trick #1: Field of View
Field of view, or FoV, refers to the extent of the observable world that is capable of being seen at any given moment — in our case, from the point of view of our our game camera. Basically, the larger the FoV, the more of the world you can see around you.
Folks who are keen on competitive games (especially FPSes) often care a lot about FoV. A wider FoV means you have much more peripheral vision, meaning that you have a better view of what’s going on around you (i.e. who’s trying to shoot or sneak up on you). Wider FoV tends to introduce some visual distortion, especially towards the edges of the screen (FPS arms can start looking very noodley), but a lot of players are happy to make that tradeoff for better situational awareness.
Why does this matter for conveying scale and speed? Take a closer look at the thumbnail above. Same scene, same location, same position — and yet the distance between our player character and the cliff face they’re looking at seems far longer in the last one than in the first. Basically, altering FoV changes our perception of how far away things are, and that in turn massively alters our perception of speed.
David Bianchi, in his talk The Physics of Fun: Saints Row, gives an excellent description of this phenomenon. He points out that lower FoVs squash distances, making things appear closer, while higher FoVs accentuate distance, making things feel further away. “Since a higher FOV makes distances seem farther than they are,” he continues, “it also makes travel feel faster than it is, since it feels like you’re moving a greater distance in the same amount of time.” Jump to 31:50 in his talk to see how profound a difference it made for vehicles in Saints Row.
If you look closely at our second prototype, you can see that the faster we go, the wider our FoV gets. I’ve simply mapped the FoV to the player’s current speed, to help exaggerate the differences between minimum and maximum speed.
With a low FoV at low speeds, distances will feel closer and thereby speed will feel slower. As players speed up, you can proportionally tick up the FoV to exaggerate the perceived distance and make the speed feel even faster. You can do this linearly for a smooth transition, or do it on a curve to make something feel like it has super-fast pickup (like how a super-responsive sports car can accelerate from 0 to 60 in less than 3 seconds). This trick helps crashes feel more impactful too: when we brake hard, or when the Saints Row car slams into an object, its speed suddenly drops, and the FoV snaps back to a lower value,⁴ making the wall feel like it’s right up in your face. FoV is a super powerful tool that’s just a mapping function away.
Trick #2: Reference points
This one is so obvious that it almost feels like cheating, but it’s still worth bringing up. In the same way that audio echoes allow us to get a sense of a space’s size through sound, visual reference points allow us to orient ourselves in space and accurately judge where we are, how big we are, and how fast we’re going.
Scroll up to look at our very first driving game prototype, and you’ll notice that our landscape is completely devoid of this information. Our eyes don’t have anything to grab onto, and so it’s hard to tell how fast we’re moving — or if we’re even moving at all. In our second prototype, the details of the grass texture, even as blurry as it is, gives us a reference point and helps indicate when we’re moving and how fast we’re going.
Katamari Damacy is practically a game about reference points. We have two kinds of reference points in the screenshot below: textures (like the wooden floor), which have details that allow us to perceive general change and movement relative to them; and objects (like the dice, nails, and mahjong/chess pieces), which we’ve seen in real life and have a mental model of. We know all those things are small; our katamari is about the size of those things; therefore, our katamari is small too.
Earlier, you watched a video of Katamari Damacy (right? You didn’t just skip them, right?), so you may have already noticed the additional trick that Katamari Damacy does to convey scale. Do you know what it is?
Trick #3: Camera position
Camera controls in games can be notoriously finicky, but it’s very useful to be aware of some basic techniques so you can understand and take advantage of them.
As any photographer or filmmaker could tell you, camera angle/position has a profound impact on our understanding of, and emotional reaction to, what’s happening on screen. Camera distance from subject, vertical position, and angle all convey different kinds of feelings.
Consider the two shots from the movie Matilda below. In the first one, we can see that Ms. Trunchbull is objectively a good deal taller than the kids. But it’s not til we bring the camera low to the ground and tilt it up — like a short kid craning her neck to look up at an adult — that Ms. Trunchbull feels tall (and we, as viewers, feel small).
Likewise, check out these two shots from the first Fast and the Furious movie. Same race, same speeds, different camera heights. The second one, which has the camera lower on the ground, just feels faster and more dynamic than the first.
Shadow of the Colossus leverages camera angles to convey the scale of the colossi and the landscape. When we’re faced with a colossus, the camera is almost always low to the ground and craned up, emphasizing that we are but a tiny lil’ David compared to these massive Goliaths. Compare the shot from 2005 to 2018: the colossus looks plenty big in the 2018 version, but in my opinion, it feels bigger in the 2005 version, for that exact reason.
Katamari also uses camera angles to convey scale, just in reverse. When we start out with our tiny katamari, our camera is fairly close behind it, and at a nearly eye-level angle. Then, as our katamari gets bigger, the game starts to pull the camera back, bring it vertically up, and tilt it down. The more aerial shot gives us an impression of large scale, of looking down on things far smaller than us.
We can apply these tricks to our driving game in two ways. Bringing our camera lower to the ground as our speed increases makes us feel like we’re going faster, like in the Fast and the Furious clip. We also tilt our camera up to look at the monolith, making it feel bigger and more imposing, as our little car looks up at it from below rather than head-on.
Trick #4: Light, shadow, fog, and color
Light and shadow give us signals as to how large and how solid something is. On a sunny day, would you rather get out of the sun by standing behind a big tree trunk, or behind a balloon string? The tree is a more attractive option, because its trunk casts a big shadow, unlike the thin balloon string. Likewise, if you were trying to get out of the sun and had to choose between standing behind a tree or a tremendous water fountain, you’d probably still choose the tree: even if the water fountain is Bellagio-sized, the spray is not very dense, and so it won’t block out much light at all.
This is a long way of saying something obvious: if something is meant to be big and dense, it should cast a big dense shadow.
Again, we can look at Shadow of the Colossus to see how shadows help convey the scale of the colossi and the towering environment as a whole. The linked video is neat because you can see how better technology over the years leads to better shadows, which really help convey the scale of the beasts you’re fighting and the landscape you’re on.
In our little driving prototype, it’s initially hard to tell how far away the objects are and how big they are in comparison to each other. But when we add corresponding shadows, we see that one shadow is way bigger than the other, allowing us to intuit that that far-away object is way bigger than we are.
Played out as lens flares may be, we can use them to help emphasize the transition between the presence or absence of light. That’ll help us convey just how massive this thing is: it’s so big, it blocks out the sun!
Another way to simulate distance, brought to you from my brief stint in the fine arts, is by mimicking atmospheric perspective. Atmospheric perspective is basically the way that our perception of distant objects is affected by the qualities of our atmosphere. A handy guide from ArtHints.com notes that, among other things, atmospheric perspective means:
- Objects’ saturation decreases with distance, causing them to take on some of the atmosphere’s colors (this is why faraway mountains tend to look blue)
- Objects’ contrast decreases with distance
- Objects’ brightness increases with distance
If you want to see this effect in action, scroll up to the image at the very top of this post. Notice how the further away the landscape is, the less saturation and contrast it has. It is also still fairly bright, and tinted blue thanks to the sky.
In our original prototype, the falling cube started light gray and pretty much stayed light gray. In the second prototype, I’ve mimicked some of the qualities of atmospheric perspective with Unity fog and lighting settings. Notice how the cube looks as it’s just starting to drop through the sky: low saturation (slightly blue, like the sky), low contrast, but still fairly bright. All this helps it feel much further away.
Trick #5: Post-processing effects
This is less of an individual trick and more of a big ol’ bucket of toys to play with. If you don’t know what post-procs are, you can think of them as kind of like Instagram-style augmented reality filters: visual effects and overlays that change the way your image (or your game) renders. Unity provides a big bucket of post-procs including motion blur, ambient occlusion, chromatic abberation, and many more.⁵
To understand how much post-procs can affect feel, check out Marc Flury’s GDC talk on Thumper (Seven Years in Alpha: The Thumper Postmortem) to see how post-procs fundamentally shaped the mood and the feel of the game.
Among other post-procs, Flury cites:
- Cubic distortion, “for selling the sense of speed”
- Radial blur, also for selling the sense of speed
- Vignettes, to help focus the player on the action in the center of the screen instead of getting distracted by the periphery
Our improved prototype uses the corresponding Unity versions of all three of these. Check out, for example, our second prototype to see how lens distortion makes our prototype go from feeling “pretty fast” to “almost out-of-control fast”:
Wrapping up feel (for now)
Game feel is a tricky topic that frankly deserves its own course, rather than just a section of a class. People dedicate their entire careers to facets of game feel as focused as ADSR curves (attack/decay/sustain/release) for button inputs, so don’t think that our overview of scale, speed, and power techniques are all there is to game feel — not by a long shot.
The problem is, game feel is both necessary and expensive, which can make it difficult to figure out where it fits in the prototyping process. If we didn’t take the time to add feel to our original prototype, we might have prematurely thrown it out for “not feeling good enough” — but the flip side, we could easily get distracted by feel at the expense of developing our core mechanic, focusing on finessing details of features, assets, or effects that we may end up just cutting out in the end.
Figuring this balance out is, in my experience, a kind of intuition you develop over time, as you make more games and understand how to use your tools better and better. Til then, these five simple techniques can help add some spice into lackluster prototypes and help you bridge the gap.
See you in Part 6.
¹ Game feel is a very large topic, and we will only be covering a tiny slice of it here. Swink’s book on game feel is incredibly comprehensive (covering real-time control, simulated space, and polish) and one of my favorite game design reference texts — it is well worth a place on your shelf.
² This chapter is centered on visual techniques, so it is oriented around the experiences of sighted players. There are other techniques that are less reliant on visuals/that use other senses that we’ll get to in our second game feel section.
³ We’ll be talking about implementing these in Unity, since it’s what I know best. Obviously your mileage may vary with your engine.
⁴ Just be careful not to go too low — low FoV can trigger motion sickness. More on that here and here.
⁵ Certain post-procs can potentially make people nauseous, or trigger things like photosensitive epilepsy. If you’re moving towards launch, use a light touch, check with experts on the subject, and let players turn these and other effects on/off. Check out more accessibility guidelines here.
Hope you enjoyed! If folks seem to like this series, I’ll keep going. I used to have a tip jar here, but if you liked this free series and want to show your appreciation, I would be delighted if you instead threw a couple bucks to local mutual aid group, Bed-Stuy Strong. I’m not affiliated with them at all — I just admire their work during this pandemic.
