CaddieOpen in CaddieDownload for Mac

How to Make a Good 2D Camera

Shared by Caddie Library · Updated
Game Maker's Toolkit11:38Open on YouTube
Chapters show their main points

The bottom line

A good 2D camera does more than follow the hero: it looks ahead, ignores jumps, smooths its motion, frames key moments and adds juice. No single camera fits every game, so the design must match the game being made.

Key takeaways

  • A camera pinned to the character is jittery, jumpy and short-sighted. 0:12
    • A centred hero uses only half the screen for what is ahead, so the camera should focus on what is coming up.
  • The camera should show the player what they need to see. 0:26
    • Cave Story offsets the view in front of the player, and Nuclear Throne centres the camera between the character and the cursor.
  • The camera should not follow every jump. 3:06
    • Donkey Kong Country: Tropical Freeze moves the camera only after a landing on a higher platform.
    • Shovel Knight levels are as tall as the screen, so the camera never moves up or down.
  • Damping smooths the camera so it ignores small movements. 5:06
    • Easing toward the character's position avoids erratic, jerky motion. Fez adds a dead zone where the character moves freely.
  • Framing and juice make the camera part of the game's feel. 6:21
    • Insanely Twisted Shadow Planet averages the position of the ship and key areas, and Celeste shakes the screen along the dash direction.
    • Screen shake can bother some players, so offer an option to turn it off.

There's no such thing as a perfect camera that works for every game. It depends entirely on the thing you're making.

Game Maker's Toolkit

Chapter summaries

0:00 Intro

Pinning the camera to the hero is the obvious first move, and it makes a poor camera.

  • A camera glued to the main character needs fixing. 0:06
    • Every 2D game needs a camera to frame the action.
    • Besides the jitter, a pinned camera is boringly static.
    • Five quick tips follow, and each one fixes a flaw of the pinned camera.
    • The tips are lookahead, jumping, damping, framing and juice.

0:26 Lookahead

Shift the camera ahead to see what's coming
Games like Cave Story and Sonic Generations move the offset with the player's direction or speed.

The camera should spend its screen space on what is ahead of the player, not behind.

  • Zooming out or shifting the camera ahead of the hero shows more of what's coming. 0:48
    • Zooming out keeps the hero centred and still shows the way ahead.
    • A fixed offset is enough for endless runners.
    • A game with left and right movement must change the lookahead with the direction of travel.
    • Cave Story keeps two camera positions and glides slowly from one to the other when you turn.
  • The best lookahead follows what the player is doing. 1:37
    • New Super Mario Bros. U leans right, but swings left of Mario once he backtracks for a while.
    • Sonic Generations moves the camera further in front of Sonic as his speed builds, up to a maximum.
    • Hyper Light Drifter offsets the camera a few feet in front of the hero's head, whichever way he faces.
    • Luftrausers leads the camera only while the throttle is held, so stall-and-swing-around shots keep the prey in view.
    • Enter the Gungeon, The Swapper and Hotline Miami frame the action in similar ways.

3:06 Jumping

A platformer camera should stay calm during jumps and move only when the level needs it.

  • A camera that chases every jump makes players queasy and hurts their timing. 3:09
    • Platformers are all about jumping, so a pinned camera moves constantly.
    • Platforms can vanish beneath the screen when the camera lurches upwards.
    • The movement also makes it hard to line up perfect jumps.
    • There are two main fixes: ignore jumps in the code, or design the level around them.
  • The code can ignore jumps and track vertically only in certain cases. 3:31
    • In Tropical Freeze the camera breaks its own rule while you climb ropes or swim, and moves up and down freely.
    • Rayman Legends tracks up only in predetermined areas where the level goes beyond the frame.
  • Level design and offsets can remove the need for vertical movement. 4:15
    • A level that fits in one screen needs no camera movement, which suits precision jumping.
    • Placing the hero nearer the bottom of the screen gives more vertical room.
    • The two axes needn't behave alike: left and right can work differently from up and down.
    • Less need to move up and down means a steadier view.

5:06 Damping

A little damping makes a camera feel polished
PinnedDampingDead zone
Follows heroExactly, every frameEases toward heroOnly past the window
Small movementsShows every twitchSmoothed outIgnored
Main riskJerky, erraticHero gets ahead of viewHero far off-centre
Good fitChoppy retro 8-bit feelMost gamesZoomed-out views (Fez)
Each fix has a cost: damping can let the hero outrun the view, and a dead zone pushes the hero off-centre.

