May the scrolling be with you: theory and practice on the camera in platformers [2/2]

Original author: Itay Keren / Itay Keren
  • Transfer
  • Tutorial
The first part

From the translator. OlegKozlov talked about the camera tricks in his game “Squash”. Due to the large amount of traffic and the not-so-valid JS, the anchor throws anywhere, just not for comment, so I'll make a copy here.
What has been done in Uncanness ...
1. Упреждение по движению: точка привязки камеры вынесена вперёд от центра червя, причём чем быстрее он ползёт, там дальше она выносится.
2. Упреждение по управлению: когда игрок начинает сжимать червя для прыжка, то вынос точки привязки камеры ещё усиливается заранее передвигая камеру в ту область, куда червь сейчас прыгнет.
3. Линейное сглаживание — камера плавно стремится к точке своей привязки, тем быстрее, чем больше разница между фактическим положением камеры (центра экрана) и точкой её привязки.
4. Плюс масштаб всего происходящего завязан на размер червя, когда червь увеличивается, то камера «отъезжает». Причём делает это тремя-четыремя ступенчатыми переключениями, чтобы игрок ощущал, что его червь вырос. Если делать плавно, то рост и изменение масштабов игры нивелируются и не приносят удовольствия.
5. Упор в край. Камера «упирается» в края уровня, становясь более статичной и позволяя голове червя сильно смешаться от центра экрана, буквально упираться головой в его край.
image

Well, about the obsession and comfort. It was hard to translate and even harder to read, the animation in the peripheral vision was very in the way, and the pages loaded with the animation turned on the “red”. And I'm sorry that for the day I threw the first part under lock and key.

Direction


We show you where to go, whether the goal is close and what’s important next.

We have already examined how to make the player’s field of view correspond to the control, and how to show what the player wants to see — this is our interaction in our triangle. We also highlighted many ways to make scrolling unobtrusive but effective (comfort). Now, as the directors of the game, let's try to draw the attention of the public to what we ourselves want to show her - either for the sake of context, or to emphasize the course of the game, or for the sake of drama and plot.

Wonder Boy , another of my favorites, is a fast platformer in which you can only go forward through the good old one-way free-wheeling window. In contrast, Super Mario Bros., there’s no acceleration zone that smoothly accelerates the camera, but there is another interesting technique that I call “rails”. The camera is positioned and moved so as to anticipate future obstacles.

Wonder Boy (Sega, 1986)
Rails : programmed camera
path Freewheel (single side)
Static lead

The fifth generation of consoles, including the PlayStation and Nintendo 64, has opened up new hardware capabilities, laying the foundation for rude, but real 3D. Three-dimensional camera techniques are an exciting and multifaceted theme in their own right, but 3D support has affected two-dimensional games. Developers can now zoom in on the camera, tilt the view and even combine 2D and 3D - what we now call 2.5D when the game is on a two-dimensional plane, but in a three-dimensional world.

One such game is Klonoa for the PlayStation. Management there is the usual two-dimensional, but it happens in a well-developed three-dimensional world. The camera follows a three-dimensional route that leads us through the game, drawing attention to the game and plot details. This route includes not only the position of the camera, but also the angle of shooting with scale. But the route is not tough: the camera can pre-empt the player’s movement and respond to jumps.

Klonoa: Door to Phantomile (Namco, 1997)
Rails (non-rigid, including scale and angle of shooting)
Freewheel zone (vertical)
Linear smoothing
Double lead

Such a camera gave developers a rich toolkit that allows you to anticipate, surprise or alarm. As soon as the camera in Klonoa moves off to show the boss, it is clear what to do next.

Donkey Kong Country proposed several interesting concepts that later became the standard: the developers received tools to change the camera’s behavior from level to level (and even in individual parts of the level). The areas where you need to run without looking back gave a far view ahead. And where it is necessary to examine, the review is approximately equal in both directions.


Donkey Kong Country (Rare Ltd / Nintendo, 1994)
Linear anti-aliasing
Tied camera (vertical)
Geographical view : different levels or parts of levels adjust the camera in its own way
Double lead

