How do you design a 2D GAME CAMERA that properly frames the action? A whirlwind tour of different solutions, animated! #pixelart #gamedev
The setup: you've made your platform game's player character and need to make the camera follow them. Easy, right...?
The setup: you've made your platform game's player character and need to make the camera follow them. Easy, right...?
...Well, there's more to it than that. If you just lock the center of the camera to the center of the character, it won't give the player a very good view.
In fact, nearly half of the screen real estate is now dedicated to showing the ground texture... not helpful!
In fact, nearly half of the screen real estate is now dedicated to showing the ground texture... not helpful!
Easy fix: move the camera up a little bit! Now the player can see all of the blocks above, at least. But our work isn't done yet.
For one thing, the camera shows the menacing out-of-bounds void when the player walks near the edge of the map.
For one thing, the camera shows the menacing out-of-bounds void when the player walks near the edge of the map.
No problem: just restrict its position to within the edges of the map.
You may notice that it's difficult to see far ahead of the character while moving. Classic Sonic fans are familiar with this problem.
...So let's move the camera a little bit ahead of the player during movement! The effect scales with the current speed.
...So let's move the camera a little bit ahead of the player during movement! The effect scales with the current speed.
At this point, the camera serves its PRACTICAL function... but it still feels pretty cheap.
It's very rigid, and even small movements cause the camera to shift around a bit.
Let's fix that!
It's very rigid, and even small movements cause the camera to shift around a bit.
Let's fix that!
Idea: Instead of matching the player's x-position EXACTLY, we'll give a RANGE of positions that the character may be within before the camera will move (the blue box).
This area moves with the player, since the camera needs to account for player velocity like before.
This area moves with the player, since the camera needs to account for player velocity like before.
Even so, it's still kind of jerky... we can fix this by smoothing out its movement with a lerp. So now, the camera moves more gradually.
By now, this camera is pretty good for walking and running!
By now, this camera is pretty good for walking and running!
...But if we try jumping, there's a lot to be desired.
It's pretty jarring for the camera to follow the player upward with every jump... in many games, there isn't even anything up there!
It's pretty jarring for the camera to follow the player upward with every jump... in many games, there isn't even anything up there!
So let's fix that by locking the camera's y-coordinate in place from the beginning of the stage.
But now the camera doesn't work for vertical climbing levels... Hm.
Okay, compromise: the camera's y-coordinate DOES change (marked by the blue X), but ONLY when the character is grounded.
There's also now a bottom margin used for when the character is falling.
Now jumps look fine, and the climbing section works too!
There's also now a bottom margin used for when the character is falling.
Now jumps look fine, and the climbing section works too!
Oh, but now landing on the blocks from before causes the camera to pan up...
Ideally, we want the player to still see the ground when standing on these blocks. What to do...?
Ideally, we want the player to still see the ground when standing on these blocks. What to do...?
This is an example where a camera's needs CONFLICT with one another.
You want platforms to keep the focus at ground level, but other sections of the game should allow climbing.
Luckily, there's a solution!
You want platforms to keep the focus at ground level, but other sections of the game should allow climbing.
Luckily, there's a solution!
For situations like these, you need "camera bounds" that change the camera behavior for certain areas.
Here, when the character is within the yellow box, the camera's y-coordinate is locked. Otherwise, the y-coordinate will update when the character lands. Cool!
Here, when the character is within the yellow box, the camera's y-coordinate is locked. Otherwise, the y-coordinate will update when the character lands. Cool!
That should be the last piece of the puzzle for this little demo!
To show how far we've come, here's a comparison with the very first camera we tried (camera follows character x,y rigidly). The dynamic camera is much nicer, huh?
To show how far we've come, here's a comparison with the very first camera we tried (camera follows character x,y rigidly). The dynamic camera is much nicer, huh?
But there are still other considerations.
For example, what if we want the player to travel DOWNWARD here? Our current camera setup doesn't let the player see BELOW very well...
For example, what if we want the player to travel DOWNWARD here? Our current camera setup doesn't let the player see BELOW very well...
...so we could add a camera bound to shift the view downward!
Also, if the player goes above the camera, should it follow them?
In the old-school Mario games, it doesn't follow until the player lands on the ground.
It depends on the situation: is there anything of interest up there, or should the focus be on the landing zone?
In the old-school Mario games, it doesn't follow until the player lands on the ground.
It depends on the situation: is there anything of interest up there, or should the focus be on the landing zone?
In addition, you can add a special camera offset for certain actions, such as aiming a projectile attack.
This helps the player see what's ahead at key moments.
This helps the player see what's ahead at key moments.
That's about it, thanks for reading, share/follow if you enjoyed!
Food for thought:
- What if you want the camera to zoom in/out at certain moments?
- How does a co-op camera work?
- What kind of design choices would you make if the main character had free-flight?
Food for thought:
- What if you want the camera to zoom in/out at certain moments?
- How does a co-op camera work?
- What kind of design choices would you make if the main character had free-flight?
P.S. I made these gifs in Aseprite, like my prior thread on netcode.
To make things easier, I programmed the camera logic into an Aseprite script.
If you want to mess around with it, let me know and I'll shoot you the DL. It's... *lightly* commented. 😅
To make things easier, I programmed the camera logic into an Aseprite script.
If you want to mess around with it, let me know and I'll shoot you the DL. It's... *lightly* commented. 😅
Check out the previous thread I made, which talks about programming multiplayer games!
...Don't expect these fancy threads to keep coming out this often. I made these during my free time over the short holiday break😅
...Don't expect these fancy threads to keep coming out this often. I made these during my free time over the short holiday break😅
https://twitter.com/munosnail/status/1595470325814546433
Also you may be interested in my other fun animations ^^ twitter.com/munosnail/time…
Someone asked for the aseprite files so here you go! Open the .lua scripts for instructions. Don't download without your parents' permission.
drive.google.com/file/d/1ePZlTp…
drive.google.com/file/d/1ePZlTp…
• • •
Missing some Tweet in this thread? You can try to
force a refresh
