Skip to content

ダンジョン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!#ff2d751.5倍 + シェイク
弱点攻撃-数値 + WEAK!#f0f0001.3倍
回復+数値#00ff88標準
ミスMISS#8888880.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 148pxATKの左上スキルスロット1
Skill 248pxATKの上スキルスロット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(ネオンピンク)のグラデーション
低HP30%以下でバーが点滅
フロア表示ボス名の右に「5F BOSS」等のフロア表記
弱点表示ヒント発見済みなら弱点属性を表示。未発見なら「???」