As we see in Klonoa , three-dimensional landscapes give us cinematic tools, and among them - zoom and zoom. Zoom is a change in angle of view (FOV), and zoom-in is the physical movement of the camera back and forth, to or from the target. They have a common task, to change the frame, but the approach is different; Hitting gives the best effect of presence. How zoom differs from zoom - read websites and databases on cinema; for simplicity, we will call both the “zoom". Specifically, “zoom at all.”

For example, in Yoshi's Story, the frame is built around Yoshi, the boss and the column - after all, the player needs a goal and a field edge. The camera not only points to these elements, but also adjusts the scale (zoom-in-out) to fit everything in the frame.

Yoshi's Story (version for N64; Nintendo, 1997)
Zoom at all : zoom or zoom out to fit everything in the frame.
Double lead
Free-wheeling window (vertical)
Platform return
Manual control

The Insanely Twisted Shadow Planet has a well- designed camera that takes into account the speed of the player (lead in movement), your goal (lead in control), and one of the first to use attractors that direct the player's attention to certain objects. Read more about this outstanding camera on the ITSP blog .

Insanely Twisted Shadow Planet (Shadow Planet Productions, 2011)
View on the object : the angle is determined by the objects of the game world - for example, attractors (the position and zoom are set by a ring attractor installed around enemies and control points).
Motion
Alert Management
Alert Physical Smoothing

ITSP uses a ring attractor mounted around enemies and control points. As soon as the player enters the outer radius, the camera begins to move according to the law of the weighted average. In the inner radius, the position of the player is not taken into account at all, the camera looks at the point. Different objects have different rings, they can overlap, giving a smooth movement from the attractor to the attractor.

There are many ways to draw attention to the details of the game, but the ring is one of the most reliable. There are also possible “repellents” of the camera that move it away from the object: let's say that there is a sense of expectation and secrecy - or just to make a hidden element.

Aether - A beautiful Flash-game made in 2008 by Edmund Macmillen and Tyler Glayel, and there is a peculiar approach to the angle. Near the planet, the screen rotates, which means a safe zone, in addition, the gravity is always directed down. You fly through space, fall into a gravitational field, and the screen begins to turn to the source of gravity.

Aether (Edmund McMillen, Tyler Glaiel / Armor Games, 2008)
View on the subject (the camera rotates in the direction of gravity) The
attached camera
Linear smoothing

A discussion of a game camera would not be complete without Limbo . To create an unusual atmosphere, brightness, position and zoom are varied here. In Limbo , each part of the level has its own characteristics: the camera is tied to a certain point on the screen, and various objects pull it towards you.

Limbo (Playdead, 2010)
Geographical angle (zoom, anchor point and brightness) An
attached camera (the anchor point changes) An
angle to the object (some events, such as attacks by enemies, tighten the camera)
Physical smoothing

Another simple but effective technique is the view of the region, as in Geometry Wars . It combines the position of the ship with the center of the field. Therefore, the screen is constantly moving with the ship at a speed half that. The player always implicitly knows where he is on the field, by shifting the screen. This works great with a small enclosed field, especially when threats usually come from the center.

Geometry Wars (Bizarre Creations, 2003)
View on the region : the camera looks at a certain point (for example, the center of the field) combined with the position of the player (in this case, the arithmetic mean of both)

Vessel  - a classic puzzle game where the player must notice different elements, solving problems associated with the liquid. Therefore, the camera angle is very important. As in Geometry Wars , Strange Loop solved the problem by pointing the camera at the region - only this time it almost does not move while the player is working on a puzzle. Here is a modern interpretation of the old "room" puzzles - only in the Vessel the room can be of different sizes and with different characteristics.

Vessel (Strange Loop Games, 2012)
View on the region (the camera looks at the point, but walks slightly with the player)
Geographical view (different anchor points and zoom in different areas)
View on the object
Physical smoothing
Cinematic rails

Vessel developers came up with a clever idea: although the camera looks at the region, it slightly follows the player. This gives a strong sense of control, even in tight spaces. And when the player solves the puzzle and leaves the region, the camera is already moving, and there is no need to accelerate it with a jerk to aim at another region.

