Creating illusion of depth in a 2D escape room game designed during 1 month
Escapee is a game that was conceived in a month, and during its development several technical challenges were faced to deliver an immersive experience. The biggest challenge was creating a depth effect within a 2D interface.
In the lab where my team and I developed the game, the problem of the missing bathroom key is frequent. From there came the concept of our game, an escape room with the goal of finding the bathroom key hidden inside the workplace. By observing a collage of photos from our lab used in a lo-fi prototype and the dynamics of several other games of this kind, it was noticed that the perception of depth adds a lot to the experience, as it makes it possible to position more elements within the same scenario by distributing them in different planes in an intelligible way, adding more immersion.
The first of the strategies used to create a sense of depth was the use of light and shadow in some objects. The different colors to create this effect on objects were generated using the HSB color model, which uses hue (H), saturation (S) and brightness (B) as chromatic components. The base color of the objects was brightened up or down to create a lighter or darker tone, while the Hue (H) and Saturation (S) were kept. We also used a variety of similar brightness and saturation properties for all colors in the game to create consistency across scenarios.
Objects further away from the user’s view had their saturation decreased. We also applied a blur effect to the furthest layers and adapted the dimensions of the objects.
It was challenging to maintain a coherence between the perspective of the elements. Therefore, the objects in the reference photos for the image tracing always needed to be photographed at an angle that made sense with their positioning within the interface.
Some of these elements are interactive and needed to be animated. For this, each of its faces had to be created separately and then transformed into 3D components that worked together in After Effects. The animation was then exported as a sequence of images with transparent background to be used in the game.
The last method used to generate depth was the parallax effect. It works by grouping graphic elements in different planes according to their distance from the background of the scene. The smaller the distance of a layer in relation to the background, the slower the speed with which each object is scrolled in the game.
The animation below illustrates the ordering of the layers in relation to the background. They were divided into foreground, midgrounds and background.
If you want to watch the game trailer click here
Escapee will be available soon on the App Store.
