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

The second part

From the translator. The article was written by Itay Keren, founder of the indie studio Untame , author of the game Mushroom 11 . The result was a real tutorial on camera control in side-scrolling games. Although there is not a line of code in any language (I’m lying, there is one), I think it will be easy to translate all this into instructions for the computer. A must-read for all programmers and designers who engage in dynamic 2D games. I translated the terminology more in meaning: for example, position-locking - “attached camera”. Yes, and for many games until 1983, the version for Dendy is shown - a little unhistorical, but simple.

Introduction

While working on the Mushroom 11 game , I came across a lot of design and technical issues. I didn’t expect anyone to write about vertex animation or smooth shape change, but I was surprised that they almost did not write about working with the camera, a task with a 30-year history.

I decided to arrange a short trip through the history of two-dimensional games, to document their difficulties, approaches and the evolution of their solutions. Many solutions do not even have a name, so I - rather for myself - came up with a classification of approaches to the camera and wrote a small dictionary.

Scrolling

Scrolling or panning is any attempt to show a scene that does not fit on the screen. There are many questions related to scrolling: show the player what he needs to see, show what we, as developers, want to show him, and how to make it all scroll smoothly and comfortably.

Although I will focus on two-dimensional cameras, many of these common concepts also work for 3D.

Something from neurology

Before we look at games, let's look at our senses in order to better understand vision and perception. So we can understand what is wrong with scrolling.

The central fossa is the receptor inside our eyes, responsible for the clear and detailed central vision. The second and third receptor belts, parafovea and periphery, perfectly compress the picture and movement in order to speed up recognition - first of all, recognition of familiar disturbing forms and changes in the direction and speed of movement.

The image from the eyes goes straight to the amygdala, providing a quick reaction, and at the same time to the visual cortex, which decrypts the image. The brain can be trained - for example, to “tie” shifts on the periphery of vision to control. This is useful in games.


The vestibular apparatus is located in our inner ear, and is responsible for balance and spatial orientation. The signals he sends allow the body to maintain balance while the eyes peer into the details.

When some, like me, read in a car, accelerations that are not visually supported lead to motion sickness and dizziness. But the opposite is also true: if peripheral vision captures changes in the background, and the vestibular apparatus says that everything is motionless - you are sitting at the computer - the result will be similar.

So conflicting signals from the senses (vision and vestibular apparatus) can lead to discomfort and motion sickness. Although these effects are brighter in 3D (especially in virtual reality), this is noticeable in two-dimensional games.

Attention, interaction and comfort

To help understand scrolling issues, I highlighted three big questions in them.

Attention: teach the camera to show enough game information to navigate the game (what the player needs to see).

Interaction: to make the player able to control what the camera sees, so that changes in the background are predictable and clearly tied to the player’s control (what the player wants to see).

Comfort: to facilitate and explain the changes in the background (how to make these tasks elegantly combine without creating any inconvenience to the player).

Scroll Nostalgia

We will begin our journey from the very 1980s, when developers invented new game schemes, bypassing such technical limitations that 30 years later it is difficult to imagine what they were.

I will refer to the leading indie games, for the most part from the last decade, because they always showed the innovation, attention to details and care that can be expected from independent artists - and working with the camera is no exception.

Following the action

All attention - to the controlled hero.

Let's start with the simplest. Generally speaking, you, as a player, are fully responsible for your character. This dictates the attention that the game gives to the hero when he leads him with a camera.

In the early 80s, scrolling was difficult, and the developer was faced with limitations: processor speed, memory capacity, and segmented memory structure. But even with these problems, wonderful spinning games were released that fit elegantly into these limitations. True, often the movement was simple or jerky.

And it is amazing that in 1980 the Rally-X game overcame these limitations and introduced a real biaxial camera. There was the simplest mechanism “attached camera”: the machine is always in the center, and the movement of the camera is completely predictable.

Rally-X (Namco, 1980)

