[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

In 2D side-scrolling games, the most important and common pattern of camera movement is to follow the character with a tracking camera. As simple as this movement pattern may sound like, it still took us some effort to optimize it.

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

Exploration is a very important element of Within. As the game goes on, there could be several crucial information regarding the main storyline that might draw the players’ attention and make them stop their steps then ponder the storyline. Bearing such design in mind, we don’t want the players jumping up and down at a certain spot, or move in a small range and let the tracking camera just moving frequently with the character’s movement. To achieve our goal, we made a Safe Area, where the camera would not following the character. When players move the character in the area, the camera won’t move with her. To be more specific, we could practice the approach AABB (Axis-Aligned Bounding Box) with the character’s bounding box and the camera shooting range.

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

In adventure games, players usually have to pay more attention to things or challenges waiting ahead than what they have passed through. In order to let the players focus more on the clues, storyline related elements, and puzzles on the way ahead, we made the character being able to look wider at the direction she faces.

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

Generally, when the character almost reaches the boundary of the map, the camera would stop at the boundary of the map rather than exposing the thick black margin. To resolve the problem of exposing margin, people usually use AABB to detect the position of the map boundary. However, the map boundaries of Within are quite irregular, and the map boundaries are composed of Polygon Collider, so we can’t simply use AABB to detect the position of the map boundaries. Therefore, we used the four points of the map boundaries to determine whether the character has reached the boundaries. We use approaches like OverlapPoint to know whether the character is inside the boundaries, calculate the distance between the character and the boundaries, and finally set the camera to a proper position.

Set the map boundaries using Polygon Collider.

Mix up Different Patterns to Create Your Own Camera Movement

The patterns mentioned above are just the tip of the iceberg of the entire camera movement design of Within. To design a camera movement, you will need to mix up different patterns to complete the camera movement you want. You can’t simply apply one pattern to all the 2D side-scrolling games. Here we would like to recommend a GDC talk in 2015. The description of camera movement of 2D side-scrolling games in the talk is epic! (Scroll Back: The Theory and Practice of Cameras in Side-Scrollers)

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

Game Development Sharing

Recommended from Medium

Let’s talk about dreams and goals: Tulipsme team on the line

Hydraverse’s Offering New Items For Your NFTs

Rebus inside out — my first Android game published

Path of Light and Shadow — Action Phase Games — Review

Get To Know Meeb Master: Body Parts

9 Cheap PlayStation 4 Game Deals To Buy If You’re On A Budget

Kick Some App connects with new game, Towaga

Red Dead Redemption 2 Journals: A Comparison of Arthur Morgan and John Marston

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Silver Lining Studio 曙光工作室

Silver Lining Studio 曙光工作室

Indie Game Brand / Developer

More from Medium

Unity WebGL — Communicating with Javascript

Utility Classes In Unity

Introduction to Null in Kotlin (Part-1)

Nullable variables

Tweening in Unity UI — Dev Log #10