Let the scrolling be with you: theory and practice on the camera in platformers [1/2]
The second part of
From the translator. The article was written by Itai Keren, the founder of the indie studio Untame , the author of the game Mushroom 11 . The result was a real tutorial on camera control in side scrolling games. Although there is not a single line of code in any language (I lie, there is one), I think it will be easy to translate all this into instructions for a computer. Be sure to read to all programmers and designers who are engaged in dynamic 2D-games. I translated the terminology more in the sense: for example, position-locking - âtied cameraâ. Yes, and for many games until 1983, the version for Dendy is shown - a bit unhistorical, but we will forgive.
')
While working on the game Mushroom 11 , I came across a lot of design and technical issues. I didnât expect someone to write about the vertex animation or smoothly changing the shape, but I was surprised that they practically didnât write about the work with the camera, the task with a 30-year history.
I decided to make a small journey through the history of two-dimensional games, to document their difficulties, approaches and the evolution of their decisions. 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 glossary.
Scrolling or panning we call any attempt to show a scene that does not fit on the screen. There are many issues 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 scrolled smoothly and comfortably.
Although I will focus on 2D cameras, many of these common concepts also work for 3D.
Before we consider the games, let's examine our senses in order to better know our vision and perception. So we can understand what is wrong with scrolling.
The central fossa is the receptor inside our eye, responsible for clear and detailed central vision. The second and third receptor belts, paraffhea and periphery, perfectly compress the image and movement in order to speed up identification - first of all, identification of familiar alarming forms and changes in the direction and speed of movement.
The image from the eyes goes straight into the amygdala, which provides a quick response, and at the same time into the visual cortex, which decodes the image. The brain can be trained - for example, to âtieâ changes in the periphery of view 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 keep its balance, while the eyes peer into the details.
When some people, like me, are reading in the car, acceleration, not supported by sight, leads to motion sickness and dizziness. But the opposite is also true: if peripheral vision catches changes in the background, and the vestibular apparatus says that everything is still - you are sitting at the computer - the result will be similar.
So contradictory 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 also noticeable in 2D games.
To help understand the scrolling questions, I highlighted three big questions in them.
Warning: teach the camera to show enough game information to navigate the game (what the player needs to see).
Interaction: make sure that the player can control what the camera sees, so that changes in the background are predictable and clearly tied to the playerâs controls (what the player wants to see).
Comfort: to facilitate and explain changes in the background (how to make these tasks elegantly combined, without creating inconvenience to the player).
We begin our journey from the 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, mostly from the last decade, because they have always demonstrated innovation, attention to detail and care that can be expected from independent artists - and working with the camera is no exception.
All attention to the controlled hero.
Let's start with the simplest. In general, you, as a player, are fully responsible for your character. This dictates the attention that the game gives the hero when he leads his camera.
In the early 80s, scrolling was difficult, and the developer was confronted with limitations: processor speed, memory capacity, and memory segment structure. But even with these problems, wonderful scrolling games were released that elegantly fit into these limitations. True, the movement was often the simplest or jerky.
And it is amazing that in 1980, the game Rally-X overcame these limitations and presented a real two-axis camera. There was the simplest âtethered cameraâ mechanism: the car is always in the center, and the movement of the camera is completely predictable.
Another good example of an attached camera is Kung-Fu Master , designed by Takashi Nishiyama, a designer who also made Moon Patrol , and later Street Fighter .
At the same time, another uncomplicated mechanism is visible, which I call âfocusing on the edgeâ - when the camera rests on the edge of the screen, the character can move away from the anchor point.
A tied camera is the simplest technique, but still useful. In the sandbox with handicrafts Terraria, the character is very small compared to the screen and jumps low, so the tethered camera not only works, but also gives a far view in all directions.
Fewer unnecessary or unpredictable scrolls
How to avoid scrolling if it is undesirable? 30 years ago, scrolling had flaws: it was demanding of the processor, because a large piece of the screen was being redrawn. And even if it was possible to adjust it, the large pixels of that time made the scrolling non-floating. Therefore, the best approach was to scroll less. One way is to let the character walk through a window, and scroll if it goes beyond the window.
Jump Bug is considered by many to be the first platformer, although technically the player jumps constantly, you only need to control the height of the jump and the movement left-right. 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.
The freewheel window solved the task, which for many developers and did not stand, and set the standard, followed by thousands of platformers. But there were also some questions: a player jumping higher and higher to the exit, too late notices 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 to develop the relationship between the camera and the mechanics. Free running 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. This eliminates the need for camera jerks.
The big drawback in this is that the enemies appearing from above are hardly noticeable, especially if Rastan is already somewhere at the top of a free window. And to move to the left (which happens in many castles) is generally inconvenient, too little is visible ahead.
The freewheel still appears in new games. See how the horizontal window in Fez is preserved when you rotate the measurements. And, in general, the axis of rotation is chosen such that the player remains in the window. The freewheel window in Fez is not an ordinary choice, and this is a great solution for such a unique game, and we will show it later. Vertically, this is the usual tied camera with linear anti-aliasing - we will explain this later.
We will return the camera to the place!
We have already shown how the freewheel window reduces camera movement. But, as we see in Jump Bug and Rastan , this also has disadvantages when the player is at the edge of the window. Here is one way to fix this.
Shinobi is probably my favorite classic game, and it has very high platform jumps. Designers have arranged a unique camera control: vertically, since there are many platforms, there is a very wide window of free running. And, as usual, the Ninja rested against the edge of the window - we immediately pull the camera. A high (or wide) window has a drawback: after a small jump, the player can get stuck at the top of the window, and very little is seen from above, as in Rastan Saga . And Shinobi slowly pulls the camera towards the player, keeping the whole thick of events in the frame and keeping the camera's sharp movements to a minimum.
One of the new features invented in Super Mario World is the platform return. As with any free-run window, the camera stands still until the hero rests on the edge. But no matter how Mario jumps, he eventually lands on the platform, and when that happens, pull the camera towards him.
This is the first mention of the Miyamoto works, and certainly not the last. He understands the game and is attentive to the smallest details - and therefore he is a good gemdizayner, and not just because he is good at inventing the mechanics of games.
The same idea is seen in the very first Rayman . The top of the screen serves as the top of the freewheel window. Notice, the camera does not move when Rayman jumps - she gently pulls up when he lands. This is a smart decision, because the freewheel 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 the game design.
This technique works even now, not allowing the camera to move during jumps and centering it when the jump is completed - or when you left the free-run zone. Naturally, the platform return works when a character can get up on platforms. And if not, as in the jetpack in Awesomenauts , only the vertical free run is working.
Avoid sudden changes in camera speed and heading.
We have already talked about the role of peripheral vision and how it affects visual comfort. Long ago, when we were small, and the pixels were large, even the simple movement of the camera looked like a jerk due to the large pixels.
How can we smooth the movement of the camera when we have a strict and coarse 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 the usual attached camera (some would say that any physics in the engine is actually pseudo).
Pac-Land - according to some, the first modern platformer. There are many elements in it that helped define the genre: jump on platforms, dodge enemies and pick up bonuses. As for smoothing, the speed there rises from 0 pixels / frame to 1, 2, 3, and so 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 need to scroll vertically, and that is where the main difficulties are - in fast acceleration and deceleration, when you jump and fall.
Shigeru miyamoto
Here I would like to take my hat off to Sigaru Miyamoto and show some of his first 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 very differently. In both, the player has very little scroll control. They are more like a room with a moving picture on the wall.
In Excitebike there was a modern type of scrolling, depending on the speed of the motorcycle. Rather smooth, but not particularly affected by the game.
And in Devil World everything was built on scrolling. In this Pac-Man clone, you play a Christian dragon who fights the devil, and he constantly changes the direction of the scroll, pushing you closer to the edge. This is the only game that was never released in the US due to religious images, but, compared to the quality of his other works, this is a small loss. Although informative - and often inspiring - to see the first, less successful works of the master. Even the best artists are experimenting, and not all experiments succeed.
And now let's jump a year ahead. Itâs hard to exaggerate the brilliance of Super Mario Bros. The game itself is a simple movement from left to right horizontally. Moreover, it does not allow walking back beyond the edge of the screen, which is often in platformers (technically, this can be defined as a one-way freewheel).
If Mario stepped back to accelerate, and then go out of the freewheel at full speed, the camera would accelerate from 0 to maximum in one frame, with a big 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 has to rest on the edge, the camera is already chasing him at full speed.
Metroid was an innovative game that created a new genre, combining jumping with research (in the brother of the genre Castlevania , by the way, was the simplest tied camera).
In Metroid, there was a biaxial movement, but only one axis at a time worked. He introduced another method of softening the camera: a character may come out of 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, as a result, a smooth camera comes out.
The development of technology has given more pixels and faster processors, and this has affected the gaming camera. Now the camera could drive freely, without jitter, inherent in low resolutions - especially at low speeds, when it only moves 1 in a few frames.
Donkey Kong Country came up with many innovative camera solutions. He was one of the first to make a changing preemption (more on that later), as well as linear smoothing, which made the jumps very smooth.
Linear interpolation is not such a great achievement. But it was this formula that became the standard tool for reducing camera jerking at speed, especially when jumping.
This is perhaps the most effective and ubiquitous smoothing technique. It works for slow characters as well as fast characters like Super Meat Boy . Only if the character is big and moves very quickly, the camera may not catch up with him, and the enemies will be hidden behind the scenes until the last second.
In 2014, the charming game Never Alone came out, and there are many different elements in it that we will explain later. Its smoothing mechanism takes into account the speed of the camera, so that the camera slowly takes acceleration, and then âfliesâ over the target point. The result was a smooth and organic flight, although it did not respond quickly to jerky movements.
In terms of programming, linear smoothing is EaseOut, and physical smoothing is EaseInOut. If possible, use the SmoothDamp method [Unity engine function - Translator], or write your own version, which will take into account both the distance to the target and the speed.
If you use pixel-to-pixel shaders, you sometimes notice that your sprites are shifted by one pixel compared to other sprites or backgrounds - due to engine division errors. The game Hyper Light Drifter , executed in low-resolution pixel graphics, cleverly solved this problem. It renders an intermediate âcanvasâ in the game pixels, and then displays it on the screen at the desired scale, shifting depending on the fractional part. There are other interesting solutions there, we will talk about them later.
We keep the most important thing in the frame
There is nothing to say about autoscrolling, 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 the few threats that appear behind.
As we saw in Pac-Land , if the camera is tied to a player and moves back and forth with it, you can move the camera slightly forward. This will leave plenty of space to look ahead, but will not forget about the space behind. At the same time, it will indicate where to go, because we are striving towards the center.
Move back yet. In early 1981, there was a scrolling-letalka, ahead of its time and inspired by a new genre - Defender . She provided a double lead, but almost no one noticed. 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.
Bonanza Bros. Is a delightful robbery game released by Sega for machine guns in the 1990s. It has a unique mode for two (cooperative, with a split screen), where two brothers work together to perform a robbery.
Of course, it is important for the robber to see ahead, and therefore there they made a double lead. But in order for the camera to reach for a new target, you need to take a couple of steps: it turns out smoothly, and the review is good. The camera moves approximately twice as fast as the player, which means: when a player is standing, the camera also stands. Look at the Red (below).
And this is how the camera works in Super Mario World , my favorite part of working with a 2D camera. Look at how closely the camera was adjusted to the gameplay.
Again, there are two camera angles, depending on which way the player decides to go. But if you suddenly need to 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 hover over a new point. It helps a lot, because turning left in SMW does not mean going backwards.
More recently, Cave Story used a double lead to move the camera left and right, depending on the speed. Almost the same as what we saw at Bonanza Bros. Only the camera goes to the right place slowly, if the player is standing, and quickly - if he moves.
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 which buttons were pressed.
This is a great example of what I call âpre-emption managementâ: the player himself tells the camera where to move, depending on where he wants to go. Going to the left means you need to see more on the left. Releases the button - the camera returns to the center.
The control lead can also reflect a more obvious point of lead, we see a lot of this in mouse-controlled games. In Snapshot, we solve puzzles by taking pictures of scene elements and setting them somewhere else. The pointer expands our view in the right direction - the camera is pointed at the middle between the player and the pointer.
Swapper has some interesting camera tricks that will be covered later. As for management, the target point of the cloning device resembles the direction of sight, and it is in this direction that the advance can be made. It works with any game where there is an independent aim weapon. The player can even go backwards and look forward, if he wants - very versatile, but you need to somehow control the camera.
In the Secrets of RĂŚtikon there are several interesting moments with the camera. As for the composition of the frame - there is anticipation of movement, with a simple extrapolation of the character's position based on the current speed.
In platformers, such a technique may not work, especially vertically: jumps and landings cannot be extrapolated reliably.
In Luftrausers , the camera is also interesting: to determine where to look, it is taken into account where the aircraft is looking (by control), where it flies (by movement) and other clues like water, ships and shells, which also attract the camera (see the next part âangle on the object ").
The second part of
From the translator. The article was written by Itai Keren, the founder of the indie studio Untame , the author of the game Mushroom 11 . The result was a real tutorial on camera control in side scrolling games. Although there is not a single line of code in any language (I lie, there is one), I think it will be easy to translate all this into instructions for a computer. Be sure to read to all programmers and designers who are engaged in dynamic 2D-games. I translated the terminology more in the sense: for example, position-locking - âtied cameraâ. Yes, and for many games until 1983, the version for Dendy is shown - a bit unhistorical, but we will forgive.
Introduction
')
While working on the game Mushroom 11 , I came across a lot of design and technical issues. I didnât expect someone to write about the vertex animation or smoothly changing the shape, but I was surprised that they practically didnât write about the work with the camera, the task with a 30-year history.
I decided to make a small journey through the history of two-dimensional games, to document their difficulties, approaches and the evolution of their decisions. 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 glossary.
Scroll
Scrolling or panning we call any attempt to show a scene that does not fit on the screen. There are many issues 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 scrolled smoothly and comfortably.
Although I will focus on 2D cameras, many of these common concepts also work for 3D.
Something from neurology
Before we consider the games, let's examine our senses in order to better know our vision and perception. So we can understand what is wrong with scrolling.
The central fossa is the receptor inside our eye, responsible for clear and detailed central vision. The second and third receptor belts, paraffhea and periphery, perfectly compress the image and movement in order to speed up identification - first of all, identification of familiar alarming forms and changes in the direction and speed of movement.
The image from the eyes goes straight into the amygdala, which provides a quick response, and at the same time into the visual cortex, which decodes the image. The brain can be trained - for example, to âtieâ changes in the periphery of view 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 keep its balance, while the eyes peer into the details.
When some people, like me, are reading in the car, acceleration, not supported by sight, leads to motion sickness and dizziness. But the opposite is also true: if peripheral vision catches changes in the background, and the vestibular apparatus says that everything is still - you are sitting at the computer - the result will be similar.
So contradictory 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 also noticeable in 2D games.
Attention, interaction and comfort
To help understand the scrolling questions, I highlighted three big questions in them.
Warning: teach the camera to show enough game information to navigate the game (what the player needs to see).
Interaction: make sure that the player can control what the camera sees, so that changes in the background are predictable and clearly tied to the playerâs controls (what the player wants to see).
Comfort: to facilitate and explain changes in the background (how to make these tasks elegantly combined, without creating inconvenience to the player).
Scroll nostalgia
We begin our journey from the 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, mostly from the last decade, because they have always demonstrated innovation, attention to detail and care that can be expected from independent artists - and working with the camera is no exception.
After action
All attention to the controlled hero.
Let's start with the simplest. In general, you, as a player, are fully responsible for your character. This dictates the attention that the game gives the hero when he leads his camera.
In the early 80s, scrolling was difficult, and the developer was confronted with limitations: processor speed, memory capacity, and memory segment structure. But even with these problems, wonderful scrolling games were released that elegantly fit into these limitations. True, the movement was often the simplest or jerky.
And it is amazing that in 1980, the game Rally-X overcame these limitations and presented a real two-axis camera. There was the simplest âtethered cameraâ mechanism: the car is always in the center, and the movement of the camera is completely predictable.
 Rally-X (Namco, 1980) | Attached camera : the camera always looks at the hero. Note. I invented 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 an attached camera is Kung-Fu Master , designed by Takashi Nishiyama, a designer who also made Moon Patrol , and later Street Fighter .
At the same time, another uncomplicated mechanism is visible, which I call âfocusing on 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) | Tied camera Emphasis on the edge : set a hard edge, beyond which the camera can not go. (The camera rests on the edge in almost all games, so we won't mention this technique anymore.) |
A tied camera is the simplest technique, but still useful. In the sandbox with handicrafts Terraria, the character is very small compared to the screen and jumps low, so the tethered camera not only works, but also gives a far view in all directions.
 Terraria (Re-Logic, 2011) | Tied camera |
Limit camera movement
Fewer unnecessary or unpredictable scrolls
How to avoid scrolling if it is undesirable? 30 years ago, scrolling had flaws: it was demanding of the processor, because a large piece of the screen was being redrawn. And even if it was possible to adjust it, the large pixels of that time made the scrolling non-floating. Therefore, the best approach was to scroll less. One way is to let the character walk through a window, and scroll if it goes beyond the window.
Jump Bug is considered by many to be the first platformer, although technically the player jumps constantly, you only need to control the height of the jump and the movement left-right. 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 window : move the camera as soon as the player hits the edge of the window |
The freewheel window solved the task, which for many developers and did not stand, and set the standard, followed by thousands of platformers. But there were also some questions: a player jumping higher and higher to the exit, too late notices 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 to develop the relationship between the camera and the mechanics. Free running 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. This eliminates the need for camera jerks.
The big drawback in this is that the enemies appearing from above are hardly noticeable, especially if Rastan is already somewhere at the top of a free window. And to move to the left (which happens in many castles) is generally inconvenient, too little is visible ahead.
 Rastan Saga (Taito, 1987) | Freewheel window |
The freewheel still appears in new games. See how the horizontal window in Fez is preserved when you rotate the measurements. And, in general, the axis of rotation is chosen such that the player remains in the window. The freewheel window in Fez is not an ordinary choice, and this is a great solution for such a unique game, and we will show it later. Vertically, this is the usual tied camera with linear anti-aliasing - we will explain this later.
 Fez (Polytron, 2012) | Freewheel (horizontal, retained when rotating measurements) Tethered camera (vertical) Linear smoothing (italicized terms are defined below) Geographical perspective Manual control (right lever) |
Return
We will return the camera to the place!
We have already shown how the freewheel window reduces camera movement. But, as we see in Jump Bug and Rastan , this also has disadvantages when the player is at the edge of the window. Here is one way to fix this.
Shinobi is probably my favorite classic game, and it has very high platform jumps. Designers have arranged a unique camera control: vertically, since there are many platforms, there is a very wide window of free running. And, as usual, the Ninja rested against the edge of the window - we immediately pull the camera. A high (or wide) window has a drawback: after a small jump, the player can get stuck at the top of the window, and very little is seen from above, as in Rastan Saga . And Shinobi slowly pulls the camera towards the player, keeping the whole thick of events in the frame and keeping the camera's sharp movements to a minimum.
 Shinobi (Sega, 1987) | Return of the camera (vertical): constantly reduce the "withdrawal" of the camera, pulling it to the player. Freewheel window (vertical) Tethered camera (horizontal) Static lead |
One of the new features invented in Super Mario World is the platform return. As with any free-run window, the camera stands still until the hero rests on the edge. But no matter how Mario jumps, he eventually lands on the platform, and when that happens, pull the camera towards him.
 Super Mario World (Nintendo, 1990) | Geographical perspective Platform return : the camera returns to the player as soon as he lands on the platform. Free running window (vertical, rarely triggered) Double anticipation (included in the threshold) Manual control (horizontally, with additional buttons on the remote) |
This is the first mention of the Miyamoto works, and certainly not the last. He understands the game and is attentive to the smallest details - and therefore he is a good gemdizayner, and not just because he is good at inventing the mechanics of games.
The same idea is seen in the very first Rayman . The top of the screen serves as the top of the freewheel window. Notice, the camera does not move when Rayman jumps - she gently pulls up when he lands. This is a smart decision, because the freewheel 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 the game design.
 Rayman (Ubisoft, 1995) | Platform return Free running window (vertical, rarely triggered) Geographical perspective Double lead Linear smoothing |
This technique works even now, not allowing the camera to move during jumps and centering it when the jump is completed - or when you left the free-run zone. Naturally, the platform return works when a character can get up on platforms. And if not, as in the jetpack in Awesomenauts , only the vertical free run is working.
 Awesomenauts (Ronimo Games, 2012) | Freewheel window (vertical) Platform return Tethered camera (horizontal) |
Smoothing
Avoid sudden changes in camera speed and heading.
We have already talked about the role of peripheral vision and how it affects visual comfort. Long ago, when we were small, and the pixels were large, even the simple movement of the camera looked like a jerk due to the large pixels.
 80's pixel Dendy: 256 Ă 240 resolution |  Modern indie pixel Contains many physical pixels |
How can we smooth the movement of the camera when we have a strict and coarse 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 the usual attached camera (some would say that any physics in the engine is actually pseudo).
Pac-Land - according to some, the first modern platformer. There are many elements in it that helped define the genre: jump on platforms, dodge enemies and pick up bonuses. As for smoothing, the speed there rises from 0 pixels / frame to 1, 2, 3, and so 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 need to scroll vertically, and that is where the main difficulties are - in fast acceleration and deceleration, when you jump and fall.
 Pac-Land (Namco, 1984) | Tied camera Static lead |
Shigeru miyamoto
Here I would like to take my hat off to Sigaru Miyamoto and show some of his first 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 very differently. In both, the player has very little scroll control. They are more like a room with a moving picture on the wall.
 Excitebike (Nintendo, 1984) |  Devil World (Nintendo, 1984) North America denied release |
In Excitebike there was a modern type of scrolling, depending on the speed of the motorcycle. Rather smooth, but not particularly affected by the game.
And in Devil World everything was built on scrolling. In this Pac-Man clone, you play a Christian dragon who fights the devil, and he constantly changes the direction of the scroll, pushing you closer to the edge. This is the only game that was never released in the US due to religious images, but, compared to the quality of his other works, this is a small loss. Although informative - and often inspiring - to see the first, less successful works of the master. Even the best artists are experimenting, and not all experiments succeed.
And now let's jump a year ahead. Itâs hard to exaggerate the brilliance of Super Mario Bros. The game itself is a simple movement from left to right horizontally. Moreover, it does not allow walking back beyond the edge of the screen, which is often in platformers (technically, this can be defined as a one-way freewheel).
 Super Mario Bros. (Nintendo, 1985) | Pushing acceleration zone : when the character is in the zone, gradually accelerate the camera until it is equal to the speed of the character. Freewheel (one-way) Static lead |
If Mario stepped back to accelerate, and then go out of the freewheel at full speed, the camera would accelerate from 0 to maximum in one frame, with a big 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 has to rest on the edge, the camera is already chasing him at full speed.
Metroid was an innovative game that created a new genre, combining jumping with research (in the brother of the genre Castlevania , by the way, was the simplest tied camera).
In Metroid, there was a biaxial movement, but only one axis at a time worked. He introduced another method of softening the camera: a character may come out of 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, as a result, a smooth camera comes out.
  Metroid (Nintendo, 1986) | Freewheel (horizontal / vertical) 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. |
The development of technology has given more pixels and faster processors, and this has affected the gaming camera. Now the camera could drive freely, without jitter, inherent in low resolutions - especially at low speeds, when it only moves 1 in a few frames.
Donkey Kong Country came up with many innovative camera solutions. He was one of the first to make a changing preemption (more on that later), as well as linear smoothing, which made the jumps very smooth.
 Donkey Kong Country (Rare / Nintendo, 1994) | Linear smoothing : continuously reduce the distance between the camera and the player using the linear interpolation formula. Tethered camera (vertical) Geographical perspective Double lead |
Linear interpolation is not such a great achievement. But it was this formula that became the standard tool for reducing camera jerking 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 smoothing technique. It works for slow characters as well as fast characters like Super Meat Boy . Only if the character is big and moves very quickly, the camera may not catch up with him, and the enemies will be hidden behind the scenes until the last second.
From the translator ...
This simple formula has a deep meaning. This is a solution to a differential equation.
y '(t) = âk ¡ y (t)
at k> 0 at time points t = 0, 1, 2, 3 ... Roughly speaking, the flight speed is proportional to the distance. I want to say "the camera is hanging on the spring," but the task with the spring implies acceleration (the second derivative).
y '(t) = âk ¡ y (t)
at k> 0 at time points t = 0, 1, 2, 3 ... Roughly speaking, the flight speed is proportional to the distance. I want to say "the camera is hanging on the spring," but the task with the spring implies acceleration (the second derivative).
 Super Meat Boy (Team Meat, 2010) | Linear smoothing Tied camera |
In 2014, the charming game Never Alone came out, and there are many different elements in it that we will explain later. Its smoothing mechanism takes into account the speed of the camera, so that the camera slowly takes acceleration, and then âfliesâ over the target point. The result was a smooth and organic flight, although it did not respond quickly to jerky movements.
 Never Alone (Upper One Games, 2014) | Physical smoothing : the camera - the physical body, constantly flying to the target point. Position averaging Cinematic rails Geographical perspective Perspective on object |
In terms of programming, linear smoothing is EaseOut, and physical smoothing is EaseInOut. If possible, use the SmoothDamp method [Unity engine function - Translator], or write your own version, which will take into account both the distance to the target and the speed.
If you use pixel-to-pixel shaders, you sometimes notice that your sprites are shifted by one pixel compared to other sprites or backgrounds - due to engine division errors. The game Hyper Light Drifter , executed in low-resolution pixel graphics, cleverly solved this problem. It renders an intermediate âcanvasâ in the game pixels, and then displays it on the screen at the desired scale, shifting depending on the fractional part. There are other interesting solutions there, we will talk about them later.
 Hyper Light Drifter (Heart Machine, not out yet) | Physical anti-aliasing (resolution of the game canvas is 720 Ă 480, but scrolling goes in the physical resolution of the monitor). Geographical perspective Management lead Perspective on object Camera gestures |
Cropping
We keep the most important thing in the frame
There is nothing to say about autoscrolling, 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 the few threats that appear behind.
 Scramble (Konami, 1981) | Autoscrolling : the player does not control the scrolling in any way, but has the full right to determine where to be in the frame. |
As we saw in Pac-Land , if the camera is tied to a player and moves back and forth with it, you can move the camera slightly forward. This will leave plenty of space to look ahead, but will not forget about the space behind. At the same time, it will indicate where to go, because we are striving towards the center.
Pac-Land (Namco, 1984) | Tied camera Static anticipation : more room for visibility in the main direction |
Move back yet. In early 1981, there was a scrolling-letalka, ahead of its time and inspired by a new genre - Defender . She provided a double lead, but almost no one noticed. 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 anticipation : when the player changes the direction of movement, the camera changes the angle and looks forward. |
Bonanza Bros. Is a delightful robbery game released by Sega for machine guns in the 1990s. It has a unique mode for two (cooperative, with a split screen), where two brothers work together to perform a robbery.
Of course, it is important for the robber to see ahead, and therefore there they made a double lead. But in order for the camera to reach for a new target, you need to take a couple of steps: it turns out smoothly, and the review is good. The camera moves approximately twice as fast as the player, which means: when a player is standing, the camera also stands. Look at the 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 part of working with a 2D camera. Look at how closely the camera was adjusted to the gameplay.
 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) |