An attached camera : the camera always looks at the hero. Note. I came up with all these terms myself, for my work and to somehow name these phenomena. I will be flattered if someone else takes advantage of them, improves and writes me a review.

Another good example of a tethered camera is the Kung-Fu Master , developed by Takashi Nishiyama, a designer who also made Moon Patrol , and later Street Fighter .

At the same time, one more simple mechanism is visible, which I call “stop at the edge” - when the camera rests on the edge of the screen, the character can move away from the anchor point.

Kung-Fu Master (Irem, 1984)

The attached camera Emphasis in edge : the rigid edge is established, beyond which the camera cannot go. (The camera rests on the edge in almost all games, so we won’t mention this technique anymore.)

An attached camera is the simplest technique, but still useful. In the sandbox with Terraria crafts, the character is very small compared to the screen and jumps low, so that the attached camera not only works, but also provides long-range visibility in all directions.

Terraria (Re-Logic, 2011)

Tied camera

Restrict camera movement

Less unnecessary or unpredictable scrolling.

How to avoid scrolling if it is undesirable? 30 years ago, scrolling had flaws: it was demanding on the processor, because a large piece of the screen was redrawn. And even if it was possible to fix it, the large pixels of that time made scrolling non-smooth. Because the best approach was to scroll less. One way is to let the character walk within a certain window, and scroll if he goes outside the window.

Jump is considered by many to be the first platformer, although technically the player jumps constantly, you only need to control the jump height and left-right movement. In it, as in many other games of that time, the camera automatically moves up, requiring the player to jump higher and higher, bypassing obstacles.

Jump Bug (Alpha Denshi / Hoei → Coreland, 1981)

Freewheel : move the camera as soon as the player hits the edge of the window

The free-wheeling window solved a problem that for many developers did not stand, and set the standard, followed by thousands of platformers. But there were questions: a player jumping higher and higher to the exit, too late to notice the enemy, approaching from above.

In one of my favorites, Rastan Saga , you can move along two axes and walk in different ways. And she is one of the first who developed a relationship between the camera and mechanics. A free play is the same height as a standard jump, and jumping does not cause the camera to move up - unless, of course, Rastan has not moved up before that. This eliminates the need for camera jerks.

A big drawback in this is that enemies appearing from above are poorly visible, especially if Rastan is already somewhere above the free window. And moving to the left (which happens in many castles) is generally inconvenient, you can see too little forward.

Rastan Saga (Taito, 1987)

Freewheel

The free play window still appears in new games. See how in Fez the horizontal window is preserved when you turn the measurements. And, in fact, the pivot axis is chosen so that the player remains in the window. The free-wheeling window in Fez was chosen not quite ordinary, and this is a wonderful solution for such a unique game, and we will show it later. Vertically, this is an ordinary tethered camera with linear smoothing - we will explain this later.

Fez (Polytron, 2012)

Freewheel window (horizontally, saved when the measurement is turned around ) Tied camera (vertically) Linear anti-aliasing (terms in italics below are defined in italics) Geographical view Manual control (right lever)

Return

We will return the runaway camera to its place!

We have already shown how the freewheel reduces camera movement. But, as we see in Jump Bug and Rastan , this also has drawbacks when the player is at the edge of the window. Here is one way to fix it.

Shinobi is probably my favorite classic game, and it has very high platform jumps. Designers arranged a unique camera control: vertically, since there are many platforms, there is a very wide freewheel. And, as usual, the Ninja rested against the edge of the window - immediately pull the camera. There is a drawback to a tall (or wide) window: after a short jump, a player can get stuck at the top of the window, and very little can be seen from above, as in Rastan Saga . And Shinobi Slowly pulls the camera towards the player, holding the entire thick of events in the frame and minimizing sharp camera movements.

Shinobi (Sega, 1987)

Camera return (vertical): constantly reduce the “pull” of the camera, pulling it towards the player. Freewheel (vertical) Locked camera (horizontal) Static lead

One of the new features invented in Super Mario World is platform return. As with any free-wheeling window, the camera stands still until the hero rests against the edge. But no matter how Mario leaps, he will eventually land on the platform, and when that happens, pull the camera up to him.

