2016-08-09



alvinashcraft
shared this story
from Gamasutra News.

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

This is a modified version of a talk I gave at the Independent Games Summit, GDC 2015. It contains some background information on 2D scrolling, along with plenty of classic gaming nostalgia. I hope you find it useful and enjoyable!

The original post can be found here.

Scroll Back

The Theory and Practice of Cameras in Side-Scrollers
By Itay Keren, owner of studio Untame, creator of upcoming game Mushroom 11

Overview

Scrolling

Neural Background

Attention, Interaction and Comfort

Scrolling Nostalgia

Follow The Action

Curb Camera Motion

Snapping

Smoothing

Framing

Direction

Multi-focal Camera

Manual Control

Camera Shake

Custom-Made Camera

Mushroom 11

Glossary



Working on my game Mushroom 11, I was faced with many different design and technology challenges. I wasn’t expecting to find references to issues like dynamically changing shapes or vertex animation, but I was quite surprised that camera work, a subject with more than 30 years of history in games, was hardly discussed.

I decided to start a journey through the history of 2D gaming, documenting their challenges, approaches and how the evolution of their solutions. Also, since there’s a lack of proper terminology for the many different solutions, I started gathering and categorizing them into groups, providing my own glossary, if only for my personal reference.

Scrolling or Panning refers to any attempt to display a scene that is larger than what fits in a single screen. There are many potential challenges with scrolling, like choosing what the player needs to see, what we as designers would like the player to focus on, and how to do it in a way that’s fluid and comfortable for the player.

While I’m going to focus on 2D camera systems, many of these general concepts apply to 3D as well.

Before we examine these games, let’s touch on the neural background of scrolling so we can understand our vision and perception better. By doing this we can understand how scrolling can go wrong.

The fovea-centralis is the receptor inside our eyeball responsible for sharp and detailed central vision. The second and third receptor belts, the parafovea and perifovea, excel in reducing images and motions to patterns allowing changes to be quickly recognized, including recognizing familiar alarming shapes and changes in motion speed or direction.

This visual input uses the fast track straight to the Amygdala, allowing an alert response while the Visual Cortex is deciphering the input. Training your brain, especially by tying the shift in peripheral vision to the controls, proves useful over time.

The Vestibular system located in our inner ear, is responsible for maintaining balance and providing spatial orientation. The signals it sends allow the body to maintain its balance, while keeping visual focus on specific details.

When some people, like me, try to read in a car, the acceleration combined with the lack of visual corresponding feedback, can lead to nausea and vertigo.

The opposite is also true: as the Perifovea quickly picks up a change in the background, it expects a corresponding feedback from the Vestibular system. When there is none (as you’re sitting firmly in front of your computer), the result can be the same.

So, conflicting sensory signals (Visual vs. Vestibular) may lead to discomfort and nausea, and though it’s worse in 3D (especially VR), it is still very much in effect in 2D games.

To help understanding the problems in scrolling, I’ve categorized its elements into three major challenges:

Attention: Use the camera to provide sufficient game info and feedback (what the player needs to see)

Interaction: Provide clear player control on what’s displayed, make background changes predictable and tightly bound to controls (what the player wants to see)

Comfort: Ease and contextualize background changes (how to reconcile those needs smoothly and comfortably)

So let’s start our journey back to the 1980s, when designers were inventing completely new design schemes while overcoming technical limitations that are hard to imagine 30 years later.

You’ll also notice references to several leading indie games, mostly from the last 10 years or so, which tend to always to display the innovation, attention and care that can be expected from independent artists, and camera work is certainly no different.

Starting with the basics. Generally speaking, your player has authority over the main character. This dictates that the attention should be directed at that character by closely following it with the camera.

In the early 80s, scrolling was a difficult task, and the developer had to face limitations such as CPU, memory capacity and segmentation. Even with those challenges, some great side-scrollers were released, gracefully overcoming these limitations. However, in many cases the motion was understandably simplistic or low-resolution.

It’s remarkable that back in 1980, a game like Rally-X was able to overcome technology limitations and present a true dual axis camera. It uses the default position-locking mechanism, keeping the car in focus at all times and the camera motion completely predictable.

Rally-X © 1980 Namco

position-locking - camera is locked to the player’s position