Again, there are two camera angles, depending on which way the player decides to go. But if you suddenly need to 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 hover over a new point. It helps a lot, because turning left in SMW does not mean going backwards.
More recently, Cave Story used a double lead to move the camera left and right, depending on the speed. Almost the same as what we saw at Bonanza Bros. Only the camera goes to the right place slowly, if the player is standing, and quickly - if he moves.
 Cave Story (Studio Pixel, 2004) | Tethered 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 which buttons were pressed.
This is a great example of what I call âpre-emption managementâ: the player himself tells the camera where to move, depending on where he wants to go. Going to the left means you need to see more on the left. Releases the button - the camera returns to the center.
 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) |
The control lead can also reflect a more obvious point of lead, we see a lot of this in mouse-controlled games. In Snapshot, we solve puzzles by taking pictures of scene elements and setting them somewhere else. The pointer expands our view in the right direction - the camera is pointed at the middle between the player and the pointer.
 Snapshot (Retro Affect, 2012) | Ahead of management (midway between player and pointer) Linear smoothing |
Swapper has some interesting camera tricks that will be covered later. As for management, the target point of the cloning device resembles the direction of sight, and it is in this direction that the advance can be made. It works with any game where there is an independent aim weapon. The player can even go backwards and look forward, if he wants - very versatile, but you need to somehow control the camera.
 Swapper (Facepalm Games, 2013) | Management lead Physical smoothing Geographical perspective Perspective on object Cinematic rails |
In the Secrets of RĂŚtikon there are several interesting moments with the camera. As for the composition of the frame - there is anticipation of movement, with a simple extrapolation of the character's position based on the current speed.
In platformers, such a technique may not work, especially vertically: jumps and landings cannot be extrapolated reliably.
 Secrets of RĂŚtikon (Broken Rules, 2014) | Lead by motion : the camera chases the playerâs future (extrapolated) position Physical smoothing Perspective on object (position and scale depends on attractors) Gestures by the camera (certain actions cause a response from the camera, for example, in flight the scale decreases) Cinematic rails |
In Luftrausers , the camera is also interesting: to determine where to look, it is taken into account where the aircraft is looking (by control), where it flies (by movement) and other clues like water, ships and shells, which also attract the camera (see the next part âangle on the object ").
 Luftrausers (Vlambeer, 2014) | Anticipation of management and movement Physical smoothing Perspective on object |
The second part of
Source: https://habr.com/ru/post/272933/
All Articles