Another way to demonstrate camera attention and drama is to perform programmed camera gestures based on the player’s actions. Tomba  is an interesting game from the first crop of pseudo-three-dimensional games for PlayStaton. The camera usually shoots directly, but if a player climbs from floor to floor, it takes a different position. An amazing sense of control is achieved by the fact that the camera flies behind your back, showing what lies ahead.

Tomba! (Whoopee Camp, 1997)
Camera gestures : according to a game event, the camera executes a programmed movement
(the angle changes depending on the character’s state)
Double lead (horizontal)
Platform return
Freewheel window (vertical)

Gestures for gameplay events are different: movements along different axes and trajectories, reacting, anticipating, and so on. I am sure that we have just begun to explore how to connect player actions and camera behavior.

A good example showing the potential in gameplay gestures is Aztez , the upcoming fighting game. Depending on the rapprochement between the fighters and the super-blows, she changes the angle of shooting and bumps in and out, emphasizing the blows and adding drama.

Aztez (Team Colorblind, expected)
Camera gestures : zoom in and out and change the shooting angle depending on the game actions.
Camera tied (vertically)
Linear smoothing
Zoom at all

In Streets of Rage , the classic Sega beat, the camera stupidly follows the action with the simplest one-sided window, as is usual in beatings. But from time to time she leaves the screen and instead of the player shows something that clarifies the plot and escalates the drama.

Streets of Rage (Sega, 1991)
Cinematic rails : the camera pauses its normal behavior and removes something important in the plot hidden behind the screen.
Geographical view
Freewheel window (one-sided, only between contractions - the usual behavior of beaters)

This is a very powerful system, giving developers the opportunity to make a cinematic stop, without departing from the gaming context. It’s like a video insert without video and without insertion.

The Behemoth made extensive use of movie rails in Alien Hominid and Castle Crashers . Many times the game paused and drove off to the boss or plot element. This performs two tasks - introduces the plot and shows where to strive - and at the same time does not distract attention from the game.

Alien Hominid (The Behemoth, 2004)
Geographical perspective
Cinematic rails
Freewheel window (one-sided, only between contractions - the usual behavior of beaters)


Two in the chamber, not counting the dog


How to focus on multiple objects

Even one goal in the frame is not so simple. But what if there are several players (or goals)?

Gauntlet was an innovative dungeon sweep game, a very advanced game for its time. When there are several players on the screen, she simply held the camera in their middle position. As soon as someone runs away (or falls behind) on the whole screen, no one can move. And if someone leaves the joystick, everyone is stuck - because no one will cross (and not push away) the edge of the screen.

Gauntlet (Atari Games, 1985)
Average position : the camera aims at the average of all targets

The same technique in Samurai Gunn , but taken to extremes to emphasize the plague environment. This is especially emphasized by frequent stops and blackouts. As for the camera, since players constantly resurrect and teleport, the middle position moves off, quickly changing its angle. Even there is no usual emphasis in the region; the camera can go beyond the edge of the level. This fits well with the atmosphere, but is inconvenient for an outside viewer. And when it comes to control, the player can even take the character off the screen if necessary, and no one interferes with this.

Samurai Gunn (Teknopants, 2013)
The average position
Linear smoothing
No emphasis on the edge (to achieve a plague atmosphere, even this was abandoned, so the screen is constantly in motion)

A different approach can be found in the good old Street Fighter , in all franchise games. There is a horizontal free-wheel window, so most of the battle the camera is in place. As with any free play, a player leaning against the edge of the window also pulls the camera. When the camera moves, it can pull other players along with it, so that’s all on the screen. The camera (and players) get stuck if both pull the window in opposite directions.

Street Fighter (Capcom, 1987)
Freewheel window (horizontal, leaning against the edge of the window, pulls a camera behind it, which carries the rest of the characters)

Other franchise, say a new word in the collective game, - the Super Smash Bros . Already in the first game there was an outstanding work with the camera. Super Smash Bros. looks at the average for all players, and takes the camera back when the distance between them grows.

