top of page

【UE5+PS+XD】Devlog - 「血月」ゲームUIの制作(2):プレイヤーHUD「除魔」

  • 執筆者の写真: Wu Guanyu
    Wu Guanyu
  • 7月1日
  • 読了時間: 2分

現在ゲームシーンの制作と並行して、開発効率向上とゲーム全体のプレビュー機能強化のため、以下のツールを使用したUI制作パイプラインを構築中です:


以前の設計に基づき、ゲーム内には2つのフェーズが存在します。1つは「天罰」、もう1つは「Vampire Survivors」スタイルの「除魔」です。除魔フェースではプレイヤーがリアルタイムでより多くの情報を取得する必要があるため、HUDの設計はやや複雑になります。


■ 使用ツール:


コンセプトデザイン:Adobe Photoshop / XD


実装環境:Unreal Engine 5


■ 現在の開発フェーズ:


Photoshop

まずPhotoshopを使用して基本HUDのリファレンスデザインを作成します。プレイヤーステータス表示、スキルアイコン、撃破数などの要素を含み、特にプレイヤーのHPが一定値以下になると画面周辺に赤色のパルスエフェクトを発生させる警告表示を実装予定です。


Photoshopでリファレンスデザインを作成
Photoshopでリファレンスデザインを作成

Adobe XD

XDにHUDデザインをインポートし、レイアウト調整を行います。UX設計段階で作成済みのUIプレースホルダーに実際のデザインアセットを配置する作業へ移行します。操作ロジックに基づく機能実装は、次の工程で対応予定です。


XDのUIプレースホルダーの様子
XDのUIプレースホルダーの様子

Unreal Engine 5

画面表現性と視覚的美観を向上させるため、マテリアルを作成し、プレイヤー警告用マスクの点滅効果とHPバーの流動効果を実装します。

作成済みのHUDリファレンスをUnreal Engine 5にインポートし、レイアウトと機能の調整を行います。


「除魔」HUDの効果は以下の通りです:



今後のアップデート計画:


1.メイン画面の背景刷新


  • 静的背景画像を削除 → リアルタイムレンダリングシーンに移行

  • UE5のCinematic Cameraを使用した動的カメラワークの導入

  • 背景シーンとのインタラクティブ要素(時間帯/天候変化)を試験的に追加


2.ポーズ画面UIの制作


3. プレイヤーHUD「天罰」の制作

 
 
 

Comments


bottom of page