Note: the terms presented throughout this talk were created for my own reference and work, but I’d be delighted if others find them useful, make improvements, and provide me with feedback.

Kung-Fu Master is another good example for position-locking, designed by Takashi Nishiyama, the designer who made Moon Patrol, and would later make Street Fighter.

This game uses another basic mechanism which I call edge-snapping, which simply snaps the camera to the edge of the level, allowing the character to move away from its anchor point.

Kung-Fu Master © 1984 Irem

position-locking

[edge-snapping* - set a hard edge for camera positioning]

* edge-snapping is too common to mention per each game, and will be ignored from now on

Position-locking is basic but still very useful. For a crafting adventure game like Terraria, with a small character relative to the screen with pretty small jumps, it works very well, providing plenty of view space in all directions.

Terraria © 2011 Re-Logic

position-locking

How do we avoid moving the camera if it’s not absolutely necessary? 30 years ago, scrolling had several issues: it was CPU intensive, requiring a major part of the screen to be refreshed. And even when successful, the large pixels of the time made scrolling choppy. Best approach was to keep scrolling to the necessary minimum. One way is to allow the character to move within a certain window, and only scroll when it pushes against the edges of that window.

Jump Bug is considered by many as the first platformer, although technically the player is automatically jumping repeatedly, and control is limited to jump height as well as left/right motion. Most of the game as an automatically moving camera, forcing players to keep up while avoiding obstacles, like many other scrolling games of the time.

Jump Bug © 1981 Hoei/Coreland (Alpha Denshi)

camera-window - push camera position as the player hits the window edge

But the camera-window technique used in the last level, solved a problem that many designers didn’t even know existed, and set the standard for thousands of platformers to follow. The camera-window technique also introduced some issues, like having very little view of what’s coming forward or up ahead as the player jumps towards the exit.

One of my favorites, Rastan Saga, introduced movement in 2 axes with various paths to take. It was also one of the first games to really evolve the relationship between the camera and the mechanics. This camera-window is as high as a standard jump, so jumps don’t cause vertical camera motion unless Rastan has already moved within the window. This eliminates the need in rapid camera jerks.

A major flaw with this method is that enemies coming from above are less noticeable, especially if Rastan has already moved vertically within the window. Also moving left, which happens a lot in castles, is really uncomfortable as it leaves a very narrow lookahead margin.

Rastan Saga © 1987 Taito

camera-window

The camera-window technique is still used in modern games. See how in Fez, the horizontal camera-window is maintained through dimension shifts, and in fact, the shift axis is chosen to keep the character within the window. The choice of camera-window in Fez is far from default, and represents the ideal camera solution for such unique game mechanics, as we’ll show later. Vertically, the camera maintains a straightforward position-locking, smoothed using lerp-smoothing, which we’ll define later.

Fez © 2012 Polytron Corporation

camera-window* (horiz.)

* Also enforced during dimension shifts

position-locking (vert.)

lerp-smoothing

region-based-anchors

manual-control*

* Right-stick provides extra panning

Note: grayed-out terms represent camera techniques that are defined later in the article.

We showed the use of camera window to reduce camera movement, but as we’ve seen in Jump Bug and Rastan, it has some flaws as the player drifts away within the window. Here are a few ways we can fix it.

Maybe my favorite classic game, Shinobi, has some very high jumps between multiple platforms. The designers came up with a unique camera system: vertically, due to the many platforms the character jumps between, Shinobi uses a very wide vertical camera window. As always, the window pulls the camera with it immediately. The problem with a wide (or tall) window is that after a small jump, the character could be stuck at the top of the window with very little top-view, as we’ve seen in Rastan Saga. Shinobi simply continuously aligns the camera, slowly, to the Ninja, keeping the focus on the action and in most cases keeping rapid camera motion to the minimum.

Shinobi © 1987 Sega

position-snapping (vert.) -constantly reduce window drift by focusing the camera back on the player

camera-window (vert.)

position-locking (horiz.)

static-forward-focus

One of the many features that Super Mario World introduced was platform-snapping. As with any camera-window, the camera would stay stationary until the character hits the edge. But since mario inevitably lands on a platform, as soon as he does, the camera would immediately snap to its position.

Super Mario World © 1990 Nintendo

region-based-anchors

platform-snapping* - camera snaps to the player only as it lands on a platform

