PARALLAX SCROLLING

"a technique in computer graphics where background images move past the camera more slowly than foreground images, creating an illusion of depth in a 2D scene of distance" - Wikipedia

James has recommended we look into Parallax Scrolling backgrounds in order to achieve the illusion of depth in our environment. To create the effect of this, Kiera will implement our assets into Unity and attach the right script accordingly. However, as I am creating assets I'd like to understand Parallax Scrolling and how we are using this in-game as well as learning for future use.

FEATURES OF PARALLAX SCROLLING:

• Background/foreground are split into different layers

• Each layer moves at a different speed

• The speed between layers "simulates the distance between them".

• Layers that move faster are often those closer to the camera

• These layers can move at different speeds and different directions

• Background can also be put on a loop/create a seamless effect

HOW DO WE DO IT?

Parallax Infinite Scrolling Background in Unity - Code Monkey

NOTES:

• Add background assets - first layer of parallax effect (in our case, assets including trees, huts, clouds and torii gates)

• Background remains still - sunset background to be placed behind these assets however on a seamless loop

• Script (in order for the background to follow the camera position) -

• Within the script adjust the values so the background moves half of the movement of the camera.

• Select the background assets and adjust values for the layers to appear as though they are moving at different speeds and directions.

• Infinite scrolling background - when the player moves the background is constantly moving with them:

"The Beauty of Parallax" - Video Game Animation Study

NOTES:

• Background moves at a slower pace than the foreground

• Illusion of depth

• The speed the background moves affects how far away it appears

• Old cartoons used to use background scrolling using 'large rigs' using glass and a camera

• Conveys a sense of depth, more layers means more visual depth in a 2D scene

• Parallax scrolling 'contributes to the immersiveness of gameplay'

• Conveys a 'believable sense of space' for the player to explore

• Increases enjoyment as a player - more appealing

• Can also be seen as distracting

• Parallax scrolling creates a sense of space - a completely flat screen doesn't have this sense of space or depth.

• Increasing the number of layers can create a 'faux-3D' effect that makes the scene appear more three dimensional than 2D.

A great example of an early 2D game using multiple layers and really taking advantage of the beauty of parallax -

Sonic Mania: Green Hill

• Beautiful lake that appears three dimensional, stretches back to emphasise the use of depth in the environment

• Several layers of mountains, trees and clouds

• Animated waterfalls and lake

• Emphasises the idea of space

• Some foreground elements can be in front of the main 'stage platform' therefore in front of the player and appearing closer to the camera

• Animated assets will make the scene appear more dynamic

Another example of this:

Playdead's INSIDE

• Inside is a great example of a game using parallax scrolling to make the environment seem three dimensional.

• The environment appears 3D through the use of multiple layers each moving at different speeds, and the use of an infinite background which constantly moves with the player.

• Trees are placed at the front of the camera, appearing in front of players and giving us the impression that they are closer to us.

• Although the character moves in one straight line, the depth in the lake and other elements of the forest makes it appear as if there is a huge scene around them - I personally love the way Playdead do this as it makes gameplay that much more exciting.

• Faded trees and light are used in the background to emphasise the depth in the forest

• The animations that take place in the background of the scene also makes the setting appear three dimensional

• Camera movements move with the player rather than appearing flat throughout (perspective and seamless layers)

HOW WILL I USE THIS? WHAT HAVE I LEARNED FROM THIS?

For the sake of Anima Mundi, we have looked into Parallax Scrolling and have agreed as a team that this would be a great addition to achieving beauty in the environment and creating an immersive gameplay experience.

In terms of our vertical slice, Anima Mundi takes place in an Air Region with a unique art style and a Japanese-inspired theme. Within the environment will be traditional Japanese architecture, nature and other elements of an air region. This should include clouds, potentially mountains for the background and a sunset sky. Parallax Scrolling can be used to achieve depth in the environment by coding the background to move with the player on a seamless loop. Depth in the environment will be achieved by layering assets such as mountains and clouds and achieving the feeling of space by making them appear distant from the player.

Our intentions for Anima Mundi are to provide players with an immersive gameplay experience, followed by beautiful aesthetics, visuals and audio. My research has taught me that the effects of Parallax Scrolling can contribute to immersiveness and portrays a 'believable sense of space' for the player, which will appeal to and engage our audience the way we desire. Consequently, it would be beneficial to implement the use of Parallax Scrolling in Anima Mundi as it would overall improve our players experience and as a result of this will help us achieve our goal as a team.

NEXT STEPS

When it comes to building the full game structure, this is something we will take into account and the composition/placement of assets will be really important. Kiera will be responsible for finding and creating the relevant scripts in Unity to assist this and therefore will set this up accordingly. I am responsible for the look of the game and will organise the structure of the game during the later stages of the project. I will take into consideration achieving depth, creating a sense of space and distance in the environment.