How to Camera System

Week 7

Gabe's Game

Its easy to forget how important camera systems are. In good games, you don't even notice them. If you're thinking about the camera system while playing, it's probably because it's annoying or disorienting. A good camera does two things: The first is to clearly show information in the world pertaining to gameplay. The second is to move as seldom and as smoothly as possible because brains get pretty confused when presented with the illusion of movement.

As a disclaimer, I have worked as a designer on multiple shipped titles. Not a programmer. I've never actually done the legwork on a camera system, but how hard could it be?

I started with a horizontal camera movement set up similar to Mario. 

If the player is outside of the inner lines, they are pulled toward the nearest inner line. This works alright, but the player is much too close to the edge of the screen. If an enemy were to appear in the direction the player is traveling, they wouldn't have an adequate amount of time to react to it. 

These new blue lines work similarly to the inner white lines I had before however, the blue lines now pull in toward the center when the player is outside of them. This pulls the character to the center of the screen as they pick up speed. If the player stops moving, the blue lines snap to their original position. Allowing the player to move freely when they're near the center of the screen without jerking the camera around. 

The white lines on the outside represent the furthest the character can move before the camera snaps to the player speed. This keeps players from being pulled off screen when pushed by a fast moving objects. It's really important that the character is never off screen in combat because dying without knowing why is the absolute worst. 

As one might imagine, the camera bounds are relatively to the camera zoom. This means more space for the player to move around before the camera has to move. As previously mentioned, the less camera movement, the less disorientating. 

What progress we have made! the camera smoothly follows the player and does a good job of keeping them near the center of the screen. Even having never programmed a camera system before, I made quick work of this. May as well make vertical movement work the same way.

Noooope. the same system applied to vertical movement looks awful while wall jumping. Since the player is moving up and then back down quickly, the cameras only being pushed up bit by bit. Inconsistent, abrupt camera movement is really uncomfortable, especially in a game about wall jumping. I'm going to need something smoother. 

I would include a picture of butter for the simile, but this post is already image heavy. There are two things I should mention. My horizontal movement system conveniently prevents the camera from jerking horizontally as players propel themselves off the wall. I also keep the camera from moving up when the player jumps while standing on the ground. Pulling the camera up then back down is, unfortunately, common in games. I'd say it can be done tastefully, but is more often than not a poor practice. If there is anything immediately above me worth seeing, I shouldn't have to jump to see it. If there isn't, why move the camera?

I think I'm done, now to test in a more realistic environment. 

Shit... If I had a better test environment set up from the get-go, I would have noticed the above problem earlier. My vertical movement system is meant to prevent the player from crossing the bottom blue line. The issue is, if ever the player is above an enemy, they likely won't see it. This sort of thing leads to keyboard-smashing frustration as players unwittingly fall to their death. 

a short and gentle pull toward the center of the screen helps make the whole play space easier to understand. This pull only activates when the player is touching the ground, so my smooth wall jumping camera movement isn't affected. 

Here is what the final result looks like. 

The eye thing at the end is an example of the camera targeting a point of interest when in range. I plan to use this to occasionally focus on important objects and lock the camera during battles in smaller rooms. Anyway, that's a wrap. 

Please don't try and copy this system. Every game requires a camera that works best for that game's specific gameplay. If you'd like an in-depth guide to camera systems throughout the history of gaming, I encourage you to check out this awesome GDC talk by Itay Keren, of Mushroom 11 fame.

William's Comment: Hard for me to think up a really consistent and coherent rebuttal because after reading this through a couple times I just had one thought:

"Neato cheetoh"

That's my way of saying "It's all good in the hood."  So instead I'll just add a couple small notes.

1. This is my only real gripe with your example so far: the way that the camera occasionally overshoots the target after a lot of scrolling and then meanders back into view looks a bit clunky.  I think that if the vertical and horizontal movement were more smoothed out and give more of a feel of the camera focal point trying to magnet to or orbit the player it won't be as distracting to me.  But I think you're really close to having something perfect.

2. You mentioned that a camera that follows closely while the player jumps up a wall is disorienting or jittery, but I think that with enough smoothing and parallax in the background, it can still feel smooth and fun rather than distracting.  If you want to see how huge a difference these elements can make in how smoothly a camera movement looks, just look at this example I recorded from Jazz Jackrabbit 2:

You'll notice that when the level is just blocked out in black and orange, movement seems lacking.  When the level tiles have textures added to them, the eye has a bit more to grab onto to track movement, but things still seem a bit jittery.  In the final pass, the background details add a lot to make camera movement feel smooth by having layers of incremental movement cushion each move.

Anyway, that's all I really have to add.  Just some more fun ways to approach camera.  I hope this helps as you continue to add detail to your world and consider the way that the camera interacts with that development.

There are so many approaches to game cameras, so we would love to hear about your methods. Let us know in the comments!

If your interested in these posts, click below for a weekly notification when they go up!