camera-window* (vert.)

* Where applicable

dual-forward-focus*

* Threshold triggered

manual-control* (horiz.)

* Controller provides extra panning

(This is the first mention of the work of Miyamoto and certainly not the last. The awareness and the attention to the smallest details is what really makes a true great designer, and not just clever game mechanics.)

You can see the same idea in the original Rayman. The top of the screen serves as the top of the camera-window. Notice how the camera does not move as Rayman jumps, but rather gently snaps when he lands. This is a clever solution since the camera-window is just over the height of Rayman’s jump, showing once again how camera system is an integral part of game design.

Rayman © 1995 Ubisoft

platform-snapping*

camera-window* (vert.)

region-based-anchors

dual-forward-focus*

lerp-smoothing

* Where applicable

This technique is very effective even today, allowing the designers to keep the camera smooth during jumps, and center the camera only when the jump is complete, or if it pushes a camera-window. Note that platform-snapping is naturally only effective when the player can land on platforms. In other cases, like the Jetpack character in Awesomenauts, the player only conforms to the vertical camera-window.

Awesomenauts © 2012 Ronimo Games

camera-window (vert.)

platform-snapping

position-locking (horiz.)

We talked before on the role of our peripheral vision, and its effect on visual comfort. In the olden days, with the large pixels of the time, even simple tweening would look jumpy due to the large pixels.

80s Pixel

(NES: 256x240 resolution)

Indie Pixel
(Contains multiple screen pixels)

So how can we smooth the camera motion, when we are confined by a really strict and crude grid of large pixels? Nowadays, we can design beautiful pixel art, and then move it across the actual pixels that are much finer than the pixel-art. And if you choose to avoid going pixel-perfect, you can even make use of the sub-pixel space as most modern engines offer.

Smoothing with (Pseudo) Physics

Pseudo-physics can come into play to help smoothing a position-locked camera (and you could argue that any engine physics is in fact pseudo).

Pac-Land is arguably the first modern platformer. It has many of the elements that helped defining this genre, such as jumping on platforms, avoiding enemies and picking up bonuses. With regard to smoothing, its Speed goes from 0 pixels per frame to 1, 2, 3, all the way to the maximum speed, and then damped down to 0. And with the camera being locked on the player’s position, the results are clear and smooth. But Pac-Land doesn’t have to scroll vertically, where the real smoothing challenge lies, with fast acceleration and deceleration when jumping and landing.

Pac-Land © 1984 Namco

position-locking

static-forward-focus

Shigeru Miyamoto

At this point I’d like to give a quick hat tip Shigeru Miyamoto and show some of his early works. His invaluable contribution to the industry, and attention to the smallest details of game design cannot be exaggerated.

In 1984 he started experimenting with scrolling, designing two games that used it in completely different ways. In both these games, the player has very little control of the scrolling, if any. It was more like a room with a shifting background.

Excitebike had a modern scrolling action, affected by the speed of the bike. Scrolling was smooth enough, but had no real effect on the game.

Devil World’s gameplay however had everything to do with scrolling. In this Pac-Man clone, you play as a Christian dragon fighting the devil, whose role was limited to changing the scrolling direction, pushing you closer to the edge. It’s also the only Miyamoto game that was denied release in North America due to the use of religious icons, but compared to the quality of his decades of work, it doesn’t seem like a huge loss. However, it is important, and even inspiring at times, to look at the early and often less successful work of modern day geniuses. Even the greatest artists experiment, and often fail.

Moving forward one year, it’s hard to exaggerate the brilliance of Super Mario Bros. The gameplay itself incorporates a pretty simple left-to-right, horizontal only approach. Also, it does not allow backtracking beyond the edge of the screen, which is a common platformer trait (technically it can be defined as a one-sided camera-window).

Super Mario Bros. © 1985 Nintendo

speedup-push-zone - when inside the push-zone, gradually accelerate the camera to catch up with player’s speed

camera-window*

* One-sided

static-forward-focus

So when Mario goes all the way back, then speeds up to cross the camera-window edge, it would move from 0 to full-speed in one frame, causing a major change in background speed and the inevitable discomfort that follows. The designers solved this by adding a virtual point, around 25% off-center, where the camera speeds up to catch up with Mario, so when he hits the edge, the camera speed would already be caught up.

