📜 ⬆️ ⬇️

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

First part

From the translator. OlegKozlov told about the camera receptions in his game “Unload”. Because of the large amount of traffic and the not-so-valid JS, the anchor is being sent anywhere, just not for a comment, so I’ll make a copy here.
What has been done in "Nesyti" ...
1. Anticipation of the movement: the camera's reference point is moved forward from the center of the worm, and the faster it crawls, the further it is taken out.
2. Control advance: when a player begins to compress a worm for a jump, the removal of the camera's reference point is further enhanced by moving the camera to the area where the worm now jumps.
3. Linear smoothing - the camera smoothly tends to its point of attachment, the faster, the greater the difference between the actual position of the camera (center of the screen) and its point of attachment.
4. Plus, the scale of everything that happens is tied to the size of the worm, when the worm grows larger, the camera “moves off”. Moreover, it does this in three-four-step switchings so that the player feels that his worm has grown. If you do it smoothly, then the growth and change in the scale of the game are leveled and do not bring pleasure.
5. Focus to the edge. The camera “rests” against the edges of the level, becoming more static and allowing the worm’s head to greatly mix from the center of the screen, literally to rest its head on its edge.
image

Well, about obsession and comfort. It was hard to translate and even harder to read, the animation in the peripheral vision was very disturbing, and the pages loaded with animation made the “redhead” page out. And I'm sorry that I threw the first part of the castle for a day.

Direction


We suggest where to go, whether the goal is close and what is near important
')
We have already considered how to make the player's field of vision consistent with the management, and how to show what the player wants to see - in our triangle this interaction. We also covered many ways to make scrolling unobtrusive, but effective (comfort). Now, as the game directors, we will 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 flow of the game, or for the sake of drama and plot.

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

Wonder Boy (Sega, 1986)
Rails : programmed camera route
Freewheel (one-way)
Static lead

The fifth generation of consoles, among them the PlayStation and Nintendo 64, opened up new hardware capabilities, putting the beginning to a rough, but true 3D. Three-dimensional camera techniques are in themselves an exciting and multifaceted topic, but 3D support has also influenced 2D 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 played on a two-dimensional plane, but in a 3D world.

One of these games is Klonoa for the PlayStation. The control there is usual two-dimensional, but it happens in a developed three-dimensional world. The camera goes along a three-dimensional route that leads us through the game, drawing attention to the game and plot details. This route includes not only the camera position, but also the angle of shooting with the scale. But the route is not hard: the camera can preempt the player’s movement and react to jumps.

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

This camera gave developers a rich toolbox that allows you to anticipate, surprise or alarm. As soon as the camera in Klonoa drives off to show the boss, it’s clear what to do next.

Donkey Kong Country offered several interesting concepts that later became the standard: developers got the tools to change the camera behavior from level to level (and even in parts of the level). Sites where it is necessary to run without looking back, gave a distant 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 smoothing
Tethered camera (vertical)
Geographical perspective : different levels or parts of levels set up the camera in their own way
Double lead

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

For example, in Yoshi's Story, the frame is built around Yoshi, the boss and the columns - after all, the player needs a goal and the edge of the field. The camera not only guides these elements, but also adjusts the scale (by zooming in and out) so that everything fits into the frame.

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

Insanely Twisted Shadow Planet has a sophisticated camera that takes into account the player’s speed (movement ahead), your goal (management advance ), and one of the first to use attractors that directed 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 of the object : the angle is determined by the objects of the game world - for example, attractors (position and zoom is given by a ring attractor installed around enemies and control points).
Motion lead
Management lead
Physical smoothing

ITSP uses a ring attractor installed 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 generally not taken into account, 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 “repulsers” of the camera, diverting it from the object: for example, to have a sense of expectation and mystery - or just to make a hidden element.

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

Aether (Edmund McMillen, Tyler Glaiel / Armor Games, 2008)
Perspective on the object (the camera turns in the direction of gravity)
Tied camera
Linear smoothing

Discussion of the game camera would be incomplete 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 specific point on the screen, and various objects pull it towards themselves.

Limbo (Playdead, 2010)
Geographical perspective (zoom, anchor point and brightness)
Tied Camera (anchor point is changing)
Perspective on the object (some events, for example, attacks of enemies, tighten the camera)
Physical smoothing

Another simple, but effective technique is a perspective on 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 along with the ship at a speed of half the speed. The player always implicitly knows where he is on the field, by the screen shift. This works fine with a small closed field, especially when threats usually come from the center.