Super Mario World (Nintendo, 1990)

Geographical perspective Platform return : the camera returns to the player as soon as he lands on the platform. Freewheel window (vertical, rarely triggered) Double anticipation (turns on the threshold) Manual control (horizontal, with additional buttons on the remote control)

This is the first mention of Miyamoto's work, and certainly not the last. He understands the game and is attentive to the smallest details - and therefore he is a good gemdesigner, and not just because he thinks up the mechanics of games well.

We see the same idea in the very first Rayman . The top of the screen serves as the top of the freewheel. Notice that the camera does not move when Reiman jumps - she gently drives up when he lands. Here is a smart solution, because the free-wheeling window is slightly larger than the height of the jump. And again, we have an example of how a game camera becomes an integral part of a game’s design.

Rayman (Ubisoft, 1995)

Platform return Freewheel window (vertical, rarely triggered) Geographic view Double lead Linear smoothing

This technique also works now, preventing the camera from moving during the jumps and centering it when the jump is finished - or when they have left the free-wheeling zone. Naturally, platform return works when a character can step onto platforms. And if not, as in the jetpack at Awesomenauts , only vertical free play works.

Awesomenauts (Ronimo Games, 2012)

Freewheel window (vertical) Platform return Linked camera (horizontal)

Smoothing

Avoid sudden changes in camera speed and direction of movement

We have already talked about the role of peripheral vision and how it affects visual comfort. Once upon a time, when we were small, and the pixels were large, even the simple movement of the camera looked twitchy due to the large pixels.

Dendy 80s Pixel : 256 × 240 Resolution

Modern indie pixel. Contains many physical pixels.

How can we smooth out the movement of the camera when we have a strict and rough lattice of large pixels? Now we can draw a beautiful pixel image, and then move it with an accuracy much higher than the resolution of the image. And if you don’t need to be “pixel to pixel”, many engines can work in steps even smaller than a pixel.

Smoothing (pseudo) physics

Pseudophysics can help when you need to smooth out a normal attached camera (some would say that any physics in the engine is actually pseudo-).

Pac-land- According to some, the first modern platformer. It has many elements that helped define the genre: jumping on platforms, dodging enemies and picking up bonuses. As for smoothing - the speed there from 0 pixels / frame rises to 1, 2, 3, and so on to the maximum, and then also smoothly drops to zero. Although the camera is tied to Pakman, the result is clear and smooth. But Pac-Land does not have to scroll vertically, and it is there that the main difficulties are in fast acceleration and deceleration when you jump and fall.

Pac-Land (Namco, 1984)

Snap Camera Static Lead

Shigeru Miyamoto

Here I would like to take off my hat to Shigeru Miyamoto and show his first few works. He made an invaluable contribution to the industry, and its influence to the smallest details of the game is difficult to exaggerate.

In 1984, he began experimenting with scrolling, and developed two games that use it in completely different ways. In both, the player has very little control over scrolling. Rather, they look like a room with a moving picture on the wall.

Excitebike (Nintendo, 1984)

Devil World (Nintendo, 1984) Released in North America

As Excitebike was a modern type of scrolling depending on the speed of the motorcycle. Smooth enough, but especially did not affect the game.

And in Devil World everything was built on a scroll. In this clone of Pac-Man, you play as a Christian dragon who fights the devil, and he constantly changes the direction of scrolling, pushing you closer to the edge. This is the only game that was never released in the United States due to religious images, but compared to the quality of his other works, this is a small loss. Although it is informative - and often inspiring - to see the first, less successful works of the master. Even the best artists experiment, and not all experiments succeed.

And now let's jump forward a year. It's hard to exaggerate the brillianceSuper Mario Bros. The game itself is a simple movement from left to right horizontally. Moreover, it doesn’t let you go back beyond the edge of the screen, which is often the case in platformers (technically, this can be defined as a one-way free-wheeling window).

