How we make atmospheric depth - Dev Blog #3

The Perfect Pencil

Lost in the kingdom of the white beast, will you find your way out? The Perfect Pencil is a story-driven action platformer that throws you into the innermost depths of the human mind. Navigate surreal worlds punctuated by bizzare personalities, tense boss battles and secrets. She’s waiting for you.

[h2]Welcome to another Dev Blog! [/h2] [img]{STEAM_CLAN_IMAGE}/41890985/490832ffc3f228fedd138a0d3b3d9bdc0402ecdd.gif[/img] Today we’ll give you an inside look into one technology we are using to simulate atmospheric perspective in The Perfect Pencil world. [h2]Firstly, what’s Atmospheric Perspective? [/h2] A variety of techniques artists use to simulate the effects the atmosphere has on objects viewed at a distance. [img]{STEAM_CLAN_IMAGE}/41890985/1be581475dd85bd205f47384d48dcdae6cc5555c.jpg[/img] Artists have been using this techniques since the very beginning of the Common Era, and it is heavily featured in many famous paintings. [img]{STEAM_CLAN_IMAGE}/41890985/b96f7027087104162a673a829150d050d2fb48cd.jpg[/img] [i](Turner - Ancient Rome; Agrippina Landing with the Ashes of Germanicus)[/i] [img]{STEAM_CLAN_IMAGE}/41890985/0cfbfdd251bee4f9cad5eec4e9a3946c491b9618.jpg[/img] [i](Monet - The Thames below Westminster)[/i] In this post we’ll focus on the coloring technique: far objects are less saturated and shift toward the sky color. [h2]Parallax and blurry [/h2] We already use many parallaxing layers and blurrier sprites the farther they are from the gameplay layer. To further push the idea of distance, we can shift far objects smoothly toward the sky color, but we need a smart way to do it. A shader can automate the whole process! [img]{STEAM_CLAN_IMAGE}/41890985/e19b0fb11ec281c2930c0faa2331a47f7059fa3e.gif[/img] First we apply and set up the Interpolation Script, which calculates the object distance based on the parameters we choose. Next we apply the custom Material which is automatically linked to the previously added script. We can choose any color we want the object to shift to. [img]{STEAM_CLAN_IMAGE}/41890985/4aa50b733673a6576f65c59661817fe515bba31f.gif[/img] It’s working! the sprite will automatically shift to the color we chose in the Material by moving along the Z axis, according to the min/max parameters we previously set in the script. And voila’, we can now quickly apply this process to all objects in the background using the same material to create a nice atmospheric depth effect without breaking a sweat! We can use this to simulate all sorts of situations! We even started using it to color the foreground! [img]{STEAM_CLAN_IMAGE}/41890985/f2579239b02524cabbc1ea18e7cbe56af83bce4e.jpg[/img] About performance: to avoid the instancing of the material that will decrease the performance, we used the r channel of sprite renderer color to insert the interpolation value. In this way we are able to use only one material without instancing it many times, decreasing the number of draw call :) [h2]About Us [/h2]The team was born in 2019 and it has slowly grown since then. It is now composed by 10 people: programmers, artists, game designers, a social media manager and a psychologist. Plus an external studio for musics and sound design. We are all based in Italy, and we love what we are doing! [h2]If you want to support us... [/h2] If you want to support us just wishlist and follow the game page in Steam! https://store.steampowered.com/app/1858810/The_Perfect_Pencil/ [b]New demo coming soon![/b]