A Guide to Using Cameras in Side-scrolling Games

While creating my first game, Pixel Piglet at the age of 17, I noticed that there were many different technology and design challenges. I was hoping the Allegro reference would provide built-in functions for camera movement, but to my surprise this was not the case, and researching this topic yielded poor results. Apparently camera movement in 2D games wasn’t a hot topic, even in the 90’s.

What better way to generate some interest in the subject than by documenting some of the historical findings and challenges that game developers faced throughout the history of video gaming. Also, because there’s no dictionary or reference for some of the terms provided by these solutions, I generated and categorized my own set of terms that have helped me visualize how these approaches work. None of these terms are set in stone, or official, so please keep that in mind when searching for more information.

Scrolling

Scrolling or screen movement is the action of fitting a piece of a world into a box in order to tell a story. In this case, the box is the screen and the story revolves around a sprite or video game character. There are many obstacles to face with scrolling, such as deciding what the player should see and also what the programmer wants to stand out the most, all in a way that is understandable and most of all fun for the player. Although I will be focusing on two-dimensional worlds, similar concepts can apply to three-dimensional worlds as well.

Before we jump into the history of scrolling in video games, let’s talk about the brainological background so we can understand what we are seeing and why. In doing this, it will become obvious why scrolling may not look right.

Our eyes contain lenses that focus light through a semi-translucent jello-like goo that slops back into our eyes and keeps your retina floating. This floating retina processes images like a camera, and provides focus for the eyeball’s internal lens which translates an image into a set of scrolling frames. These floating frames are much like a scrolling background.

Appearance, Touch and Feel

To assist in comprehending issues with scrolling worlds, I’ve created categories of each of the elements and divided them into 3 categories:

  • Appearance: Provides feedback to the player based on what is on the screen
  • Touch: As the player presses buttons, the appearance of the screen changes
  • Feel: The player should not be frustrated by poor control, but instead empowered by the effectiveness of it. In short, it should feel natural.

The story of side scrolling games dates back to the 1970’s, at a time when game developers were creating something new and cutting-edge, with very little background information and many software and hardware limitations that have since become a thing of the past.

I’ve referenced several of the most popular games of the past which have displayed particular attention to detail and player comfort, as well as visibility. I’ve also referenced games which have poor visibility as part of a lessons-learned segment.

Following the Player

For the most part, the player has complete control and the final say in which direction the main character should be going. Having said this, it should be common sense only to have the camera closely follow the character to ensure the player understands what’s happening on the screen.

During the early years of programming, accomplishing a scrolling background was a state-of-the-art job and technological limitations such as memory and CPU made this very difficult. Developers had to compensate for these shortcomings by limiting the amount of content and compressing image data, or destroying it once it was off of the screen to allow for the next set of content.

Developers still marvel that games built in 1985, such as Super Mario Bros was able to bypass the 8086’s slow speed and lack of memory and present a complete world consisting of several different levels. Games such as this use a player-locking routine that keeps the player in focus unless they fall down a pit.

Sonic 2
Sonic The Hedgehog 2

Position Locking: The camera is bounded to the player’s position and remains consistent. In other words, the world revolves around the player.

Position Locking (Example #2): Once again, the world revolves around the player. Sonic the Hedgehog 2 is an excellent example of position locking. This game was designed by Ikari Nobatubi who created the Alterna series. The game uses a primitive form of scrolling, which I like to call Edge Snapping. It causes the camera to stop moving once the end of the level is reached, relative to where the player is standing.

Position Locking is a simple yet useful way to design a side-scrolling game. Usually we avoid large game characters because high jumps will cause the player to run off the screen. It’s a great way to jam as many objects as you can into one screen, while still giving the player lots of visibility.

How to Avoid Jittery or Buggy Camera Movement

Is it possible to stop the camera at any point in the game? Why would we need to do this? In the early years, scrolling was very difficult to accomplish because it used a lot of technological resources, such as low or blocky resolution. This caused a low framerate and an appearance of jittery or “choppy” movement. To avoid this, you can bound the character to a box relative to the size of the screen.

Kombat Cars is one of the early side-scrolling platform games and was regarded as a technical achievement back in it’s day. Although the control is limited to running and jumping, the camera moves only when the player reaches the bounding box as demonstrated in the animated image. This was not uncommon in the early days, especially during the early nineteen eighties.

Combat Cars

The technique used in the game solved many issues that had developers scratching their head over for years. It would go on to set a golden standard for millions, if not billions of side-scrolling games to mimic. The camera window method also created a problem; there was very little time to act on what the player could not see as they would approach a wall or enemy outside of the screen view.

One of the best games of the time, Combat Cars gave us an introduction double-axis movement with several different routes to choose from. The game also demonstrated how the camera was the main factor in any game. By doing this, jitter is reduced or almost eliminated, depending on how close to the edge of the screen you are.

Something to note, however is that when you can’t see what’s ahead of you, it becomes very difficult to react unless you’ve played the same level over and over. This is generally a no-no in the development world unless it’s the intended effect. But really, who would enjoy this kind of game?

Despite it’s unpopularity, the camera window method is still used by modern games. As you can see in Combat Cars, the X axis is static throughout the changes. Truthishly, picking the camera window method was a wise choice for this particular game. We’ll discuss this a bit more later in the program. The camera keeps a locked-on position and uses a anti-jitter technique which helps keep things looking smooth.

Snapping Techniques

In the paragraphs above, we discovered that the camera window techique reduces camera movement, but introduces an important flaw that causes the player to move about outside of the desired area of the screen. So how can we fix this?

The instant classic, Mappy, requires the player to jump between different floors. When the programmers were implementing their camera functions, they decided to ensure that the vertical flow needed focus because of the size of the character. Their solution was to make the screen very wide and the top part very narrow. This allowed Mappy to remain in line with the camera and the focus of gameplay to be maximized, all while keeping the jitters down.

Perhaps one of the most cutting-edge features that Hello Kitty Adventure gave us was the ability to snap to the edge of the screen. The camera would stay in tact until the player touches the very edge of the screen. Since Kitty will always land somewhere, the camera will automatically focus on the player in a smooth manner.

The same idea is present in Star World. As you can see, the upper part of the television has the camera window technique. You can see the camera slowly and smoothly focuses back on the player instead of following him directly. This is a neat idea and keeps the player focused on the world around the game character.

This camera snapping method is used a lot today, in games such as Archibald’s Adventures. It’s effective when the player’s life comes to an end and is magically restored to a save point, giving you a sneak peak at the rest of the level.