ダンジョンHUD
概要
ダンジョン内のHUD（Heads-Up Display）は、プレイヤーに必要最小限の情報を常時表示しつつ、ゲームプレイの没入感を妨げないよう設計する。全UI要素は半透明でゲーム画面上にオーバーレイする。
HUDレイアウト（PC）
┌──────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────┐ ┌─────────────────┐ │
│ │ HP ████████████░░░ 340 │ │ MINIMAP │ │
│ │ EXP ██████░░░░░ 45% │ │ ┌───────┐ │ │
│ │ Lv.12 │ │ │ · N │ │ │
│ └────────────────────────┘ │ │ · ▲ · │ │ │
│ │ │ · · │ │ │
│ │ └───────┘ │ │
│ │ Floor 3/5 │ │
│ ┌─────────────────────┐ └─────────────────┘ │
│ │ MISSION │ │
│ │ ✦ 敵を30体撃破 │ │
│ │ [22/30] ████████░░ │ │
│ └─────────────────────┘ │
│ │
│ ┌─────────┐ │
│ │ -42! │ ← ダメージポップアップ │
│ │ CRIT! │ │
│ └─────────┘ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ ┌─────────────────────┐ │
│ │ ★★★ Void Blade GET! │ ← アイテム通知 │
│ └─────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [Q:Skill1] [W:Skill2] [E:Skill3] [🗡ATK] [🛡DEF] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────┘HUDレイアウト（モバイル）
┌──────────────────────────────┐
│ │
│ ┌──────────────┐ ┌───────┐ │
│ │HP ████░░ 340 │ │MINIMAP│ │
│ │EXP ██░░ 45% │ │ · ▲ · │ │
│ │Lv.12 │ │ · · │ │
│ └──────────────┘ └───────┘ │
│ │
│ ┌─────────────┐ │
│ │✦ 22/30 ███░░│ │
│ └─────────────┘ │
│ │
│ │
│ -42! │
│ CRIT! │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ ┌────┐ ┌────────┐ │
│ │ │ │[Sk1] │ │
│ │ JS │ │ [Sk2] │ │
│ │ │ │ [ATK]│ │
│ └────┘ └────────┘ │
│ Joystick Action Btns │
│ │
└──────────────────────────────┘HUD要素詳細
HPバー
| 項目 | 仕様 |
|---|---|
| 位置 | 画面左上 |
| 表示 | 現在HP / 最大HP + バーグラフ |
| カラー | HP > 50%: #00ff88（緑）、25-50%: #f0f000（黄）、< 25%: #ff2d75（赤点滅） |
| アニメーション | ダメージ時にバーが即座に減少 + 赤いゴースト部分が0.5sで追従 |
| 低HP警告 | HP < 25% で画面縁が赤く点滅（0.8s間隔） |
EXPバー
| 項目 | 仕様 |
|---|---|
| 位置 | HPバーの下 |
| 表示 | 現在EXP / 次レベルEXP + パーセント + バーグラフ |
| カラー | #a855f7（パープル）のグラデーション |
| アニメーション | EXP獲得時にバーがスムーズに増加（0.3s ease-out） |
| レベルアップ時 | バーがフラッシュ → レベルアップUI表示 |
ミニマップ
| 項目 | 仕様 |
|---|---|
| 位置 | 画面右上 |
| サイズ | 160x160px（PC）/ 100x100px（モバイル） |
| 表示内容 | フロアマップ、プレイヤー位置（▲）、敵位置（赤点）、アイテム（黄点）、ポータル（紫点） |
| スタイル | 半透明ダーク背景、ネオンシアンのライン |
| 回転 | プレイヤーの向きに合わせて回転（北固定モード切替可） |
| フロア表示 | 「Floor X/Y」形式で現在階/総階を表示 |
ミッション目標
| 項目 | 仕様 |
|---|---|
| 位置 | 画面左（HPバーの下） |
| 表示 | ミッション名 + 進捗バー |
| 完了時 | チェックマーク + 「脱出ポータル出現!」メッセージ |
| アニメーション | 進捗更新時にパルスエフェクト |
ダメージポップアップ
プレイヤーの攻撃がヒットした際、敵の位置にダメージ数値がポップアップする。
| 種類 | 表示 | カラー | サイズ |
|---|---|---|---|
| 通常ダメージ | -数値 | #ffffff | 標準 |
| クリティカル | -数値! + CRIT! | #ff2d75 | 1.5倍 + シェイク |
| 弱点攻撃 | -数値 + WEAK! | #f0f000 | 1.3倍 |
| 回復 | +数値 | #00ff88 | 標準 |
| ミス | MISS | #888888 | 0.8倍 |
ダメージポップアップ アニメーション:
0.0s: 出現（scale 0 → 1.2）、敵の頭上に表示
0.1s: バウンス（scale 1.2 → 1.0）
0.1s - 0.6s: 上方向に浮遊（Y -30px）
0.4s - 0.8s: フェードアウト（opacity 1 → 0）
0.8s: 消滅アイテムピックアップ通知
敵がドロップしたアイテムを拾った際に画面下部中央に通知が表示される。
┌──────────────────────────────────┐
│ ★★★ Void Blade GET! │
│ ATK +34 SPD +2 │
└──────────────────────────────────┘| 項目 | 仕様 |
|---|---|
| 位置 | 画面下部中央 |
| 表示時間 | 2.0s |
| スタッキング | 最大3件まで同時表示（上に積み上がる） |
| ボーダーカラー | レアリティに応じた色（装備管理と同じ） |
| アニメーション | 右からスライドイン（0.2s）→ 表示 → 左にスライドアウト（0.2s） |
スキルバー
| 項目 | 仕様 |
|---|---|
| 位置 | 画面下部 |
| 表示 | スキルアイコン + キーバインド + クールダウン |
| クールダウン表示 | スキルアイコン上に円形ゲージ + 残り秒数 |
| 使用不可時 | グレーアウト + ロックアイコン |
レベルアップUI
ダンジョン内でレベルアップした際に表示されるスキル選択画面。 ゲームは一時停止し、3つのスキルカードから1つを選択する。
┌──────────────────────────────────────────────────────────────────┐
│ │
│ ✦ LEVEL UP! ✦ │
│ Lv.12 → 13 │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │ │ │
│ │ ⚡ FURY │ │ 🛡 AEGIS │ │ 💨 HASTE │ │
│ │ │ │ │ │ │ │
│ │ ATK +15% │ │ DEF +20% │ │ SPD +25% │ │
│ │ │ │ │ │ │ │
│ │ 攻撃力が │ │ 防御力が │ │ 移動速度が │ │
│ │ 大幅に上昇 │ │ 大幅に上昇 │ │ 大幅に上昇 │ │
│ │ │ │ │ │ │ │
│ │ [SELECT] │ │ [SELECT] │ │ [SELECT] │ │
│ │ │ │ │ │ │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ │
└──────────────────────────────────────────────────────────────────┘スキルカード仕様
| 項目 | 仕様 |
|---|---|
| 表示枚数 | 3枚（ランダム選出） |
| 選択方法 | クリック/タップ or 1/2/3キー |
| 出現アニメーション | カードが下から順にスライドイン（0.1s間隔） |
| ホバー | カードが浮き上がり（Y -10px）、グロウエフェクト |
| 選択時 | 選択カードが拡大 → 他カードが消滅 → スキル名がフラッシュ表示 |
| カラー | カード背景はダーク、ボーダーはスキルの属性色 |
モバイル バーチャルジョイスティック
配置
画面下部:
┌────────────────────────────────┐
│ │
│ ┌──────┐ ┌───────┐ │
│ │ │ │ [Sk2] │ │
│ │ ◉ │ │ │ │
│ │ │ │[Sk1] │ │
│ └──────┘ │ [ATK]│ │
│ L: Move └───────┘ │
│ R: Actions │
└────────────────────────────────┘
左: 移動ジョイスティック（仮想スティック）
右: アクションボタン群（攻撃 + スキル）ジョイスティック仕様
| 項目 | 仕様 |
|---|---|
| 種類 | フローティングジョイスティック |
| 表示 | 左下エリアのどこでもタッチで出現 |
| ベースサイズ | 120px（半透明の円） |
| ノブサイズ | 50px（ネオンシアンの円） |
| 最大移動距離 | 50px（ベースの半径） |
| デッドゾーン | 10px |
| 透明度 | ベース: 30%、ノブ: 60%、操作中: ベース50%、ノブ80% |
| 消滅 | タッチ離脱後0.3sでフェードアウト |
アクションボタン仕様
| ボタン | サイズ | 位置 | 機能 |
|---|---|---|---|
| ATK（攻撃） | 64px | 右下 | メイン攻撃 |
| Skill 1 | 48px | ATKの左上 | スキルスロット1 |
| Skill 2 | 48px | ATKの上 | スキルスロット2 |
HUD表示/非表示制御
| 状態 | 表示されるHUD要素 |
|---|---|
| 通常探索 | HPバー、EXPバー、ミニマップ、ミッション目標、スキルバー |
| 戦闘中 | 上記 + ダメージポップアップ |
| アイテム獲得 | 上記 + アイテム通知 |
| レベルアップ | レベルアップUI（他HUD薄暗く） |
| ボス戦 | 上記 + ボスHPバー（画面上部中央） |
| 死亡 | 全HUDフェードアウト → 死亡演出 |
| ポーズ中 | 全HUD + ポーズメニュー |
ボスHPバー
ボス遭遇時に画面上部中央に表示される。
┌──────────────────────────────────────────────┐
│ ◆ GLITCH OVERLORD ◆ │
│ ████████████████████████████░░░░░░ 72% │
└──────────────────────────────────────────────┘| 項目 | 仕様 |
|---|---|
| 位置 | 画面上部中央 |
| 幅 | 画面幅の60%（PC）/ 80%（モバイル） |
| 出現 | ボス名テキストがタイプライター風に表示 → バーがスライドイン |
| カラー | #ff2d75（ネオンピンク）のグラデーション |
| 低HP | 30%以下でバーが点滅 |