Letting the camera lag slightly behind the hero makes it smoother, but too much lag has a cost.

  • A camera that tracks perfectly feels erratic. 5:09
    • It reacts to every small movement, however tiny.
    • The jerkiness is worst when making precision movements to line up a jump.
  • Too much smoothing leaves the hero ahead of the camera. 5:35
    • A slow camera leaves even less screen for looking ahead.
    • A dead zone is the other cure, and the character can roam inside it without moving the camera.
    • In Fez the dead zone leaves the character well off-centre when walking, but the camera is so zoomed out that it doesn't matter.
    • A very responsive camera suits retro titles that want a choppy 8-bit feel.
    • Otherwise even a tiny bit of damping makes a game feel smoother and more polished.

6:21 Framing

The camera should usually stay on the hero, but it can move, zoom or stop to frame other things.

  • The camera can pull the player's eye to important objects or scenes. 6:37
    • Disney Illusion Island zooms out and settles on a fixed view for a tricky platforming or puzzle area, then returns to tracking.
    • In Insanely Twisted Shadow Planet, key areas such as checkpoints and puzzle zones have a sphere of influence. When the ship enters it, the camera finds the average position of the ship and the area.
    • Pyre zooms and moves so the active character and the ball both stay prominent, since they matter equally.
  • Moving or zooming the camera for effect gives a cinematic feel. 7:34
    • Inside normally tracks ahead of the player, but shifts for a better view of the attackers when a pack of rabid dogs chases you.
    • GRIS sometimes frames the hero tightly and sometimes draws far out to show the grand scale of a building.
  • Blocking the camera from some areas keeps the frame on relevant things. 8:01
    • Spelunky levels sit inside an impenetrable rocky border, and the camera may not go far into it.
    • Locking off that zone leaves more of the frame for what matters to the gameplay.

8:16 Juice

Camera effects such as shake, freezes and zooms make a game feel more exciting and alive.

  • Screen shake sells explosions, impacts, struggles and heavy monsters. 8:23
    • You can tune both its intensity and its direction.
    • Celeste wobbles the camera in the direction of Madeline's dash, which sells the speed and power of the move.
  • Hit stop adds a tiny freeze frame that makes hits feel stronger. 8:48
    • In Katana Zero, killing an enemy freezes the action for a split second.
    • The camera still shakes and particles still ring out, but the action is frozen before it restarts.
    • Hollow Knight stalls the camera for a long time when the player takes a hit. This makes the mistake register and gives a moment to recover.
  • A short zoom or move can add excitement to key events. 9:33
    • In Dave the Diver, landing a catch zooms in on the battle between Dave and the fish, then returns to normal.
    • Fast shaking and moving can trouble some people, so an option to turn off screen shake is a nice touch.

9:55 Conclusion

A camera's core job is to keep the hero on screen, and the techniques above let it do much more.

  • Each camera technique answers a different need, and the game decides which ones to use. 10:26
    • A slow, pensive platformer needs a very different camera from a twitchy, erratic arcade thrill ride.
    • Platformer Toolkit has a camera panel where you can tweak damping, zoom, lookahead and whether jumps are ignored.

In the growth library

Mark Brown, creator of Game Maker's Toolkit. A 2D camera should do far more than stick to the player: it should show what is coming, ignore jumps, smooth its motion, frame important things, and add juice. The tour of Cave Story, Donkey Kong Country: Tropical Freeze, Fez, Insanely Twisted Shadow Planet, Celeste and Hollow Knight shows how each camera rule fits its game.

More from Game Maker's Toolkit · The whole library, and ask it anything

Transcript174 lines
Intro 0:00
0:00

Okay - let's say you're making a 2D game and you need some kind of camera to frame the action. No problem - just pin the camera to the main character, right? Wrong! Do this and you'll have a camera that's jittery, jumpy, short-sighted, and boringly static. So let's fix it. Here are five quick tips for making a much better 2D camera.

Lookahead 0:26
0:26

