Website powered by

Maturity | Shader Breakdown

Maturity was a solo game dev project made for a Seattle Indies Slow Jam 2021.

I wanted the game to have a consistent visual style while also being able to express multiple moods thru the shading.

Play it here: https://camden-cecrle.itch.io/maturity

Spoiler rich video of the full game so you can see the shader in context

Default (Non-stressed) Shading

I wanted the default shading of the game to "feel" like claymation.
The main things I wanted to hit were the wobbly or "boiling" edges, soft-ish shading  and the ability to update at a lower framerate to make it feel calm

Default (Non-stressed) Shading

I wanted the default shading of the game to "feel" like claymation.
The main things I wanted to hit were the wobbly or "boiling" edges, soft-ish shading and the ability to update at a lower framerate to make it feel calm

This portion of the graph generates the map used for vertex displacement. This is then modified to fit with the characters "mood"

This portion of the graph generates the map used for vertex displacement. This is then modified to fit with the characters "mood"

Visual representation of the displacement map

Visual representation of the displacement map

Attributes that feed into the rest of the shader that controls the color

Attributes that feed into the rest of the shader that controls the color

Example of only color with no vertex offset

Example of only color with no vertex offset

Generates some additional noise for the stress state

Generates some additional noise for the stress state

Stress effect

I wanted the stress effect to be the polar opposite of the default (Cozy) shading.
So I scale and amplify the vertex offset to be smaller, sharper points, swap the color palette to more "stressful" colors and increase the "frame rate"

Stress effect

I wanted the stress effect to be the polar opposite of the default (Cozy) shading.
So I scale and amplify the vertex offset to be smaller, sharper points, swap the color palette to more "stressful" colors and increase the "frame rate"

Depression effect

For the depression effect I wanted it to feel cold and still.
To accomplish this, as depression increases the amount of vertex offset decresses as well as the saturation decreases and everything tints to a darker blue

Depression effect

For the depression effect I wanted it to feel cold and still.
To accomplish this, as depression increases the amount of vertex offset decresses as well as the saturation decreases and everything tints to a darker blue

Depression's effect on Stress
Depression overrides most of the effects of the stress modifier

Depression's effect on Stress
Depression overrides most of the effects of the stress modifier

Generates a global "fingerprint" noise for the calm state

Generates a global "fingerprint" noise for the calm state

Lerps between calm and stressed colors based on stress

Lerps between calm and stressed colors based on stress