damage-numbers_skill

Overview

This skill displays floating damage numbers in a React Three Fiber scene that animate upward and fade out. It supports critical hits with distinct styling so players immediately recognize bigger blows. The implementation uses DOM-in-3D rendering for crisp text and simple CSS animations for smooth motion and opacity transitions.

How this skill works

Damage entries are tracked in React state with unique IDs and spawned at slightly randomized positions near the impact point. Each entry renders an Html element from @react-three/drei at the damage world coordinates, and CSS keyframe animations handle upward movement and fade-out. A short timeout removes each entry from state when its animation completes, keeping memory and renders minimal.

When to use it

• Show transient feedback for hits, heals, or status effects in 3D games built with React Three Fiber.
• Highlight critical hits with larger text or a label to increase clarity during combat.
• Quickly prototype visual feedback without creating complex 3D text meshes or additional geometries.
• Attach to enemies, projectiles, or player attacks where spatial placement matters.
• Combine with particle effects or camera shake for more impactful feedback.

Best practices

• Use Html from @react-three/drei to keep text sharp and accessible, then position it in world space to follow objects.
• Keep the animation duration short (≈1–1.5s) to avoid clutter and maintain readability.
• Randomize X/Y offsets slightly to prevent overlapping numbers for rapid multi-hit scenarios.
• Differentiate critical hits using scale, color, or an explicit “CRIT” label but avoid excessive animations that distract players.
• Remove entries from state with setTimeout after the animation ends to prevent memory leaks and reduce rerenders.

Example use cases

• Show floating red numbers above enemies on hit; larger yellow numbers and a “CRIT” label for critical strikes.
• Display green floating numbers for healing spells that rise and fade over allies.
• Attach damage numbers to projectiles so mid-air impacts show immediate feedback where the collision occurs.
• Use during debugging to visualize damage amounts and positions while tuning combat balance.