Little Ninja Dev: Smart Camera movement

• By Yuan-Hao
• 9 March, 2013
• 4 Comments

“Unofficial” artwork by Yuan-Hao

A lot of devving has been done in these weeks — essentially, most collisions have been resolved by Alejandro, and we now have generic sprites (which can be bosses, bullets, and the Ninja himself) that interact with a Physics class, which makes programming for us much easier.

(Oh and, my above sketch has nothing to do with the post, but I thought it would add a nice touch :) it’s unofficial artwork though — if you can call it like that, since I am not the official Yuan Works artist. I did work as a pixel artist many moons ago and designed most of the W&W manual though!)

Types of Cameras

On to the Game Camera, I wanted to emulate what I have seen in most classic 2D platformers before thinking about our own game camera, so I nailed four types of cameras for now:

First three types are pretty straightforward. Last case — the Smart Cam is the one I wanna talk about, but let’s see how the Centered Cam looks first:

Camera will try to keep the target centered. Only thing you have to be careful is if the sprite is at ”edge” or boundary of the stage, in which case the camera shouldn’t move. Something like this will do (click to see the code):

If you’re doing a basic platformer, I recommend implementing this camera first, as this may be enough for what you want to do or test. Metroid Zero Mission on GBA almost exclusively uses this camera (except for secrets and some other minor details). You may notice that when the player is at the boundary, the camera won’t keep him centered, it will adjust to the left-most upper pixel of the Stage.

Some stuff may arise with this type of camera:

1. Even if you move a little, the screen will scroll (scrolling doesn’t look so good in small screens sometimes)
2. When the target sprite is running too fast, it’s hard to keep track of what’s coming
3. It’s hard to hide secret areas on the map (think of DKC or any Metroidvania)

#1 and #3 are harder to solve, so let’s solve #2 first…

Forward Camera: Look ahead!

As  most enemies will come facing you, rather than from behind (well, it’s a Ninja, so who knows!), this camera will always show a bigger area in the direction which the player is facing. Here’s how it looks:

In this case, the camera will follow the direction the Ninja is facing, and will show 96 pixels forward, so 60% of the screen will be in front. However, note that this introduces another variable, you will need to have a scrolling speed, because if the screen scrolls too fast, you’ll get dizzy pretty quickly <^^< , so you’ll need to keep a scrollingDestination(x,y) and a scrollingCurrent(x,y) coordinates. This is how the scrolling code looks:

This solves issue #2, however, if you quickly turn left and right, the screen will scroll like crazy, something that, again, can be undesired for smaller handheld screens.

Smart Camera

The final solution is to implement a Smart Camera, the name’s a little pretentious ;) but in reality this camera just tries to mimic the natural flow of someone following us with a real camera. This video by Shaun Inman explains how Mario’s camera works and you’ll see it’s pretty ingenious — it is nicely implemented by said author in this video. So here’s a video of how Little Ninja’s Smart Camera looks:

On to explaining what this camera features: Whenever the sprite moves inside of the blue box, scrolling won’t occur. So if you turn a lot to the left and to the right, the screen won’t scroll too much, and the screen has sort of an acceleration parameter where if you don’t move, the camera doesn’t move too much either. This idea was inspired by Kyle Pulver’s Camera. Do check it out — you’ll see why it’s so important to have a smooth and natural-feeling camera.

You’ll also notice that Ninja is almost centered, but when you start running, the camera will accelerate again and look forward, allowing you to see more terrain for incoming exploding flying birds or projectiles, and as soon as you slow down, the screen scrolls back to you.

As for top-down scrolling, this is much trickier and I didn’t do too much tweaking, but basically, scrolling is fast if you are falling down, but if you jump to a top platform, scrolling will occur slowly — this allows us to feel a little hang when the player jumps to a very high platform. However, if you start running, the camera quickly gets back to you and starts scrolling much faster.

Yay! So is this the ultimate platformer camera?

Nope, it’s not in its final version! And actually, this camera may not be suitable for all situations, bosses will definitely need their own defined camera, auto-scrolling and scripted cameras will also play a big part, but this last camera has allowed us to have a better feeling of a high speed platformer.

The final issue, #3, as Kyle called them “Camera blockers” (secret rooms) can be partially solved with a smart camera, but will definitely need scripting wired to the map editor.

If you notice in this video there are new actions (double jumping and sliding while running), and most collisions have been fixed — Ninja can now run downhill, which is a great improvement as Alejandro did not have to force the code and managed most of it with collision detection formulas, instead of having to hard-wire individual cases. He’ll be talking about that that as soon as collisions are perfected.

So far, we’re liking the fast-paced action and the camera is helping a lot. What’s your take on it? Do you prefer exploration or fast-paced action? Let us know in our comments, and if you wanna get in touch with us, don’t forget to follow us on Twitter and Facebook!