informa
Featured Blog

Scroll Back: The Theory and Practice of Cameras in Side-Scrollers

This post discusses the background and evolution of camera use in 2D games. It provides numerous examples from the classic coin-ops to contemporary indie games, and offers techniques, terminology and practical solutions applicable in your own game.

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 Untamecreator of upcoming game Mushroom 11

 

Table of Contents

 

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

Overview

  

 

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

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.

Neural Background

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.

Attention, Interaction and Comfort

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

 

image

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)

Scrolling Nostalgia

 

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.

Follow The Action
Keep attention on your control subject

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

 

Curb Camera Motion
Avoid unnecessary or unpredictable bumps

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.

 

Snapping
Fix camera drift within window

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.)

 

 

 

Smoothing
Avoid sudden camera speed and direction changes

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 © 1984 Nintendo

 

Devil World © 1984 Nintendo
(denied release in North America)

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

Latest Jobs

Sucker Punch Productions

Bellevue, Washington
08.27.21
Combat Designer

Xbox Graphics

Redmond, Washington
08.27.21
Senior Software Engineer: GPU Compilers

Insomniac Games

Burbank, California
08.27.21
Systems Designer

Deep Silver Volition

Champaign, Illinois
08.27.21
Senior Environment Artist
More Jobs   

CONNECT WITH US

Register for a
Subscribe to
Follow us

Game Developer Account

Game Developer Newsletter

@gamedevdotcom

Register for a

Game Developer Account

Gain full access to resources (events, white paper, webinars, reports, etc)
Single sign-on to all Informa products

Register
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more