#level transition

Hello, I’m Gabriel a developer from Tetragon. In this post I will talk about a tricky feature implemented in the project, the level transition.

“Tetragon world is made out of multiple parallels planes and Lucius is travelling between them. The idea was to have the next level always appearing in the background of the current one, creating some kind of anticipation towards the next level.

We had many options to implement this feature. The simplest one was to use a pre-rendered image as background and create one for each level, but this brings up some problems, the player would not be able to go back in a level, since the new tower configuration would not match the one from the image, and any change in the initial level state would make necessary a new background image. As the project was in the beginning state and we were not a 100% sure about all of its features we prefered to make a more flexible implementation.

Keeping the real level behind as background but only running its rendering pipe was a good option, but it implied in having the double of assets active in scene. As one of our target platforms is mobile we choose not to risk and opt for a third option. Generating the background image at runtime, it consumes a lot of processing, causing a FPS drop, but if the level is rendered in the background during play time the process becomes imperceptible to the player. To make this happen the first background must be created during a loading screen:

With the first background created the game can start while our level load pipe loads a third level and creates a second background asynchronously. To make this process more fluid we separated it in 3 parts. First we load the next level assets asynchronously. When all the assets are loaded we start the second part of the process where we take a picture and render the background. Unfortunately the process of creating the texture can’t be separated in more than one frame, nor be made in a thread different of the main thread (a limitation of Unity). This problem could be solved by creating our own process to create the texture, but we did not have enough time to invest in doing so. After the background is created and positioned we start our third and final part, responsible to initialize all the game objects in the loaded scene in an asynchronous way, this way we can dissipate all the heavy load from one scene between multiple frames keeping the game smooth.

With all the loading pipeline working we started improving the visual, the background should move and rotate to lock in the exact same position of the next level, at the same time the previous level must move in the camera direction fading away, the fade is necessary because there are levels with walls that block the view of the next level, adding the fade we remove the impression the camera is hitting a wall. To complete the transition an intermediary frame was added between the current level and the next one, this way we hide the background border and also improve how navigating between planes feels. “   This was our final result, hope you liked.