Medium Game effectsAnimated
Ability cooldown sweep
The cooldown overlay from MOBAs and RPGs: an ability icon with a dark clock-wipe that sweeps clockwise from the top until the ability is ready again.
How this challenge works
You write a fragment shader that draws the picture above, live in your browser. A match bar shows how close you are, and the score combines accuracy, code size (the par is 594 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.
What it is built from
- Space
p = (uv - 0.5) * float2(aspect, 1.0)- Icon
rounded box: q = abs(p) - float2(?, ?); d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - ?; edge 0.0 → ?- Border
the part of the icon with d above -?- Clock angle
t = frac(atan2(p.x, p.y) / ?): 0 at the top, growing clockwise to 1- Progress
frac(time * ?)- Not ready yet
cover = step(progress, t): the part of the clock the sweep has not reached; the icon there is multiplied by ?- Colors
background float3(0.06, 0.07, 0.1), icon lerp(float3(0.15, 0.45, 0.85), float3(0.55, 0.85, 1.0), uv.y), border float3(0.85, 0.7, 0.3)
The exact numbers are left out (shown as ?), but every colour is given. Measure the rest with the pixel readout on both pictures and Diff.
Solve it in your language
Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start coding