Feature · 2023

Radial Stamina

Project info

Role: Technical Artist
Team: 2 devs
Duration: 4 weeks
Engine: Unity

Shader-driven stamina UI built for Operation Starfall.

Overview

Radial Stamina replaced the original stamina display in Operation Starfall.

The feature combines the existing stamina system with a ShaderGraph-based radial UI, inspired by the stamina system in The Legend of Zelda: Breath of the Wild.

I worked with another developer on the gameplay-side logic and Unity Events, while focusing primarily on the ShaderGraph implementation and visual behavior.

Radial stamina system in-game

From Gameplay to Shader

The existing stamina system already handled the underlying stamina behavior. My work was focused on turning that gameplay state into a visual representation through ShaderGraph.

This was my first hands-on shader project. During development, Technical Director Berend Weij guided me through the fundamentals of working with shaders: using values between 0 and 1 to manipulate masks, colors, timing, and visibility.

What initially started as an idea for a conventional Unity UI element became an opportunity to explore how the same gameplay information could drive a shader.

Gameplay Logic

The stamina events determine when the radial appears, updates, and fades.

The Unity-side logic handles stamina depletion and regeneration, while the relevant values are passed into the shader to control its visual state.

When stamina is consumed, the radial updates with the current stamina percentage. After the update, the display fades out and reappears when the stamina changes again.

[Header("Events")]
[SerializeField] private UnityEvent onStaminaEmpty = new UnityEvent();
[SerializeField] private UnityEvent onStaminaDeplete = new UnityEvent();
[SerializeField] private UnityEvent onStaminaIncrease = new UnityEvent();
[SerializeField] private UnityEvent onStaminaUpdate = new UnityEvent();
[SerializeField] private UnityEvent onStaminaFull = new UnityEvent();

ShaderGraph

The ShaderGraph is split into three main sections: fade logic, texture logic, and shape logic.

Fade Logic

The fade section controls the visibility of the radial over time.

The graph calculates the time since the last stamina update, producing fade-in and fade-out values based on the configured display and fade durations.

These values are combined to produce the final visibility of the stamina ring.

Fade section logic visualized

Texture Logic

The texture section combines the ring texture with its configured color. The texture’s RGBA output is multiplied by the color before being passed into the final shader output.

Shape Logic

The radial shape is controlled using a gradient mask and the current stamina percentage.

The mask’s red channel is offset by the stamina value and clamped to create the radial cutoff. The resulting mask is combined with the texture’s alpha and the fade value.

This produces a ring that fills and fades dynamically with the player’s stamina.

Mask texturew — Gradient and mask texture used by the shader

Collaboration

The gameplay logic was developed collaboratively with another developer. We worked together on wiring the existing stamina system into the new UI behavior, while I focused primarily on the ShaderGraph implementation.

This included connecting the gameplay events to the shader and iterating on the visual behavior as the system came together.

Takeaway

Radial Stamina was my first hands-on shader project, and the feature that first showed me what shaders could bring to gameplay.

Through guidance from Berend Weij and experimentation in ShaderGraph, I learned how relatively simple values and mathematical operations can be combined to control visual properties such as masks, color, timing, and alpha.

That experience opened up an entirely new area of game development for me and became the foundation for my later exploration of shaders and rendering.