Super Mario Bros. (Nintendo, 1985)

Pushing acceleration zone : when the character is in the zone, we gradually accelerate the camera until it reaches the character’s speed. Freewheel window (single-sided) Static lead

If Mario stepped back to disperse, and then left the freewheel window at full speed, in one frame the camera would accelerate from 0 to maximum, with a large change in scroll speed and inevitable discomfort. Designers decided this by adding another point, 25% from the center, where the camera starts to accelerate to match the speed of Mario. So, when Mario should rest against the edge, the camera is already chasing him at full speed.

Metroid was an innovative game that created a new genre combining jumping with exploration ( brother in the Castlevania genre , by the way, had a simple camera attached).

In metroidthere was a biaxial movement, but only one axis worked simultaneously. He introduced another method of softening the camera: the character can exit the window, but then the camera accelerates to catch up. How far from the line he will go - it depends on the speed with which he crossed the line. But still, in the end, a smooth camera comes out.

Metroid (Nintendo, 1986)

Freewheel window (horizontal / vertical) Pulling acceleration zone : as soon as the player crosses the border of the window, we accelerate the camera until it is equal in speed to the character.

The development of technology has given more pixels and faster processors, this has affected the game camera. Now the camera was able to ride freely, without the jitter inherent in low resolutions - especially at low speeds, when it only shifted by a few frames.

Donkey Kong Country came up with many innovative solutions with the camera. He was one of the first to make a variable lead (more on this later), as well as linear smoothing, which made jumping very smooth.

Donkey Kong Country (Rare / Nintendo, 1994)

Linear smoothing : constantly reduce the distance between the camera and the player using the linear interpolation formula. Snap camera (vertical) Geographic view Double lead

Linear interpolation is not such a big achievement. But it was this formula that became the standard tool that reduces camera jerks at speed, especially when jumping.

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

This is perhaps the most effective and ubiquitous anti-aliasing technique. It works for both slow characters and fast ones like Super Meat Boy . Only if the character is large and moves very fast, the camera may not catch up with him, and the enemies will be hidden behind the scenes until the last second.

Super Meat Boy (Team Meat, 2010)

Linear Smoothing Snap Camera

In 2014, the charming game Never Alone was released , and there are many different elements in it, which we will explain later. Its smoothing mechanism also takes into account the speed of the camera, so the camera slowly takes acceleration, and then “flies” over the target point. The result was a smooth and organic flight, albeit not quick to respond to twitching movements.

Never Alone (Upper One Games, 2014)

Physical Smoothing : A camera is a physical body that constantly flies to a target point. Position averaging Cinematic rails Geographic view Object perspective

In terms of programming, linear anti-aliasing is EaseOut and physical anti-aliasing is EaseInOut. If possible, use the SmoothDamp method [function of the Unity engine - Translator], or write your own version, which will take into account both the distance to the target and speed.

If you use pixel-to-pixel shaders, you sometimes notice that your sprites are shifted by a pixel compared to other sprites or backgrounds due to machine division errors. Playing the Hyper Light Drifter , performed in the pixel low resolution graphics, cleverly solved the problem. It renders into an intermediate “canvas” in game pixels, and then displays it on the screen at the desired scale, shifting it depending on the fractional part. There are other interesting solutions there, we will talk about them later.

Hyper Light Drifter (Heart Machine, not yet released)

Physical smoothing (the resolution of the game canvas is 720 × 480, but scrolling is in the physical resolution of the monitor). Geographical view Alert for managing the View on the object Camera gestures

Framing

We keep the most important thing in the frame

There is nothing to say about auto-scrolling, because by definition it does not allow the player to move the camera. But it gives us an interesting starting point where, ideally, there should be players, if you keep a balance between the mass of threats in front and those few threats that appear behind.

Scramble (Konami, 1981)

Auto -scrolling: the player does not control the scrolling in any way, but has every right to determine where in the frame he should be.