First, let's talk about lookahead. Basically - if you keep the character in the middle of the screen at all times then you're dedicating just half of the display to the stuff that's in front of you. No surprise, then, why this happens so often... So it might be better to focus more attention on the stuff that coming up, and ignore the stuff behind you. And there are a few ways to do it. The simple solution is to simply zoom the camera out further.

0:52

That means even if the hero is dead centre on the display, you can still get a good view of what's to come. A more involved solution, though, is to shift the camera in front of the character. If you can only move in one direction it's enough to simply offset the camera from the main character. That's great for endless runners and the like. But if the player can travel both left and right then you'll need to adjust the lookahead based on the direction of travel.

1:18

So in Cave Story there are two camera positions - one when you're moving left and one when you're moving right. They're both offset in front of the player, which is perfect for a game about shooting targets in front of you. When you swap direction, the game slowly glides to change from one position to the other. New Super Mario Bros. U does something similar. The camera is naturally biased on the right side of the screen, ahead of Mario.

1:45

But if you start to backtrack for a short period of time the camera will realise, catch up, and swing further left of Mario. And in Sonic Generations the camera reacts to Sonic's speed. It settles on the hedgehog when he's stood still, but it moves further and further in front of him as he picks up momentum - until it reaches a maximum position. This is not just for platformers, though - in Hyper Light Drifter, the camera is offset a few feet in front of the hero's head so no matter which direction you're facing, the camera will frame what's coming up.

2:18

And in Luftrausers the camera tracks in front of the player's plane - but only when the throttle is held down. That makes it possible to do those sexy stall-and-swing-around shots, without losing sight of your prey. It's even easier to do this if the player has a method for aiming, like in Nuclear Throne. By centring the camera somewhere between the character and the cursor, you can get a better look at the enemies you're shooting at.

2:42

It's a very natural way of responding to the player's intention and framing what they obviously want to see. You can witness similar stuff in bullet-based roguelike Enter the Gungeon, clone 'em up puzzler The Swapper, and blood-soaked rampager Hotline Miami. Basically - ask yourself "what does the player really need to see"? And then make sure the camera isn't hiding it.

Jumping 3:06
3:06

Next up - let's talk about cameras and jumping. Because if you pin the camera to the character then it's going to move the screen every time you jump. And if you're making a platformer - a genre that's all about jumping - that's a lot of camera movement. This can make the player feel nauseous, and make it hard to line up perfect jumps - especially if the platforms disappear beneath the camera when you lurch upwards. So, there are two main ways to help with this.

3:31

One is to ignore jumps until the player reaches a certain elevation. In Donkey Kong Country: Tropical Freeze the camera doesn't react to DK's leaps - ensuring that the ground stays in the same position at all times. However, when you land on a sufficiently high platform, the camera tracks up and sets a new baseline to work with. This means that the camera moves when you've landed, rather than shifting mid jump. The camera can break these rules in certain circumstances, like when you're climbing a rope or swimming - now it moves up and down freely.

4:04

Rayman Legends is similar: the frame doesn't need to lurch up when Rayman jumps. It can just track up in certain, predetermined areas where the level goes beyond the frame. The other way to fix this is through the level design itself. In a game like Shovel Knight, the levels are designed with a maximum height - which just so happens to be the exact height of the screen. This means that the camera only needs to track left and right, but never needs to move up and down - allowing the camera to stay still for jumps.

4:35

Go even further and you can keep the entire level in a single screen, which means the camera doesn't need to move at all. Which is perfect for precision jumping. It also helps to offset the camera vertically, so the hero is closer to the bottom of the screen. This gives more vertical space to play with and less need to move the camera up and down. But perhaps the best tip to remember is that you don't need to treat both camera axes equally - it can do completely different things when moving left to right, and when moving up and down.

Damping 5:06
5:06

Next - let's talk damping. If the camera perfectly tracks the character then it's going to react to every single movement, no matter how small - and that can lead to a camera that feels erratic and jerky. Especially when making precision movements to line up a perfect jump. One solution is to use damping - simply have the camera ease between its current position and the character's position. This will make it follow events more smoothly, and won't immediately respond to small shifts in position.

5:35

Though, be aware: if the camera is slow to catch up to the player's movements you can end up with moments where the character is actually in front of the camera, leaving even less screen real estate for looking ahead. Another solution is to impose some kind of dead zone. In Fez there's an invisible window where the character can wander around freely without the camera moving at all. But if you push beyond that window, the camera shifts.