Geometry Wars (Bizarre Creations, 2003)
View of 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 is a classic puzzle game where a player has to notice different elements while solving problems related to a liquid. Because 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 hardly moves while the player is working on a puzzle. Here is a modern interpretation of the old "room" puzzles - only in Vessel a room can be of different sizes and with different characteristics.

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

The developers of Vessel thought of a clever idea: even though the camera looks at the region, it walks a little after the player. It gives a strong sense of control, even in confined spaces. And when the player solves the puzzle and leaves the region, the camera is already moving, and it is not necessary to accelerate it with a jerk to direct it to another region.

Another way for the camera to demonstrate attention and drama is to perform the programmed gestures of the camera according to the player's actions. Tomba is an interesting game from the first crop of pseudo three-dimensional games for PlayStaton. The camera usually shoots straight, 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 his back, showing what is ahead.

Tomba! (Whoopee Camp, 1997)
Camera gestures : according to a gaming event, the camera performs a programmed movement
(the angle varies depending on the state of the character)
Double lead (horizontal)
Platform return
Freewheel window (vertical)

Gestures on gameplay events are different: movements along different axes and trajectories, reacting, anticipating, and so on. I’m sure we’ve just begun to explore how to relate player actions and camera behavior.

A good example showing how much potential lies in gameplay gestures - Aztez , the expected game of fighting. Depending on the rapprochement of the fighters and superudars, she changes the angle of the shooting and jerks off, emphasizing the blows and adding drama.

Aztez (Team Colorblind, expected)
Camera gestures : hitting-departure and changing the angle of shooting depending on the game actions
Tethered camera (vertical)
Linear smoothing
Zoom at all

In Streets of Rage , the classic Sega beater, the camera stupidly follows the action of the simplest one-way window, as usual in the beaters. But from time to time she goes off the screen and instead of the player shows something that clarifies the plot and injects drama.

Streets of Rage (Sega, 1991)
Cinematic rails : the camera suspends its usual behavior and shoots something important, hidden behind the screen.
Geographical perspective
Freewheel (one-way, only between contractions - the usual behavior of beaters)

This is a very powerful system that gives developers the opportunity to make a cinematic stop, without departing from the game context. It's like a video clip without video and without insertion.

The Behemoth was widely used in the Alien Hominid and Castle Crashers games. Many times the game stopped and drove off to the boss or plot element. It performs two tasks - it introduces the plot into the course 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 (one-way, only between contractions - the usual behavior of beaters)


Two in the chamber, not counting the dogs


How to focus on multiple objects

Even one goal in the frame is not so simple. And 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 (or leaves behind) the whole screen, no one can move. And if someone throws a joystick, everyone is stuck - because no one crosses (and does not push away) the edge of the screen.

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

The same technique in Samurai Gunn , but brought to the extreme, to emphasize the plague situation. This is especially emphasized by frequent stops and dims on the screen. As for the camera, since the players are constantly being resurrected and teleported, the middle position moves off, quickly changing the angle. Even the usual stop to the edge is not here, the camera can go beyond the edge of the level. It is well suited to the atmosphere, but inconvenient for an outside viewer. And when it comes to management, the player can even take the character to the screen, if necessary, and no one bothers.

Samurai Gunn (Teknopants, 2013)
Average position
Linear smoothing
There is no emphasis on the edge (to achieve the atmosphere of the atmosphere, they even refused to do this, so the screen is constantly in motion)

Another approach can be found in good old Street Fighter , in all franchise games. There's a horizontal freewheel window, so most of the battle is on camera. As with any free move, the player who rests on the edge of the window, pulls and camera. When the camera moves, it can pull other players along with it, so everything is on the screen. The camera (and players) will get stuck if they both pull the window in opposite directions.

Street Fighter (Capcom, 1987)
Freewheel (horizontal, resting on the edge of the window pulls the camera behind itself, which carries the rest of the characters)

Another franchise that said a new word in a collective game is Super Smash Bros. Already in the first game was 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
Average position (technically the camera tends to it)
Linear smoothing

And today this system works: so, in ROCKETSROCKETSROCKETS it is used with a double purpose: to fit everything in one frame, and to send players to the center, punishing if they do not climb into a melee.

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, single or network, possibly with different weights for averaging.

Never Alone (Upper One Games, 2014)
Physical smoothing
Average position
Cinematic rails
Geographical perspective
Perspective on object