Super Smash Bros. (HAL Laboratory / Nintendo, 1999)
Zoom at all
Averaged position (technically the camera tends to it)
Linear smoothing

And today this system works: for example, in ROCKETSROCKETSROCKETS it is used for a double purpose: to fit everything in one frame, and to direct the players to the center, punishing if they do not get into close combat.

ROCKETSROCKETSROCKETS (Radial Games, 2014)
Zoom at all
Average position

As shown in Never Alone , you can average positions for as many actors as you like, in a single or network, possibly with different weights for averaging.

Never Alone (Upper One Games, 2014)
Physical smoothing
Average position
Cinematic rails
Geographic view Object perspective


In Spelunky different approach to conflict positions: the camera is looking for only one. When he dies, the torch (white flag) moves on to another. This becomes an element of gameplay: for everyone behind the screen, a timer is ticking.

Spelunky (Derek Yu / Mossmouth, 2008–2012)
Snap camera
Linear smoothing
Manual control (↑ ↓ buttons)


Manual control


Let the player control his eyes

Sometimes the developer needs to give additional visual information on the choice of the player. One way to solve this is to give the player control of the camera.

Again, Super Mario World was one of the first with additional camera controls. Side buttons push the camera in the right direction. This may be a clever idea, but it is often criticized as useless: it is rare when players notice this feature.

Super Mario World (Nintendo, 1990)
Geographical perspective
Platform return
Freewheel window (vertical, rarely triggered)
Double anticipation (turns on by threshold)
Manual control (horizontal, with additional remote control buttons)

In general, the problem of manual control in SMW is intuitiveness. The standard control for walking does not give any connection with the side buttons.

A good example of intuitive camera controls is in Osmos . Not like a typical platformer, of course, but Osmos uses a more subtle way. A mouse wheel on the computer and a pinch on the tablet - this is a good link between management and action.

Osmos (Hemisphere Games, 2009)

Handheld camera Manual control (touch pinch and mouse wheel zoom)

We have already seen that in Jazz Jackrabbit 2 additional buttons for vertical scrolling completely repeat the horizontal ones, and therefore behave clearly and predictably.

Jazz Jackrabbit 2 (Epic Games, 1998)
Linear smoothing (vertical)
Proactive management : the camera selects the anticipation depending on the control status (in this case, the arrow keys)
[manual control] (as a special case of proactive management)

If you need to manually expand the field of view, it is better to use the same buttons that are already there, as in Spelunky , where the up and down buttons are also responsible for viewing up and down.

Spelunky (Derek Yu / Mossmouth, 2008–2012)
Snap camera
Linear smoothing
Manual control (↑ ↓ buttons)


Camera shaking


All control is gone!

As we have already seen in our study, if the camera is controlled clearly and beautifully, unity begins to be felt between the player and the screen world. The converse is also true: if the camera starts to walk on its own - for example, to shake - this is a strong dramatic technique, demonstrating: it is stronger than the player himself.

I tried to find out who first shook the screen. And he was not surprised when he came to another Miyamoto game, 1983 - Mario Bros. The screen does not shake in all versions, most likely due to burning deadlines or technical limitations.

image
Mario bros (Nintendo, 1983) A

shaking screen (and pausing the game, resulting in the same effect) was practiced in many, many games, and in almost all Vlambeer games.JW, a designer from Vlambeer, talks about this in detail .

image
Super Crate Box (Vlambeer, 2010)

Own camera



Of all the “patches” we will assemble the camera specifically for our needs.

image

You have already put a lot of effort and attention into the game, drawing every detail. The camera, like any other element of the game, also deserves attention. Before you set up the simplest tethered camera, try to describe how the camera should behave in the game.

Here are some simple rules that served me by faith when I wrote my game, and ultimately led to this research.

  • Find the originality of your game.
  • See how other games solved your problems.
  • Improve these solutions.


This is not limited to working with the camera. This applies to all facets of your game: graphics, audio, engine, and so on.