6:00

This does mean that the character will be far beyond the centre of the screen when walking - but the camera is so zoomed out in this game that it doesn't really matter. So super responsive cameras can be good for retro-inspired titles that want to capture that choppy 8-bit feeling, but otherwise even a tiny bit of camera damping can make things feel more smooth and polished.

Framing 6:21
6:21

Now, the camera should usually be focused intently on the character - but you'll sometimes want to frame other things, too. So don't be afraid to move, zoom, or halt the camera. For instance, you can use the camera to draw the player's attention to certain objects. In the game Insanely Twisted Shadow Planet, key areas like checkpoints and puzzle zones have a sphere of influence around them. If the player's spaceship enters the sphere, the camera is told to find the average position between the key area and the spaceship - framing both on screen and adeptly drawing the player's attention.

6:55

The camera can also temporarily frame a scene. Disney Illusion Island typically just follows Mickey's movements, but it can also zoom out and settle on a predetermined position to completely frame a tricky platforming section or puzzle area. When the player leaves, it goes back to normal tracking. The camera may sometimes need to follow multiple things, too. In the fantasy basketball RPG Pyre, the current character is equally as important as the ball - so the camera zooms and moves in an attempt to make sure both are prominent on screen simultaneously.

7:29

You may also want to move the camera for dramatic, cinematic-style framing. In Inside, the camera usually just tracks ahead of the player like a normal platformer - but at key moments, like when you're being chased by a pack of rabid dogs - the camera moves for a better view of your attacker. You can also zoom the camera in and out for effect. In GRIS, the camera sometimes tightly frames the hero, and sometimes draws right out to reveal the grand scale of a building.

7:58

And you can also restrict the camera from looking at certain things. Spelunky levels are surrounded by an impenetrable rocky picture frame - and the camera is forbidden from going too far into this zone. By locking off this section it means more of the frame can be focused on stuff that's actually relevant to the gameplay.

Juice 8:16
8:17

Finally, the camera can also be used to add juice. To make the game feel more exciting and alive. For starters there's screen shake. The ancient art of simply... wobbling the camera around. This can be an effective way to sell an explosion, an impact, a frantic struggle, or a heavy-footed boss monster. You can tweak the intensity - and also the direction. In Celeste, the camera wobbles in the same direction as Madeline's dash, to really sell the speed and power of her special move.

8:48

There's also hit stop. This is about adding a small freeze frame to the game - which can subconsciously increase the impact of an action. Check out Katana Zero - when you kill an enemy the action freezes for a split second. The camera still shakes and some particle effects still ring out - but the action is frozen in time, before starting back up. When playing at normal speed this small hitch in the action makes every hit feel more impactful.

9:15

In Hollow Knight, the camera stalls for a long time when you, the player, take a hit - which makes sure you register the mistake, and gives you a brief moment to collect yourself. And finally, the camera can move and zoom for a short period to add further excitement. In Dave the Diver, when you land a catch the camera will suddenly zoom in and frame the epic battle between Dave and fish, before returning to normal. All of these techniques add juice - but quickly shaking and moving the camera can be troublesome for some people so providing accessibility options - like turning off screen shake altogether - is a nice touch.

Conclusion 9:55
9:55

So to wrap it up - the camera's job is ultimately to follow the main character and keep them on screen at all times. But it can do so much more than that. It can look ahead to focus on upcoming challenges. It can ignore jumps to avoid endless movement. You can add damping to smooth things out. Use special rules to feature and frame important events. And make quick adjustments for impact and effect. But remember that there's no such thing as a perfect camera that works for every game.

10:26

it depends entirely on the thing you're making. A slow and pensive platformer needs a very different camera to a twitchy, erratic arcade thrill ride. But hopefully these tips give you some good ideas for your own camera. You can play with some of these concepts yourself in my interactive video essay Platformer Toolkit, where you'll find a whole panel dedicated to the camera. You can tweak the damping, zoom in and out, add some lookahead, and choose whether or not to ignore jumps.

10:54

And if you want to find out how to implement this stuff yourself, check the description to find links to resources that provide more practical programming tips for coding the camera in your game. Thanks for watching and I'll see you soon!