ダンジョンHUD
概要
ダンジョン内のHUD(Heads-Up Display)は、プレイヤーに必要最小限の情報を常時表示しつつ、ゲームプレイの没入感を妨げないよう設計する。全UI要素は半透明でゲーム画面上にオーバーレイする。
HUDレイアウト(PC)
┌──────────────────────────────────────────────────────────────────┐
│ │
│ ┌────────────────────────┐ ┌─────────────────┐ │
│ │ HP ████████████░░░ 340 │ │ MINIMAP │ │
│ │ EXP ██████░░░░░ 45% │ │ ┌───────┐ │ │
│ │ Lv.12 │ │ │ · N │ │ │
│ │ 「3F」 │ │ │ · ▲ · │ │ │
│ └────────────────────────┘ │ │ · · │ │ │
│ │ └───────┘ │ │
│ │ 3F / 15F │ │
│ ┌─────────────────────┐ └─────────────────┘ │
│ │ DUNGEON │ │
│ │ ✦ 3F 探索中 │ │
│ │ 敵残り: 12体 │ │
│ └─────────────────────┘ │
│ │
│ ┌─────────┐ │
│ │ -42! │ ← ダメージポップアップ │
│ │ CRIT! │ │
│ └─────────┘ │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ ┌─────────────────────┐ │
│ │ ★★★ Void Blade GET! │ ← アイテム通知 │
│ └─────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [Q:Skill1] [W:Skill2] [E:Skill3] [🗡ATK] [🛡DEF] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────┘HUDレイアウト(モバイル)
┌──────────────────────────────┐
│ │
│ ┌──────────────┐ ┌───────┐ │
│ │HP ████░░ 340 │ │MINIMAP│ │
│ │EXP ██░░ 45% │ │ · ▲ · │ │
│ │Lv.12 3F │ │ · · │ │
│ └──────────────┘ └───────┘ │
│ │
│ ┌─────────────┐ │
│ │✦ 3F 敵:12 │ │
│ └─────────────┘ │
│ │
│ │
│ -42! │
│ CRIT! │
│ │
│ │
│ │
│ │
│ │
│ │
│ │
│ ┌────┐ ┌────────┐ │
│ │ │ │[Sk1] │ │
│ │ JS │ │ [Sk2] │ │
│ │ │ │ [ATK]│ │
│ └────┘ └────────┘ │
│ Joystick Action Btns │
│ │
└──────────────────────────────┘HUD要素詳細
フロア表示
| 項目 | 仕様 |
|---|---|
| 位置 | 画面左上(レベル表示の下) |
| 表示 | 「3F」形式で現在フロアを常時表示 |
| カラー | #00ffff(シアン) |
| フロア移動時 | 大きく「3F」がフェードインする演出(1.0秒) |
| ボスフロア | 「5F BOSS」のように赤く表示 + 警告SE |
| フォントサイズ | PC: 24px / モバイル: 18px |
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表示 |
EXPバーの意味
ラン内レベルのEXP進捗を表示する。ダンジョン毎にLv1リセットのため、 序盤は非常に速くバーが進む(成長体感)。
ミニマップ
| 項目 | 仕様 |
|---|---|
| 位置 | 画面右上 |
| サイズ | 160x160px(PC)/ 100x100px(モバイル) |
| 表示内容 | フロアマップ、プレイヤー位置(▲)、敵位置(赤点)、アイテム(黄点)、階段(シアン矢印)、ポータル(紫点) |
| スタイル | 半透明ダーク背景、ネオンシアンのライン |
| 回転 | プレイヤーの向きに合わせて回転(北固定モード切替可) |
| フロア表示 | 「3F / 15F」形式で現在階/最大階を表示 |
| トラップ表示 | 発見済みトラップは黄色の×マーク |
ダンジョン情報
| 項目 | 仕様 |
|---|---|
| 位置 | 画面左(HPバーの下) |
| 表示 | 現在フロア + 残り敵数 |
| ボスフロア時 | 「BOSS FLOOR」と赤字で表示 |
| アニメーション | 敵撃破時にカウントがパルスアニメーション |
ダメージポップアップ
プレイヤーの攻撃がヒットした際、敵の位置にダメージ数値がポップアップする。
| 種類 | 表示 | カラー | サイズ |
|---|---|---|---|
| 通常ダメージ | -数値 | #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 │
└──────────────────────────────────┘
未識別アイテムの場合:
┌──────────────────────────────────┐
│ ??? チップ GET! │
│ 使用して識別する │
└──────────────────────────────────┘| 項目 | 仕様 |
|---|---|
| 位置 | 画面下部中央 |
| 表示時間 | 2.0s |
| スタッキング | 最大3件まで同時表示(上に積み上がる) |
| ボーダーカラー | レアリティに応じた色(装備管理と同じ)/ ???チップは灰色 |
| アニメーション | 右からスライドイン(0.2s)→ 表示 → 左にスライドアウト(0.2s) |
スキルバー
| 項目 | 仕様 |
|---|---|
| 位置 | 画面下部 |
| 表示 | スキルアイコン + キーバインド + クールダウン |
| クールダウン表示 | スキルアイコン上に円形ゲージ + 残り秒数 |
| 使用不可時 | グレーアウト + ロックアイコン |
レベルアップUI
ダンジョン内でレベルアップした際に表示されるスキル選択画面。 ゲームは一時停止し、3つのスキルカードから1つを選択する。 10秒以内に選択しないと直前のビルド方針に沿って自動選択される。
┌──────────────────────────────────────────────────────────────────┐
│ │
│ ✦ LEVEL UP! ✦ │
│ Lv.12 → 13 │
│ 「3F」 │
│ │
│ ╭──────╮ │
│ │ 0:07 │ ← 10秒カウントダウン │
│ ╰──────╯ │
│ ╭━━━━━━━━━╮ ← 円形タイマーゲージ │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ │ │ │ │ │ │
│ │ ⚡ FURY │ │ 🛡 AEGIS │ │ 💨 HASTE │ │
│ │ │ │ │ │ │ │
│ │ ATK +15% │ │ DEF +20% │ │ SPD +25% │ │
│ │ │ │ │ │ │ │
│ │ 攻撃力が │ │ 防御力が │ │ 移動速度が │ │
│ │ 大幅に上昇 │ │ 大幅に上昇 │ │ 大幅に上昇 │ │
│ │ │ │ │ │ │ │
│ │ [1:SELECT] │ │ [2:SELECT] │ │ [3:SELECT] │ │
│ │ │ │ │ │ │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │
│ ※ 10秒で自動選択されます │
└──────────────────────────────────────────────────────────────────┘
タイムアウト時:
┌──────────────────────────────────────────────────────────────────┐
│ AUTO: ⚡ FURY (ATK +15%) │
│ ← 0.5秒表示で即再開 │
└──────────────────────────────────────────────────────────────────┘スキルカード仕様
| 項目 | 仕様 |
|---|---|
| 表示枚数 | 3枚(ランダム選出) |
| 選択方法 | クリック/タップ or 1/2/3キー |
| 制限時間 | 10秒(円形ゲージ + 秒数表示) |
| 残り3秒 | ゲージが赤く点滅、警告SE |
| タイムアウト時 | 直前と同カテゴリのスキルを自動選択 |
| 初回タイムアウト | 3択からランダム選択 |
| 自動選択通知 | 「AUTO: [スキル名]」を0.5秒表示 |
| 出現アニメーション | カードが下から順にスライドイン(0.1s間隔) |
| ホバー | カードが浮き上がり(Y -10px)、グロウエフェクト |
| 選択時 | 選択カードが拡大 → 他カードが消滅 → スキル名がフラッシュ表示 |
| カラー | カード背景はダーク、ボーダーはスキルの属性色 |
帰還/続行選択UI(ボス撃破後)
ボスフロア(5F/10F/15F)でボスを撃破した後に表示される選択画面。
┌──────────────────────────────────────────────────────────────────┐
│ │
│ ◆ BOSS DEFEATED ◆ │
│ 「5F ボス撃破!」 │
│ │
│ ┌──────────────────┐ │
│ │ 所持アイテム: 8個 │ │
│ │ ★★★ ×1 ★★ ×2 │ │
│ │ ★ ×3 その他 ×2 │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ │ │ │ │
│ │ 🏠 帰還する │ │ ⬇ さらに深く潜る │ │
│ │ │ │ │ │
│ │ 全アイテム持ち帰り │ │ 6F〜10F │ │
│ │ 安全に帰還 │ │ 報酬2倍エリア │ │
│ │ │ │ だが死んだら全ロスト │ │
│ │ │ │ │ │
│ │ [F: 帰還] │ │ [G: 続行] │ │
│ │ │ │ │ │
│ └──────────────────────┘ └──────────────────────┘ │
│ │
│ ※ 帰還ポータルは消えません。ゆっくり判断できます │
│ │
└──────────────────────────────────────────────────────────────────┘帰還/続行選択の仕様
| 項目 | 仕様 |
|---|---|
| 表示タイミング | ボス撃破後、帰還ポータルに接近してFキー押下時 |
| ゲーム状態 | 一時停止(ポーズ) |
| 制限時間 | なし(じっくり判断できる) |
| 帰還ボタン | Fキー(PC)/ 左ボタン(モバイル) |
| 続行ボタン | Gキー(PC)/ 右ボタン(モバイル) |
| 現在の所持品表示 | レアリティ別のアイテム数を表示 |
| 次エリアの情報 | 報酬倍率と危険度を表示 |
設計意図
このUIは本作のコアテンション「帰るか、進むか」を最も感じる瞬間。 所持品の価値と次エリアのリスク・リターンを明確に提示し、 プレイヤーに自覚的な判断を促す。制限時間を設けないことで、 焦りではなく純粋なリスク評価で判断させる。
リフトサージ(モンスターハウス)警告UI
┌──────────────────────────────────────────────────────────────────┐
│ │
│ ⚠ RIFT SURGE ⚠ │
│ リフトサージ発生! │
│ │
│ 敵が大量に出現する! │
│ │
│ 出口封鎖... 全滅させろ! │
│ │
└──────────────────────────────────────────────────────────────────┘| 項目 | 仕様 |
|---|---|
| 表示タイミング | モンスターハウスの部屋に入室時 |
| 表示時間 | 2.0秒 |
| 画面効果 | 赤いフラッシュ + 画面振動 |
| SE | 警告アラーム音 |
| 追加HUD | 「残り敵数」カウンターが一時的に表示 |
トラップ発動UI
トラップ(グリッチトラップ)を踏んだ際の通知。
┌──────────────────────────────────┐
│ ⚠ グリッチトラップ! │
│ データリーク: HP -15% │
└──────────────────────────────────┘| 項目 | 仕様 |
|---|---|
| 表示位置 | 画面上部中央 |
| 表示時間 | 1.5秒 |
| カラー | 赤背景 + 白文字 |
| 画面効果 | 短い画面振動(0.3秒) |
モバイル バーチャルジョイスティック
配置
画面下部:
┌────────────────────────────────┐
│ │
│ ┌──────┐ ┌───────┐ │
│ │ │ │ [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バー(画面上部中央) |
| ボス撃破後 | 帰還/続行選択UI |
| リフトサージ | リフトサージ警告 + 残り敵数カウンター |
| トラップ発動 | トラップ通知 |
| 死亡 | 全HUDフェードアウト → 死亡演出 |
| ポーズ中 | 全HUD + ポーズメニュー |
ボスHPバー
ボス遭遇時に画面上部中央に表示される。
┌──────────────────────────────────────────────┐
│ ◆ GLITCH OVERLORD ◆ [5F BOSS] │
│ ████████████████████████████░░░░░░ 72% │
│ 弱点: ???(ヒント未発見) │
└──────────────────────────────────────────────┘
ヒント発見済みの場合:
┌──────────────────────────────────────────────┐
│ ◆ GLITCH OVERLORD ◆ [5F BOSS] │
│ ████████████████████████████░░░░░░ 72% │
│ 弱点: データ属性(ヒントから判明) │
└──────────────────────────────────────────────┘| 項目 | 仕様 |
|---|---|
| 位置 | 画面上部中央 |
| 幅 | 画面幅の60%(PC)/ 80%(モバイル) |
| 出現 | ボス名テキストがタイプライター風に表示 → バーがスライドイン |
| カラー | #ff2d75(ネオンピンク)のグラデーション |
| 低HP | 30%以下でバーが点滅 |
| フロア表示 | ボス名の右に「5F BOSS」等のフロア表記 |
| 弱点表示 | ヒント発見済みなら弱点属性を表示。未発見なら「???」 |