Metroid was a groundbreaking game that helped coin a genre, combining platforming with exploration. (Its genre-brother Castlevania had a very basic position-locking camera, by the way.)

Metroid used a multi-axis progression, one at a time. It introduced a different way of easing the camera into motion by allowing the character to step out of the window span, while speeding up the camera to catch up. How far across that line the player ends up depends on how fast it hit that line, but the result is a smooth camera behavior.

Metroid © 1986 Nintendo

camera-window (horiz./vert.)

speedup-pull-zone - pull the camera to catch up with player’s speed after it crosses over window’s edge

The advancement of technology had a direct effect on camera systems, with more pixels and robust CPUs. It allowed the camera to move freely, without the low-resolution jitter that characterized the camera motion, especially in slow speed which could lead to one every few frames.

Donkey Kong Country had plenty of innovative camera solutions, and it was among the first to use lerp (Linear Interpolation) smoothing, allowing smooth enough jumps and forward-focus switch (more on that later).

Donkey Kong Country © 1994 Nintendo (Rare Ltd)

lerp-smoothing - continuously reduce the distance between camera and active player using Linear Interpolation

position-locking (vert.)

region-based-anchors

dual-forward-focus

Lerp-smoothing doesn’t sound like a major accomplishment and it’s become a standard tool in reducing jarring camera speeds, particularly jumps.

float lerp (float a, float b, float t) { return a + t * (b - a); }

This is probably the most effective and ubiquitous smoothing technique. It works well for for slow or fast moving characters like in Super Meat Boy. However for large characters moving extremely fast, it can easily hit the edges of screen before the camera can catch up, keeping incoming enemies hidden till the last minute.

Super Meat Boy © 2010 Team Meat

lerp-smoothing

position-locking

Never Alone is a beautiful game that came out in 2014, and has many different elements which we’ll cover later. Its main smoothing technique takes into account existing camera speed, which means that it moves into action slightly slower and can over overrun its target point. The result is smooth, organic though obviously less reactive to rapid player motion.

Never Alone © 2014 Upper One Games

physics-smoothing - camera is a physics enabled entity, constantly closing on the focus target

position-averaging

cinematic-paths

region-based-anchors

cue-focus

In code terms, if Lerp is EaseOut, then physics-smoothing is EaseInOut. Where available, check out the SmoothDamp method for details, or tailor your own implementation that takes into consideration the distance to the target as well as the current velocity.

If you’re simply using pixel-perfect shaders, you’ll see that sometimes your sprites seem to shift a pixel, compared to other sprites or to the background, due to math division inconsistencies.

Hyper Light Drifter uses a clever solution to enable smooth scrolling, even though it has a low-res pixel art. It pre-renders on a game-pixel-perfect canvas, and then shifts the canvas on a screen pixel-perfect to reflect the remainder of the position after the division by game-pixel size. This game also has a bunch of other interesting camera features which we’ll talk about later.

Hyper Light Drifter © [Release TBA] Heart Machine

physics-smoothing*

* Game canvas resolution is 480x270. Camera scrolling uses full resolution

region-based-anchors

target-focus

cue-focus

gesture-focus

auto-scroll is beyond the scope of this talk since, by definition, it provides no player control over the scrolling motion. However it gives us a good reference on where players would ideally like to be positioned, providing a good balance between threats coming ahead, and leaving some room for threats coming from behind.

Scramble © 1981 Konami

auto-scroll - player only has no control over the scrolling (but has full authority over its placement in the frame)

As we’ve seen in Pac-Land, if you tie the camera to the player and provide directional control, you can focus the camera ahead of the player. This provides plenty of room to look ahead, and still keep track of what’s behind - and also marks as a guideline on where to go, since we strive to aim to the center.

Pac-Land © 1984 Namco

position-locking

static-forward-focus - extra view space in the principal progression direction

Going back even further, and way ahead of its time, early 1981 saw the release of Defender, a shoot-em up which inspired an entire new genre. The way it presented a bidirectional forward focus, almost went under the radar. Defender always tries to focus the screen on an imaginary point in front of the spaceship, around 25% screen-width forward. This system works well for a fast paced game, where most enemies come from the front.

Defender © 1981 Williams Electronics

