Premium Features

Download Video

Vertical camera panning

Now let's add vertical camera panning using the same camera box technique.

Vertical Panning Methods

Create two new methods for vertical panning:

  • shouldPanCameraDown() — When camera box top reaches screen top

  • shouldPanCameraUp() — When camera box bottom reaches screen bottom

Panning Down (Player Jumping)

When the player jumps and the camera box reaches the top of the screen:

if (cameraBox.position.y <= 0) {   camera.position.y -= player.velocity.y }

This reveals more of the level above.

Panning Up (Player Falling)

When the player falls and the camera box reaches the bottom:

if (cameraBox.position.y + cameraBox.height >= canvas.height) {   camera.position.y -= player.velocity.y }

The vertical camera follows the same principles as horizontal — we're just checking different edges and modifying camera.position.y instead of x.

With both horizontal and vertical panning, your camera now follows the player throughout the entire level.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Providing the lift to launch your development career

© 2026 Chris Courses. All rights reserved.