Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
September 23, 2018
arrowPress Releases
  • Editor-In-Chief:
    Kris Graft
  • Editor:
    Alex Wawro
  • Contributors:
    Chris Kerr
    Alissa McAloon
    Emma Kidwell
    Bryant Francis
    Katherine Cross
  • Advertising:
    Libby Kruse






If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 

A Subtle shader: making an invisible thing visible

by Mauricio Perin on 12/14/15 01:54:00 pm   Featured Blogs

7 comments Share on Twitter    RSS

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

When we fisrt started working on Tsar Project, the game that would eventually evolve into Qasri al-Wasat, one of the few things the team knew for certain was that our protagonist, called Subtle, would be invisible. And for that we needed a visual way to convey this to players, but without compromising playabily and navigation with well, a fully invisible character in the middle of the screen. It was then that I learned about shaders.

A newbie approach to shading

First things first: working with Unity is super great because of the community. When we began working on Qasir I had absolutely know clue about shader coding. No clue about programming whatsoever to be honest. So it all started with Unity’s shader documentation and lurking on the Unity Answers database. I still very much recommend those as good starting points — even though I wouldn't be any surprised if somebody with more programming experience (not to say ANY) would recommend something else.

When it started to get shady

After deciding the kind of effect we needed to achieve (I had something between Ghost in the Shell’s cloaking and that Mortal Kombat Movie's Reptile in mind) the best shader to start from seemed to be the Stained Glass/Heat Wave  available in many variations throughout Unity’s forums. The fine tuning consisted of adding highlights and shadow to the bump map based distortion.

Three shades of invisible

The final result consists of a greyscale bump map, a slider to fine tune the amount of distortion, a black texture with highlights and a white texture with shadings. Here are the three components, rendered as separated unlit materials, side by side with the combined result:

LiquidVenomVenomSublte

I’ve made all the textures with alpha here, just so they’d work properly as standalones, but the first one is grey around the character, the second black and the third white. In the case of Qasir, with the use of sprite based animation, every individual texture is actually a 2048px sprite map, but the shader sould also work for other kinds of 2D and 3D techniques.

You can get the .shader file here: 

http://visdev.com.br/ftp/qasir/Glass-Subtle_Custom.shader

And if you have any questions please come say hello on twitter!

Cheers!

PS: By the way, the individual textures used in the game are named Liquid, Venom and Solidus. And in case you’re wondering, the texture used when Subtle is visible is named Solid.


Related Jobs

Psyonix
Psyonix — San Diego, California, United States
[09.22.18]

UI Lead
Skydance Interactive
Skydance Interactive — Marina Del Rey, California, United States
[09.21.18]

VFX Artist
Velan Studios
Velan Studios — Troy, New York, United States
[09.21.18]

UI/UX Designer
Plarium Michigan Studio LP
Plarium Michigan Studio LP — Portage, Michigan, United States
[09.21.18]

Senior Game Developer





Loading Comments

loader image