As we saw in Pac-Land , if the camera is tied to the player and moves back and forth with him, you can move the camera slightly forward. This will leave a lot of space to look forward, but will not forget about the space behind. And at the same time it will indicate where to go, because we are striving for the center.

Pac-Land (Namco, 1984)

Fixed camera Static lead : more headroom for viewing

Let's move back. At the beginning of 1981, a scroll-flying game was released, ahead of its time and inspired a new genre - Defender . She provided a double lead, but almost no one noticed this. Defender always points the camera at an imaginary point in front of the ship, about a quarter of the screen forward. This mechanism is great for a quick game where most enemies appear in front.

Defenter (Williams Electronics, 1981)

Double lead : when the player changes direction, the camera changes its angle and looks forward.

Bonanza bros  - A delightful robbery game released by Sega for machine guns in 1990. It has a unique mode for two (cooperative, with a split screen), where two brothers work together to carry out a robbery.

Of course, it is important for the robber to see ahead, and therefore they made a double lead there. But in order for the camera to aim at a new target, you need to take a couple of steps: it turns out smoothly and the review is good. The camera moves about twice as fast as the player, which means: when the player is standing, the camera is also standing. Look at Red (below).

Bonanza bros (Sega, 1990)

Double lead (camera speed depends on speed)

And this is how the camera works in Super Mario World , my favorite when it comes to working with a 2D camera. See how attentively the camera has been adapted to the gameplay.

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)

Again, there are two camera angles, depending on which direction the player decides to go. But if you suddenly need to go back (the usual thing in Super Mario World ), the camera will not go anywhere until Mario passes a certain threshold. And only after that the camera will aim at a new point. This helps a lot, because turning left in SMW does not mean going backward.

More recently, Cave Story took advantage of the double lead to move the camera left and right, depending on speed. Almost the same as what we saw in Bonanza Bros. Only the camera goes to the right place slowly if the player is standing, and quickly if it moves.

Cave Story (Studio Pixel, 2004)

Snap camera (vertical) Double lead Physical smoothing Manual control (vertical)

Jazz Jackrabbit 2 , a beautiful platformer of the first days of Epic Games, had one unusual camera element: it moved the camera further away from the player, both horizontally and vertically, depending on the buttons pressed.

This is a great example of what I call “control lead”: the player himself tells the camera where to move, depending on where he wants to go. Going to the left means that you need to see more on the left. Release the button - the camera returns to the center.

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)

Proactive management can also reflect a more pronounced proactive point, many of which we see in games with mouse control. In Snapshot, we solve puzzles by taking snapshots of scene elements and setting them somewhere else. The pointer expands our view in the right direction - the camera points to the middle between the player and the pointer.

Snapshot (Retro Affect, 2012)

Proactive management (midway between player and pointer) Linear smoothing

The Swapper has some interesting methods of working with the camera, which will touch on later. As for the lead in control, the target point of the cloning device resembles the direction of view, and it is in this direction that you can make a lead. This works with any game where there is an independent weapon. The player can even go backwards and look forward, if he wants - very universal, but you need to somehow control the camera.

Swapper (Facepalm Games, 2013)

Management Alert Physical Smoothing Geographic View Object View Cinematic Rails

The Secrets of Rætikon has some interesting moments with the camera. As for the layout of the frame - there is a lead in movement, with a simple extrapolation of the character’s position based on the current speed.

In platformers, this technique may not work, especially vertically: jumping and landing cannot be reliably extrapolated.

Secrets of Rætikon (Broken Rules, 2014)

Movement Ahead : the camera chases the player’s future (extrapolated) position Physical smoothing View angle on the object (position and scale depend on attractors) Camera gestures (certain actions cause a response from the camera side, for example, the scale decreases in flight) Cinematic rails

In Luftrausers , the camera is also interesting: to determine where to look, it is taken into account where the plane is looking (in control), where it is flying (in movement) and other tips like water, ships and shells that also attract the camera (see the next section per object ”).

Luftrausers (Vlambeer, 2014)

Anticipation of control and movement Physical smoothing View on the object

Second part