Skill Gallery
← スキル一覧に戻る
verekia

damage-numbers

by verekia

⚛️ React Three Fiber Game Dev Recipes

⭐ 17🍴 0📅 2026年1月22日
dreigamedevr3freactreact-three-fiberreactjsthree-jsthreejs
GitHubで見るManusで実行

SKILL.md

name: damage-numbers description: Display floating damage numbers that animate upward and fade out, with support for critical hits.

Damage Numbers

Display floating damage numbers that animate upward and fade out, with support for critical hits.

Technique

Use Drei's Html component to render DOM elements in 3D space. Manage damage numbers in React state, spawn them with random positions, and use CSS animations for the floating/fading effect.

Key Concepts

  • Html from @react-three/drei for DOM-in-3D rendering
  • Track damages in state with unique IDs for keying
  • Use setTimeout to remove damages after animation completes
  • CSS keyframe animations for movement and opacity
  • Critical hits can have different styling (larger text, "CRIT" label)

Usage

<Html center position={[damage.x, damage.y, 0]}>
  <div style={{ animation: 'damageNumber 1.3s ease-out forwards' }}>{damage.value}</div>
</Html>

This skill is part of verekia's r3f-gamedev.

スコア

総合スコア

65/100

リポジトリの品質指標に基づく評価

✓SKILL.md

SKILL.mdファイルが含まれている

+20
✓LICENSE

ライセンスが設定されている

+10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
○最近の活動

3ヶ月以内に更新がある

0/10
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

レビュー

💬

レビュー機能は近日公開予定です