[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.
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.
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.
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.
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!