[Game Dev. Journal] Programming and Variation of Game Camera Movement in 2D Side-Scrolling Game

As the first game of Silver Lining Studio, “Within” features a narrative-driven game with dark fairy-tale atmospheres. Right now, you can download the Beta version of “Within” on Google Play and TapTap.

Related Articles:
1. Game Concept of Within: Set off on a Magnificent Dark Adventure
2. “Within” Art Design: Full Fulfillment of Creativity on Hardware Performance Limit
3. “Within” Visual Design: How to Draw Players Full Attention to the Game?

If you want to tell a story of a romantic adventure on the screen without any word, how do you do it? Imagine yourself watching a movie, though the actor was not speaking, we still managed to feel the emotion at the very moment. What causes this? One of the methods is to take advantage of camera movement. This article of Within Dev Team will mainly focus on some patterns of camera movement and why we chose these patterns. Meanwhile, we’ll also talk about how to apply the patterns to programs.

Follow the Character

Here is an example. The most common shot is to maintain the character controlled by players in the center of the frame. This is rather easy to program — all you have to do is to set the x and y coordinates of the camera to where the character is, then you can maintain the character in the center of the frame. Though this is a simple and instinctive camera movement pattern, this pattern did not fulfill the immersive feeling we want for the players and our need to portray the story. Therefore, we tried out the following.

Lower Camera Movement Frequency

AABB approach: set the projection of the red box on the x- and y-axis as the maximum and the minimum, then check if the green box is inside the red box. If it’s not true, then the position of the red box will be fixed and the camera would move.

See Wider on the Side the Character Face

Let the character stay on the left side so that players could maintain a better view of what’s waiting ahead on the right side.

Besides, in order to let the camera have a smoother movement, the movement of the camera would start later than the character’s movement. This design could prevent the problem of composition imbalance when the character moves to the right side of the frame. Meanwhile, we don’t want to narrow down the view ahead of the character, so when the character passes through the midline of the screen, the camera would accelerate to the velocity as the character moves, then players may maintain a proper view.

Managing Irregular Map Boundary

Set the map boundaries using Polygon Collider.

Mix up Different Patterns to Create Your Own Camera Movement

We hope these patterns of camera movement would give you some inspiration to design the camera movement of your own to tell a vivid story.

Finally, we’d like to invite you to try out our Beta version! We highly look forward to receiving your feedback! To download the game, please check out the URL below!

Google Play Store : https://silvrlin.pse.is/KRZD4
Official Website:
https://thegamewithin.co
Facebook:
https://www.facebook.com/silvrlin.within
Twitter:
https://twitter.com/official_within

Within Development Journal

Game Development Sharing