In Spelunky, a different approach to position conflict: the camera only looks at one. When he dies, the torch (white flag) goes to another. It becomes an element of gameplay: for everyone who is behind the screen, the timer ticks.

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


Manual control


Let the player control his gaze

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

Again, Super Mario World was one of the first with additional camera control. The side buttons push the camera in the right direction. It may be a clever idea, but it is often criticized as useless: rarely do players notice this function.

Super Mario World (Nintendo, 1990)
Geographical perspective
Platform return
Free running window (vertical, rarely triggered)
Double anticipation (included in the threshold)
Manual control (horizontally, with additional buttons on the remote)

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

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

Osmos (Hemisphere Games, 2009)
Tied 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 horizontal ones, and therefore they behave clearly and predictably.

Jazz Jackrabbit 2 (Epic Games, 1998)
Linear smoothing (vertical)
Control Prediction : the camera picks up a lead based on the state of the control (in this case, the arrow keys)
[manual control] (as a special case of control advance)

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

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


Shaking camera


All control is gone!

As we have seen in our study, if the camera is controlled clearly and beautifully, the unity between the player and the screen world begins to be felt. The opposite is also true: if the camera starts walking on its own - for example, shaking - this is a strong dramatic technique that demonstrates: 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 game, Miyamoto, 1983 - Mario Bros.The screen does not shake in all versions, most likely due to burning dates or technical limitations.

image
Mario Bros. (Nintendo, 1983) The

shaking screen (and the suspension of the game, leading to the same effect) was practiced in many, many games, and in almost all games of Vlambeer. JW, the designer from Vlambeer, tells in detail about it .

image
Super Crate Box (Vlambeer, 2010)

Own camera



Of all the "rags" we will assemble the camera for our needs,

image

you have already invested a lot of strength and attention in the game, drawing every detail. The camera, like any other element of the game, also deserves attention. Before you adjust the simplest tethered camera, try to describe how the camera should behave in the game.

Here are some of the simplest rules that faith served me when I wrote my game, and eventually led to this research.



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, with a movement from right to left.) Look at the horizontal window of the free run. Many grand battles take place in the trees, and the width of the window exactly coincides with the thickness of the trunk so that the camera does not twitch in battle.

The Legend of Kage (Taito, 1985)
Tied camera (vertical)
Free running window (horizontally, coincides with the thickness of the tree)

Another good example of fitting systems to your gameplay is at Shinobi . With his high jumps it took a high freewheel, almost full screen. So that the camera does not go far, it slowly returns to its original position.

Shinobi (Sega, 1987)
Camera return (vertical)
Free running window (vertical)
Attached camera (horizontal)
Static lead

Sonic the Hedgehog , a fast platformer with movement along both axes. A narrow window is made so that Sonic is always in the center, because you always need to see what is coming up ahead. Vertically the window is higher so that small jumps do not move the window. In contrast, a platform return restores vertical alignment as soon as Sonic gets on the platform.

When Sonic hits a speed on the edge, especially in a “dead loop” or in a protracted fall, a fair jerk is obtained. To reduce it, the window was made low and narrow - then the speed is unlikely to be great.

Sonic the Hedgehog (Sega, 1991)
Platform alignment
Freewheel
Static Prevention
Manual control

When you need to look far ahead, and the movement can be in both directions, the natural choice is a double advance. There are several ways to drag the camera to a new snap point. Brilliantly solved this issue Cave Story , dynamically changing the speed of the camera depending on the speed of the player (that is, the base speed plus the speed of the player). In Bonanza Bros. another approach: the camera moves when a player moves, what works for a game of robbery, but not necessarily at all - for a platform rich with enemies like Cave Story .

Cave Story (Studio Pixel, 2004)
Tied Camera (Vertical)
Double Anticipation
Physical Smoothing
Manual Control (Vertical)

And in Fez on you are not a rod of hordes of enemies, so that a simple window of free running makes sense. The developer of Fez cleverly entered the classical method in a unique design. Since the pivot point for turning measurements is the nearest angle, it can be assumed that the back space is more important than the front space. During the turn, the camera flickers so that Gomez is away from the edge of the screen.

Fez (Polytron, 2012)
Freewheel (horizontal, retained when reversing measurements)
Tied camera (vertical)
Linear smoothing
Geographical angle
Manual control (right lever)

