Toy Update, Part 3

tim-cain unity shaders shader-graph fresnel game-dev space-game ui-design

Abstract

Problem: How to make energy shields on enemy ships visually communicate their damage state at a glance, and how to improve targeting UI clarity?

Approach: Tim Cain learned Unity's Shader Graph over a weekend, implementing Fresnel-based transparency effects and color gradients driven by shield hit points. A viewer suggestion also led to making the targeting cursor semi-transparent.

Findings: Fresnel shading creates an intuitive shield effect — barely visible at full strength, increasingly opaque as damage accumulates. A white-to-red color gradient mapped to remaining hit points gives instant visual feedback. Making the targeting cursor semi-transparent (alpha 0.25) was a trivial change with outsized usability improvement.

Key insight: Sometimes the best improvements come from viewer suggestions — a simple idea with simple execution can dramatically improve a game's feel and readability.

Source: https://www.youtube.com/watch?v=oCKPphehFGk

Context

This is Part 3 of Tim Cain's "Toy Update" series, where he shares incremental progress on his personal space game project built in Unity. After Part 2, viewers flooded him with suggestions for improving the shield visuals on enemy ships, which motivated him to spend a weekend learning shaders.

Learning Shader Graph in Unity

Tim found that if you're using Unity's Universal Render Pipeline (URP) or the High Definition Render Pipeline (HDRP), Shader Graph is already available. Getting started was as simple as creating a new folder, right-clicking, and selecting "Create a Shader Graph." He was surprised by how approachable it was — far less work than he expected.

His shader setup was straightforward:

  • Created a Shield Color variable (type: Color) piped into the fragment's color input
  • Added a Fresnel node (found under Math > Vector) piped into the fragment's alpha input
  • Connected the Normal Vector and View Vector nodes (already built into Shader Graph) to the Fresnel node
  • Created a Fresnel Power variable to control the effect's intensity

How the Fresnel Effect Works

The Fresnel effect is perfect for shields because of how it interacts with viewing angles on a sphere:

  • When the surface normal is aligned with your view direction (center of the sphere), it returns zero — fully transparent
  • When the surface normal is orthogonal to your view (edges of the sphere), it returns one — fully visible
  • The power variable controls how far from the edges the effect extends

This means shields appear as a subtle edge glow when undamaged, and become increasingly opaque across the whole surface as they take damage — letting players assess shield status at a glance.

The Underscore Gotcha

Tim hit a scripting issue worth noting: when naming Shader Graph variables, Unity auto-generates a reference name that replaces spaces with underscores. He named his variable "Shield Power" but the reference became "Shield_Power." His script wasn't working until he realized he needed to use the underscore version in code. A small but frustrating gotcha for anyone new to Shader Graph.

Color Gradient for Damage State

Several viewers suggested his original color scheme wasn't intuitive. In Part 2, he had used fixed color change points. This time he implemented a proper gradient:

  • White → full shields (no damage)
  • Blue → minor damage
  • Yellow → moderate damage
  • Orange → heavy damage
  • Red → critical (viewers agreed red universally reads as "damaged")

The gradient is mapped to remaining shield hit points (e.g., a shield that can take 10 hits smoothly transitions through the gradient as it absorbs damage). This replaced the previous system of discrete color jumps at set thresholds.

Transparent Targeting Cursor

A viewer pointed out that the targeting cursor was fully opaque, making it harder to see what you're aiming at. Tim changed a single value — the alpha channel of Color.green from 1.0 to 0.25 — and the improvement was immediately obvious.

Tim called this a "perfect example of sometimes there will be a simple idea with a simple execution and it just makes things better." He noted the suggestion was both insightful and intuitive, yet he hadn't thought of it himself.

What's Next

Tim mentioned considering making the entire HUD semi-transparent but was unsure if that would hurt readability. He asked viewers for suggestions on what to tackle next, continuing the community-driven development approach that generated all the ideas in this update.

Source