Skill bar & cooldown

Pattern: a React-rendered skill bar with hotkeys 1–0 and visual cooldown sweeps, driven entirely by Blueprint.

Wiring overview

• React: render 10 skill slots in a bottom-center HUD layer; each slot has a CSS conic-gradient overlay driven by a cooldown: number 0..1.
• UE BP: on Q press → start a 3-second cooldown timer; tick it every frame → PushFloat("skill:1:cooldown", remaining/3.0). At 0 → PushFloat("skill:1:cooldown", 0).

Input Action Q (Pressed)
  └─ Start Skill Cooldown ("skill:1", 3.0)

(every tick while active)
Update Cooldown
  └─ PushFloat ("skill:1:cooldown", Remaining / Total)

React side

import { useUnrealState } from 'unreal-react-bridge';

function SkillSlot({ id }: { id: number }) {
  const cd = useUnrealState<number>(`skill:${id}:cooldown`, 0);
  return (
    <div className="slot">
      <div className="cooldown" style={{ background: `conic-gradient(rgba(0,0,0,.6) ${cd*360}deg, transparent 0)` }} />
      <span className="key">{id}</span>
    </div>
  );
}

Hotkeys 1–0

Bind 1–0 in Project Settings → Input as InputActions. On press → fire your Use Skill N BP function. The React side never reads keyboard — UE owns input authority.

Reference: see web/sdk/examples/multi-hud/src/skills/ for the working version.