Here is a great example of fitting the camera to the gameplay. The Legend of Kage (Taito) was one of the first biaxial platformers. (An interesting fact: and one of the first, if not the only one, with movement from right to left.) Look at the horizontal free-wheeling window. Many grand battles take place on trees, and the width of the window exactly matches the thickness of the trunk so that the camera does not twitch in battle.

The Legend of Kage (Taito, 1985)
Snap-in camera (vertical)
Freewheeling window (horizontal, matches the thickness of the tree)

Another good example of fitting systems to your gameplay is in Shinobi . With his high jumps, a high freewheeling window was required, almost the entire screen. So that the camera does not go far, it slowly returns to its original position.

Shinobi (Sega, 1987)
Camera return (vertical)
Freewheel window (vertical)
Linked camera (horizontal)
Static lead

Sonic the Hedgehog , a fast platformer with movement on both axes. The narrow window is made so that Sonic is always in the center, because you always need to see what is approaching in front. The window is vertically higher so that small jumps do not move the window. In contrast, the platform return restores vertical alignment as soon as Sonic stands on the platform.

When Sonic strikes at speed to the edge, especially in the “dead loop” or in a prolonged fall, he gets a hefty breakthrough. To reduce it, the window was made low and narrow - then the speed is unlikely to be high.

Sonic the Hedgehog (Sega, 1991)
Platform alignment
Freewheeling window
Static lead
Antenna control

When you need to look far ahead, and the movement can be in both directions, the natural choice is double lead. There are several ways to drag a camera to a new anchor point. Cave Story brilliantly resolved this issue by dynamically changing camera speed depending on the player’s speed (i.e. base speed plus player’s speed). At Bonanza Bros. another approach: the camera moves when the player moves, which works to play a robbery, but not at all - for an enemy-saturated platformer like Cave Story .

Cave Story (Studio Pixel, 2004)
Snap camera (vertical)
Double lead
Physical smoothing
Manual control (vertical)

And in Fez you are not swarmed by hordes of enemies, so a simple free-wheeling window makes sense. Developer Fez cleverly wrote the classic technique in a unique design. Since the reference point for the measurement reversal is the closest angle, it can be assumed that the space at the back is more important than the space at the front. During a U-turn, the camera flips so that Gomez is further away from the edge of the screen.

Fez (Polytron, 2012)
Freewheel window (horizontally, saved when the measurement is
rotated ) Tethered camera (vertically)
Linear smoothing
Geographic view
Manual control (right lever)

The Vessel approach is a great puzzle solution with one puzzle per room. Therefore, the camera looks at the room, choosing the position and zoom so that everything is visible to the player. She stands stiffly, shifting a little when the player walks: this improves the sense of control and slightly accelerates the camera before the hero moves to another region. Together comes a good combination of a predefined frame and responsive control.

Vessel (Strange Loop Games, 2012)
View on the region (the camera looks at the point, but walks slightly with the player)
Geographical view (different anchor points and zoom in different areas)
View on the object
Physical smoothing
Cinematic rails

As we have seen, The Swapper has a strong plot and a unique atmosphere. We achieved all this by simply manipulating the camera along the programmed rails. This adds cinematography, but does not disorient, like a regular video insert.

The Swapper (Facepalm Games, 2013)
Management
Alert Physical Smoothing
Geographical View
Object
View Cinematic Rails


Mushroom 11


What decisions did I make?

image

In Mushroom 11, a thoroughly designed camera based on “regions”. Each level is made up of dozens of such regions, and each region has its own rectangular “corridor” restricting camera movement, and its own zoom level.

Mushroom 11 (Untame, expected)
>>> Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Average position;
static lead
view of the object (in different regions differently)
Ahead on the movement
Physical smoothing (coefficients depend on speed)

The regions are numbered in order, and the piece of mushroom that is in the region with the highest number controls the camera. As soon as any piece, even one cell, gets into the next region, the camera begins to follow this piece.

Mushroom 11 (Untame, expected)
>>> Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Average position;
static lead
view of the object (in different regions differently)
Ahead on the movement
Physical smoothing (coefficients depend on speed)