dual-forward-focus - player direction changes switch camera focus to enable wide forward view

Bonanza Bros. is a delightful side-scrolling heist game released for the arcades by Sega in 1990. It has a split screen feature for the unique one-on-one co-op mode where the two brothers work together to complete the heist.

Of course, a clear forward view is essential for a heist scenario so a dual forward view is enabled. However, it takes a few steps for the camera to catch up with the new target point, making this entire motion feel extra smooth while supplying plenty of space. The switch speed is around double of the player’s, which also means that the camera only moves when the player moves. Check out Red in the figure below.

Bonanza Bros. © 1990 Sega

dual-forward-focus*

* Focus switch is based on walking speed

The following camera trick from Super Mario World, is one of my favorite 2D camera techniques, with an overwhelming attention to the specific gameplay details of the game.

Super Mario World © 1990 Nintendo

region-based-anchors

platform-snapping* - camera snaps to the player only as it lands on a platform

camera-window* (vert.)

* Where applicable

dual-forward-focus*

* Threshold triggered

manual-control* (horiz.)

* Controller provides extra panning

Once again, there are two anchors allowing wide forward view in whatever direction the player chooses to go. However even as the player starts heading back (which happens constantly in SMW), the camera will keep the target point until Mario hits a predefined threshold, and only then will it lock to the other anchor. This is extremely helpful with SMW’s frequent left/right motion that does not warrant a direction change.

More recently, Cave Story uses dual-forward-focus to slowly move the focus point from side to side, based on the walking speed. A bit like what we’ve seen in Bonanza Bros, though in this case the camera moves towards the new anchor point at all times, but speeds up as the player moves.

Cave Story © 2004 Studio Pixel

position-locking (vert.)

dual-forward-focus

physics-smoothing

manual-control*

* Controller provides extra vertical panning

Jazz Jackrabbit 2 is a beautiful platformer from the early days of Epic Games. It had one truly unique camera element: it moved the camera away from the player based on controller input, both horizontally and vertically.

This is a perfect representation of what I call target-focus, where the players provide cues on where to shift the camera, based on their actual destination or target. When you walk left, you want to see more to the left. When the controller is released, focus is centered back on the player.

Jazz Jackrabbit 2 © 1998 Epic Games

lerp-smoothing (vert.)

target-focus - camera follows controller input to provide true visual forward focus

* Stick/cursor-keys push the focus point in the desired direction

[manual-control*]

* Manual vertical look is an extension of target-focus

target-focus can reflect an even more literal visual target, as seen in pointer controlled games. In Snapshot, you use the mouse to capture snapshots of elements in the scene and release them elsewhere to complete puzzles. The pointer essentially acts as an extension of your view, and the camera focus is the average position between the player and the pointer.

Snapshot © 2012 Retro Affect

target-focus*

* Average between player and pointer

lerp-smoothing

The Swapper has some very advanced camera techniques that we’ll touch later. With regard to target-focus, the cloning device’s target spot serves as a representation of the player’s view and makes a perfect visual focus. This works well for any game with individually targeted weapons or devices. Players can even walk backwards and still view ahead if they wish, which provides a versatile camera behavior, but also requires a secondary control for the camera.

The Swapper © 2013 Facepalm Games

target-focus

physics-smoothing

region-based-anchors

cue-focus

cinematic-paths

Secrets of Rætikon has plenty of interesting camera features, but in terms of basic framing, it uses projected-focus which is a simple extrapolation of the character’s position based on its current speed.

Note that this technique may not work well in platforms, especially vertically, where jumps and especially landing don’t extrapolate well.

Secrets of Rætikon © 2014 Broken Rules

projected-focus - camera follows the projected (extrapolated) position of the player

physics-smoothing

cue-focus*

* Position and zoom based on attractors

gesture-focus*

* Certain actions invoke preset camera behaviors, e.g. zoom-out when flying

cinematic-paths

Luftrausers incorporates some great camera features with a very interesting combination of focus on where the plane is pointing to (target-focus), where’s it’s actually heading (projected-focus), and some other cues such as the water, battleships and flying bullets that draw the focus while in proximity (cue-focus, see below).

Luftrausers © 2014 Vlambeer

target-focus / projected-focus

physics-smoothing

cue-focus

