blog heroalche.studio

クリエイティブ2.0でカスタマイズUIを実装する手順【UEFN】

UEFN
UI

著者：

WANGHUI

投稿日 2023.11.14更新日 2023.11.14

はじめに

こんにちは!Creative 2.0とUEFNが2023年3月にリリースされるに伴い、Unreal Engine内の一部機能も公開されました。自作の3Dモデルや素材をインポートし、全く新しいゲームプレイを作成することで、Fortniteのスタイルやプレイ感とは全く異なる世界をFortnite内で作り出すことが可能になります。 その中で、カスタマイズのUIを追加することで、ゲームの世界観をさらに変化させ、没入感を高めることができます。

それでは、UEFN内でカスタマイズUIを実装する方法について見ていきましょう。

（*Xでの動画投稿は文末にあります。）

1.カスタマイズUIを作るメリット

UIを通じて、プレイヤーは視覚と直感でゲームについての理解をより迅速に得ることができます。恋愛シミュレーションゲームには、画面下部に常駐する美しい会話ボックスがあり、レーシングゲームでは右下に実世界の燃料計を模倣したインターフェースがあります。MMORPGにはチャット、HPとスキルバーが不可欠です...Fortniteは建築が可能なバトルロイヤルゲームで、他のバトルロイヤルゲームと同様のUI要素があります：fps、カウントダウン、装備バー、方位表示、残り人数、キル数。さらに、Fortniteでの勝利に重要な要素である建築uiは、装備バーの上に配置されています。平行宇宙の世界観を持つゲームとして、彩度が高い配色と不規則な台形のボタンはより多くの若年層ユーザーを引きつけ、装飾を控えめにしたUIスタイルはコラボコンテンツへの包容力を高めています。

したがって、FortniteでUIのレイアウトやスタイルを変更しようとするとき、あなたはおそらくゲームのジャンルを変更したいと思っているかもしれませんね。ゲームの世界観を強調し、ゲームの機能を示唆し、プレイヤーに必要な情報を提供すること。これがカスタマイズUIのメリットと思います。

2.UEFNでUIを表示する2種類のデバイスとその特徴

UEFNでは、UIを表示するためのデバイスが2種類あります：HUD Message DeviceとPop-up Dialog Deviceです。どちらもWidget Blueprintをロードして表示することができますが、違いはPop-up Dialog Deviceが表示画面上でインタラクティブな機能を実行できる点にあります。ボタンとイベントをバインドすることが可能です。一方、HUD Message DeviceはUI画面を表示したり、直接テキスト情報を表示したりすることができ、シンプルなアニメーション効果がありますが、より送信者に近く、プレイヤーはこれと主動的にインタラクションすることはできません。

↓Pop-up Dialog Deviceの例 pop-upDialogDeviceSample

↓HUD Message Deviceの例 HUDsample2

3.Widget Blueprintを使用してフルサイズの画面を作成する

Blueprintには様々な種類があり、その中でWidget Blueprintは2D UIを構築するための専用ツールです。Widget Blueprintでは、大まかにPanel、Image（Material）、Text、UEFNのデフォルトボタンなどを配置することができ、サイズ設定、位置設定、可視性設定、画面プレビュー設定などの詳細な設定が可能です。

次に、1920x1080の解像度のUI画面を作成する方法を紹介します。これにより、ほとんどのコンピューター画面に適応できるようになります。自動的に適応する画面は他の方法でも実現できますが、次回の投稿でさらに詳しく説明します。

右クリック -> User Interface -> Widget Blueprint -> User Widget

先ずはUEFNを開き、左下角にあるContent Drawerをクリックし、Content Drawer内で右クリックして作成メニューを開きます。User Interfaceカテゴリの下のWidget Blueprintを探し、User Widgetを選択します。

WidgetBluePrint 紹介２

画面設定をdesiredにする　->Size Boxを設置する　-> Overrideを1920x1080にする　->Canvas Panelを設置する

作成したWidget Blueprintをダブルクリックで開いてください。まず右上角の画面表示設定を「Desired」に設定します。これにより、ゲームプレイ中の画面サイズと同じレイアウトが表示され、何度もテストを繰り返す必要がなくなります。次に、左側のパレットから「Panel」セクションの「Size Box」を下の「Hierarchy」にドラッグしてください。そして、「Details」メニューでサイズを1920x1080に設定します。

紹介３

次に、Canvas PanelをSize Box内にドラッグし、そのアラインメントアンカーを全画面にフィルするように設定してください。Size Boxには最大で1つのコンポーネントしか収容できませんが、Canvas Panel内には複数のコンポーネントを収容できます。素材が多い場合は、スクリーンショットのようにCanvas Panel内に事前に複数のBoxを配置し、その後でBox内にImageやUEFN Text Blockなどのコンポーネントを入れることをお勧めします。

紹介４

Imageコンポーネントを例にとると、Imageコンポーネントを選択し、画面右側のAppearanceセクションのBrowseアイコン（ステップ⑧）から読み込みたい素材（jpg、png、またはMaterial）を選択し、その後、Browseの隣にあるアイコンをクリックしてインプットができます。

紹介５

4.ゲーム内でUIを表示するための簡単な設定方法

ゲームインターフェースに戻りましょう。左下隅のContent Drawerをクリックし、Content Drawer内でFortniteフォルダー下のDeviceフォルダーを探し、HUD Message Deviceを検索してゲーム内にドラッグします。ゲーム開始時に起動するように設定し、起動の遅延時間は0秒にします。

紹介6

次にHUDWidgetオプションを探します。フォルダーのアイコン（ステップ13）をクリックし、Content Drawerで表示したいWidget Blueprintを選択し、フォルダーアイコンの左側にあるボタンをクリックして読み込みます（ステップ15)。 これで実装は完了です！

紹介7

Xでの動画はこちらです