All cells that are missing from view die, so the camera must be accurate, because a lot is at stake. Example above: the player is given enough space to build a solution, and as soon as the mushroom crawls to a new region, the camera quickly flies there. And the edge of the screen will not destroy any important cells.

Regions are of two types: averaging and progressing. It depends on where the camera is aiming. As soon as the sight point has been determined, the camera flies there, while remaining in the rectangular “corridor” of the region.

Averaging region

If you want the player to control several colonies of cells, or if there is no clear direction of movement, the region is declared averaging. It averages the positions of all cells, so that the camera aims at the largest piece of the fungus. Also, this mechanism is suitable for enclosed rooms with puzzles, where all the pieces are next to each other (otherwise, some would die by going out of the screen).

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
>>> Average position;
static lead
view of the object (in different regions differently)
Ahead on the movement
Physical smoothing (coefficients depend on speed)


Progressive region

Regions with a linear arrangement focus on the fungus that has gone farthest. This is determined by the pre-established direction of movement in the region - and lagging mushrooms are ignored. At the same time, static anticipation is added, which combines well with such regions.

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Average position;
>>> static lead;
view of the object (in different regions differently)
Ahead on the movement
Physical smoothing (coefficients depend on speed)


Sightseeing

In each of the regions, the view of the object can be used. If there is a mushroom in this region, some objects and creatures attract the camera, guided by a programmed or dynamic coefficient. The obvious candidates for this approach are the bosses.

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Average position;
static lead
>>> view of the object (in different regions in different ways)
Anticipation of movement
Physical smoothing (coefficients depend on speed)


Smoothing

Smoothing is achieved by a combination of motion anticipation and physical smoothing. The smoothing coefficient depends on the speed of the fungus: when it moves fast, the camera is accurate and sharp, when the user carefully cuts the fungus - it slowly creeps.

There are no jumps in the game, so it’s natural to apply preemptive movement. The camera aims to where the mushroom (or the average of several mushrooms) will be in a split second, giving accurate behavior and anticipating the future environment.

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Average position;
static lead
view of the object (differently in different regions)
>>> Anticipation of movement
>>> Physical smoothing (coefficients depend on speed)

With this behavior, the camera perfectly fulfills many pieces with different sizes and speeds, which are constantly expanding and moving rapidly from region to region.

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Average position;
static lead
view of the object (differently in different regions)
>>> Anticipation of movement
>>> Physical smoothing (coefficients depend on speed)


Vocabulary



Auto -scrolling: the player does not control the scrolling in any way, but has every right to determine where he should be in the frame.
Camera return : constantly reduce the “pull” of the camera, pulling it towards the player.
Geographical perspective : different levels or parts of levels adjust the camera in its own way.
Double lead : when a player changes direction, the camera changes its angle and looks forward.
Camera gestures : on a game event, the camera executes a programmed movement.
Zoom at all : zoom or zoom out to fit everything in the frame.
Cinematic rails : the camera pauses its normal behavior and removes something important in the plot hidden behind the screen.
Linear smoothing: Continuously reduce the distance between the camera and the player using the linear interpolation formula.
Freewheel : move the camera as soon as the player hits the edge of the window.
Platform Return : The camera returns to the player as soon as he lands on the platform.
An attached camera : the camera always looks at the hero.
View on the object : the angle is determined by the objects of the game world - for example, attractors.
View on the region : the camera looks at a certain point, combined with the position of the player.
Rails : programmed camera route.
Static lead : more space for viewing in the main direction.
Acceleration push zone: when the character is in the zone, gradually accelerate the camera until it equals the character’s speed.
Pulling acceleration zone : as soon as the player crosses the border of the window, we accelerate the camera until it equals the speed of the character.
Focus on the edge : a hard edge is set, beyond which the camera cannot go.
Movement Alert : The camera chases the player’s future (extrapolated) position.
Management Alert : The camera selects a lead based on the control status.
Average position : the camera aims at the average of all targets.
Physical Smoothing : A camera is a physical body that constantly flies to a target point.

Also popular now: