Visual effects – using an alpha mask shader

I’ve been playing around with an alpha-cutout shader and have used it along with a couple of modified versions to create the majority of the visual effects of the game, which gives a nicely consistent feel to the art style.

The art style for the game is centred around soft, pastel colours that fade in from grey as you explore Sunita’s house and trigger her thoughts and memories associated with her possessions. The effect that we wanted to achieve was for the entire house to be rendered in greyscale initially. When you interact with an item, colour appears to spread out from it to signify a strong memory/clarity returning around that object. The idea with this would be that the player brings colour back to her house as they discover more about her past and present.

I’d used a customise alpha cutout shader on a previous prototype project with a friend, which used different alpha masks to fade textures in and out. I decided to modify this to create a shader that uses the alpha mask to fade between two textures, rather than fading to transparent. This allowed me to fade between a grayscale and a coloured texture on each object.

Within the shader code, this works by checking if the colour value of the alpha mask texture (0 for white, 1 for black) is greater than the alpha cutoff slider value. If so, the grey texture is assigned at that UV co-ordinate, if not then the coloured texture is assigned.

The alpha mask that I mostly use gives a painted look to the fade, and generally fades the object from one corner of the UV map. I experimented with a more ‘precise’ fade, using the UV map as a base to place gradients over for the alpha mask.

In theory, this is really cool, as I can accurately control the fade from a starting point in the scene – and I can even control the timing of the fade across more complex objects by using different colour ranges for the gradients. In the UV map image above, some sections (e.g. the table leg in the top-right) are darker overall, which means they fade in first. In practice though, I’m probably not going to use this due to the number of custom textures it would need. The effect achieved from a rough approximation of this still looks really good (i.e. the first GIF in this post), and I can control the timing well enough with a variable controlling the speed of the fade. The fade is controlled in a co-routine, and I’ve linked the timing of this up to an animation curve for greater control. If, for example, I want an object to fade in towards the end of a sequence, I can use curves like those shown below to control the speed. If both objects start fading at the same time, the object using the top curve will fade in quickly at the start and be fully coloured by the time the object using the bottom curve begins its fade.

The game’s text system also uses a variant of this shader that fades to transparent, in order to fade the text in and out as Sunita’s thoughts are revealed.  

Another nice application of the shader is in combination with the game’s audio. As an alternative to lerping smoothly from one texture to the next, I used the spectrum data of the in-game audio to act as input for the alpha cutoff control. With this script attached to an object with the shader, the textures appear to fade in and out in time with the music volume. There’s been a large amount of research into the effects of music on people with dementia (http://www.ageuk.org.uk/health-wellbeing/conditions-illnesses/dementia-and-music/, e.g.) so I think the visual difference in the objects associated with music in the game will be really interesting to develop further.
There’s some other exciting ideas I’ve got for use of this shader, but I don’t want to give everything away just yet!

– Claire

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