So far we’ve looked at how to provide the players with an accurate representation of their view and control, and in general, what the players want to see (Interaction, in our original diagram). We’ve also covered many different ways of making the view comfortable and effective (Comfort).

But as the directors of our game, we’d also like to set players’ attention on what’s we know is important for them to see, for reasons of context, progression and even drama and narrative.

Wonder Boy, another one of my favorites, is a high speed platformer, allowing forward progression only using good old ones-sided camera-window. Unlike Super Mario Bros., it has no speedup zone to curb camera acceleration, but it introduces another interesting camera technique which I call camera-path. The camera will be placed and moved to provide foreshadowing of upcoming challenges.

Wonder Boy © 1986 Sega

camera-path - predefined progression path throughout the level

camera-window*

* One-sided

static-forward-focus

The 5th generation of consoles, with Playstation and N64 among others, opened up new capabilities backed up by better hardware and the inception of true 3D gaming. 3D camera techniques is a fascinating and huge subject in its own merit, but 3D support had a vast influence on 2D gaming as well. Designers could make use of zooming, tiling and even combine 2D and 3D in what we call now 2.5D, where the game takes place on a 2D plane, in a 3D world.

Playstation’s Klonoa is one of those games. The player has basic 2D controls, but the game takes place in an elaborate 3D world. Klonoa follows a 3D camera-path that provides direction and attention to gameplay and narrative details. that path provides positioning, tilting and zooming throughout all levels, and actually serves as a hint path on which forward focus and jumps can be applied.

Klonoa: Door to Phantomile © 1997 Namco

camera-path*

* Path hint, actually. Includes zooming and tilting.

camera-window (vert.)

lerp-smoothing

dual-forward-focus

This type of control gives a rich set of tools to enable foreshadowing, surprise or even alarm in our games. When the camera in Klonoa zooms out to show the boss, it is clear what you need to do next.

Donkey Kong Country introduced some interesting characteristics which became standard in platformers: provide level designer with tools to change the camera behavior according to the content of the individual level, and even the individual region within level. Faster, runner style regions require a wide forward view at the expense of seeing what’s behind. Some exploratory regions require a wider view on both sides.

Donkey Kong Country © 1994 Nintendo (Rare Ltd)

lerp-smoothing

position-locking (vert.)

region-based-anchors - different regions (even within levels) set different anchors for position and focus

dual-forward-focus

As we’ve seen with Klonoa, the technology that allows presentation of 3D environments can be used to provide various direction tools, such as the use of zoom/dolly. Zoom is the act of changing the field-of-view angle (FOV), and Dolly is the film term for moving the camera forward or backward in relation to the target. They both achieve a similar goal of reframing the scene, albeit with a completely different approach, with dolly providing a strong physical presence (where applicable). More information on the difference between dolly and zoom can be acquired in film sites and databases. However for the sake of simplicity we’ll refer to both techniques as zoom-to-fit.

In Yoshi’s Story for example, the scene is framed around the Yoshi, the boss and the pillar, highlighting all the elements that require player’s attention: the target and the end of the field. The camera not only centers around these elements, it even zooms out (dollies out, actually) to provide the necessary focus.

Yoshi’s Story © 1997 Nintendo (N64)

zoom-to-fit - change zoom or move forward/back to provide a close-up view of relevant elements

dual-forward-focus

camera-window (vert.)

platform-snapping

manual-control

Insanely Twisted Shadow Planet has a very influential camera system which takes into account the player’s speed (projected-focus), your target (target-focus), and most importantly is among the first to use attractors to help setting players’ attention to external cues. Check out ITSP’s blog post for more information on this outstanding camera system.

Insanely Twisted Shadow Planet © 2011
Shadow Planet Productions

Footage taken from Shadow Planet Productions Blog: ITSP Camera Explained

cue-focus* - focus is influenced by game world cues (e.g. attractors)

* Position and Zoom based on Double-Ring Attractors for various cues such as enemies and checkpoints

projected-focus

target-focus

physics-smoothing

ITSP uses double-ring attractor cues around various game cues such as checkpoints and enemies. The outer ring gradually shifts the camera focus towards the cue, using weighted average. When inside the inner ring, the position of the ship is completely ignored, and the camera focuses solely on the cue. Different cues have different rings, and those can overlap, which allows a smooth shift between different attractors.

