Hey Everyone! I thought I’d share some of the behind the scenes secrets for the visuals of the game.
So since I handle the code, art and design for Trash TV I want to squeeze every single bit of juice from my main discipline, coding, to my tertiary skill, art. Behind all the glitzy shaders it’s probably fairly average pixel art.
There’s currently 8 Shaders in the game.
ShiftWorld Shader
Ripple Refraction Shader,
Lighting Shader,
Noise Shader,
Line Art Shader,
Distortion Shader,
Static Field Shader
Ambient Occulsion Shader.
Today let’s look at the ShiftWorld shader.

Purpose:
In this part of the game the player can change the channel between two levels. So this shader is fairly special is that it’s more than just aesthetics, it needs to convey the location of items on another channel. Originally I tried rendering the channel 2 over channel 1 with quarter transparency. It worked ok but was very visually messy. What I needed was some way to pick up just the important details. With this in mind the first thing the shader does is an edge detection pass like an emboss filter.
float4 normal = tex2D(TextureSampler, texCoord); //grab texture minus the background layer
texCoord[0] += 0.001;
texCoord[1] += 0.001;
float4 normalOffset = tex2D(TextureSampler, texCoord); //grab texture offset slightly
returnin[0] = normal[0] – normalOffset[0] + normal[0] – normalOffset2[0]; //take the difference between the two images
returnin[1] = normal[1] – normalOffset[1] + normal[1] – normalOffset2[1];
returnin[2] = normal[2] – normalOffset[2] + normal[2] – normalOffset2[2];
If the difference is high enough we render the 2nd texture which is a colour noise texture created in Photoshop. (Note, I only check the R channel out of laziness, works fine though).

This gives us the colour noise across any edges of items in the game. The rest of effect is simply a slight skew effect linked to a sinwave to give it that unstable look and a bit of colour tweaking.