Fade In / Fade Out

Hey there, Enda here!

It might seem like a little thing, and it will be a short entry, but the topic of this blog post is definitely something I found made the app feel ‘real’ and professional. Transitions between events in a virtual space need to be smooth – when things pop in and out of existence, it can be quite jarring for the user. Rather, transitions often use fades to make this a gradual, rather than instant process.

Fading is a crucial part of the design of this app, as it affects the aesthetic ‘feel’ of so many objects. For example, fades are used in the following situations:

  • Fading photographs in and out, in time with their narration
  • Fading Blender stills in and out, in time with their narration
  • Fading the whole screen from black when the scene starts
  • Fading the whole screen to black when the scene ends
  • Fading in the loading screen and its animation

Fading is possible through linear interpolation (commonly known as a ‘lerp’). Lerping is a mathematical function that creates a line between to points, therefore creating a smooth change between the values.

 

LinearInterpolation.png

Unity has inbuilt lerping functions. The main one is Mathf.Lerp, but there is also Color.Lerp, specifically for colour changes. This is scripted in the code below:

Screen Shot 2016-08-29 at 17.43.03.png

In this case, the code loops in a while loop, changing the colour from clear (RBGA (0,0,0,0)) to black (RGBA(0,0,0,1)) by the value of ‘progress’, which is a multiplier times time.deltaTime. time.deltaTime is the amount of time in seconds the last frame took to complete – our app runs at approximately 60FPS.

These fades create a smoothness that makes the app a more pleasant experience. It also allows me to bring up full screen overlays, (such as the loading screen below) which can hide scene changes, which would otherwise be awkward in VR.

Screen Shot 2016-08-29 at 17.42.35.png
The TrinityVR loading screen
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s