There are different ways of attracting attention to game cues, but a Ring Attractors is a robust way of providing attention to gameplay elements that require it. This could also be used for the opposite reason: driving attention away from gameplay elements using Detractors that repel the camera away. This could be useful when trying to provide a sense of suspense and secrecy as to hidden elements.

Aether is a beautiful Flash game made in 2008 by Edmund McMillen and Tyler Glaiel, and it introduces a unique approach to cueing: it spins the world to indicate proximity to a planet, which communicates a sense of safety and guidance, where downwards inevitably leads to the ground. As you fly through space and get caught in a gravity field, the screen will start turning toward that gravity element.

Aether © 2008 Armor Games
(Edmund McMillen, Tyler Glaiel)

cue-focus*

* Camera orientation shifts with gravity

position-locking

lerp-smoothing

No discussion on camera systems would be complete without talking about Limbo. By manipulating exposure, positioning and zooming, it creates a truly unique ambience. In Limbo, every region has unique characteristics, anchoring the positioning to a certain spot on the screen, and allowing certain objects to provide further camera cues, e.g. attractor objects on enemies.

Limbo © 2010 Playdead

region-based-anchors*

* Zoom, position (and exposure)

position-locking*

* Changes per region

cue-focus*

* Certain actions trigger cues, e.g. enemy attacks, etc.

physics-smoothing

Another simple yet effective approach is using region-focus, as used in Geometry Wars. It combines the position of the ship with the center of the field. This means that the screen is always in motion, the direction as the ship’s, at half the speed. Players always know where they are in the field by implicitly observing the offset from the center. This system work perfectly with enclosed, limited play fields, especially when threats are more likely to congregate in the center.

Geometry Wars © 2003 Bizarre Creations

region-focus* - focus on a region anchor (e.g. center of play field), combined with the player’s position

* Camera position is the average of the ship and the center of the field

Vessel is a classic puzzle game where the player is required to notice many different elements in order to solve its liquid based puzzles, so camera regions even more significant. Just like in Geometry Wars, Strange Loop solved it by giving more emphasis to the regions, keeping the camera almost stationary while working on a puzzle. This is a modern interpretation of the old room-based puzzle games, but in Vessel the idea of room is much more flexible, with different sizes and characteristics.

Vessel © 2012 Strange Loop Games

region-focus*

* Camera position is based mostly on region anchor point, but shifts slightly as the player moves

region-based-anchors*

* Different regions provide different anchor positions and zoom factors

cue-focus

physics-smoothing

cinematic-paths

One of the most clever ideas in Vessel is that even when confined to a region, the camera still follows the player with minor movements. This provides a strong sense of control, even in a confined area. Furthermore, as the player solves the puzzle and leaves the region, the camera is already in motion which minimizes the jarring camera acceleration as it shift to the next region.

Another way to use the camera to provide attention and drama is by using players’ behaviors to trigger predefined camera gestures. Tomba is an interesting game, from the first crop of 2.5D Playstation games. The camera here usually maintains the straight shooting angle, but it shifts into different angles when the player performs certain actions, like climbing or moving between depths. A unique sense of control is achieved when the camera shifts behind the player, while also providing a better view of what’s ahead.

Tomba! © 1997 Whoopee Camp

gesture-focus* - gameplay triggered camera gestures

* Camera shifts to positions reflecting gestures and states

dual-forward-focus (horiz.)

platform-snapping

camera-window (vert.)

Gameplay triggered gestures can be used in different ways - various motion types and axes, reactive, predictive and so on. I believe that we’re still scratching the surface when it comes to the relationship between player driven actions and subsequent camera behavior.

A great example of the potential of gesture-focus can be found in Aztez, an upcoming fighting game. It uses different camera gestures such as zooming (moving forward and backward) or tilting, to add drama and context to certain fighting events such close encounters and final blows.

Aztez © [Release TBA] Team Colorblind

gesture-focus*

* Zooming (move forward/back) and tilting triggered by gameplay actions

position-locking (vert.)

lerp-smoothing

zoom-to-fit

In Sega’s classic brawler Streets of Rage, the camera mostly follows the action using the one-sided camera-window, a standard brawler behavior. However, from time to time, the camera would step out-of-screen (or rather, away from the player) to provide an a

Show more