The approach from Vessel is a great solution for a puzzle with one puzzle per room. Therefore, the camera looks at the room, selecting the position and zoom so that everything can be seen by the player. It stands non-rigidly, moving slightly when the player walks: it improves the sense of control and slightly accelerates the camera, before the hero moves to another region. Together comes a good combination of preset frame and responsive control.

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

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

The Swapper (Facepalm Games, 2013)
Anticipation of management
Physical smoothing
Geographical perspective
Angle on the object
Cinematic rails


Mushroom 11


What decisions did I make

image

In Mushroom 11, a thoroughly developed camera based on “regions”. Each level is composed of dozens of such regions, and each region has its own rectangular “corridor” that limits camera movement and its zoom level.

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

Regions are renumbered in order, and the camera is controlled by the piece of mushroom that is in the region with the highest number. 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
perspective on the object (in different regions in different ways)
motion
prediction physical smoothing (the coefficients depend on the speed)

All the cells that have disappeared from sight 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 over there. And the edge of the screen does not destroy any important cells.

Regions are of two types: averaging and progressive. It depends on where the camera is aiming. As soon as the point of sight was determined, the camera will fly there, while remaining in a rectangular "corridor" of the region.

Averaging region

If it is necessary for 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 the camera aims at the largest piece of fungus. Also, this mechanism is suitable for closed rooms with puzzles, where all the pieces are next to each other (otherwise there would be some kind of perishing going beyond the screen).

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular "corridor")
>>> Average position;
static lead
perspective on the object (in different regions in different ways)
motion
prediction physical smoothing (the coefficients depend on the speed)


Progressive region

Regions with a linear device focus on the mushroom that has gone furthest. This is determined by the predetermined direction of movement in the region - and lagging mushrooms are ignored. At the same time, static anticipation is added, well combined with such regions.

Mushroom 11 (Untame, expected)
Geographical perspective (each region has its own zoom and its own rectangular “corridor”)
Averaged position;
>>> static lead
perspective on the object (in different regions in different ways)
motion
prediction physical smoothing (the coefficients depend on the speed)


Sights

In each of the regions, the perspective on the object can be used. If the fungus is in this region, some objects and creatures attract the camera, guided by a programmed or dynamic coefficient. The obvious candidate for this approach is bosses.

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


Smoothing

Smoothing is achieved by a combination of motion prediction and physical smoothing. The smoothing factor depends on the speed of the fungus: when it moves quickly, the camera is precise and sharp, when the user carefully cuts the fungus - it crawls slowly.

There are no jumps in the game, so it is natural to use advance in motion. The camera aims to where the mushroom (or the average of several mushrooms) will be in a split second, giving accurate behavior and anticipating future environments.

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

With this behavior, the camera perfectly works out a lot of pieces with different sizes and speeds that constantly grow and quickly move from region to region.

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


Vocabulary



Autoscrolling : the player does not control the scrolling in any way, but has the full right to determine where to be in the frame.
The return of the camera : constantly reduce the "withdrawal" of the camera, pulling it to the player.
Geographical perspective : different levels or parts of levels set up the camera in their own way.
Double anticipation : when the player changes the direction of movement, the camera changes the angle and looks forward.
Gestures by the camera : according to the gaming event, the camera performs the programmed movement.
Zoom at all : zoom or departure to fit everything in the frame.
Cinematic rails : the camera suspends its usual behavior and shoots something important, hidden behind the screen.
Linear smoothing : continuously reduce the distance between the camera and the player using the linear interpolation formula.
Window freewheel : move the camera as soon as the player rests on the edge of the window.
Platform return : the camera returns to the player as soon as he lands on the platform.
Attached camera : the camera always looks at the hero.
View of the object : the view is determined by the objects of the game world - for example, attractors.
View of the region : the camera looks at a certain point, combined with the position of the player.
Rails : programmed camera route.
Static anticipation : more room for review in the main direction.
Pushing acceleration zone : when the character is in the zone, gradually accelerate the camera until it is equal to the speed of the character.
The pulling overclocking zone : as soon as the player crosses the window border, we accelerate the camera until it is equal in speed with the character.
Emphasis on the edge : set a hard edge, beyond which the camera can not go.
Ahead of movement : the camera chases the player’s future (extrapolated) position.
Control Prediction : The camera picks up a lead based on the control state.
Average position : the camera aims at the average of all targets.
Physical smoothing : the camera - the physical body, constantly flying to the target point.

Source: https://habr.com/ru/post/273397/


All Articles