[UEFN] 公式ドキュメント「Making a Title Sequence」をやってみて

## はじめに
UEFNのウィジェットブループリントについて、Canvasに画像等を配置するくらいしか知らなかった執筆者が、以下の公式ドキュメントで学んで、少しアレンジしました。
本記事では、画像やレイアウト、メニューボタンを中心に変更しており、変更点を中心に記載します。基本的な設定はドキュメント「Making a Title Sequence」の通り行っており、詳細はURLをご参照ください。

Making a Title Sequence

https://dev.epicgames.com/documentation/en-us/uefn/making-a-title-sequence-in-unreal-editor-for-fortnite

UI Widget Editor

https://dev.epicgames.com/documentation/en-us/uefn/ui-widget-editor-in-unreal-editor-for-fortnite#userwidget



## 完成図
<iframe width="560" height="315" src="https://www.youtube.com/embed/mvCJZsYZroQ?si=aGI88azADHzzzMMp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## 公式ドキュメントから学べたこと
1. 「カメラ：定点」の仕掛けとVerseを組み合わせた使い方
2. 2つのウィジェットブループリントの使い方。
「User Widget」は表示用、「Modal Dialog Variant」は押されたボタンに反応を返す用
3. ボタンウィジェットの上にテクスチャ等重ねて、ボタンを押下する方法。可視性の項目に注目！

## 概要
イントロを表示したあと、タイトルとメニューボタンを表示しています。

### 仕掛け
1. ポップアップダイアログ
メニューボタンの表示用。反応タイプをメニューのボタン数で設定します。（今回は4ボタン）

2. カメラ：定点×2（「Making a Title Sequence」と同じ設定）
- イントロの黒い背景の表示用。
![スクリーンショット 2023-12-24 101539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/2e784702-1f20-a41e-93ce-1f105dd4eebc.png)
- タイトル画面表示時の背景を表示。
![スクリーンショット 2023-12-24 104257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/19804b93-7160-e880-fc9f-7e7e0f5df37f.png)

3. HUDメッセージの仕掛け×4
- イントロのスプラッシュ画像の表示用。
スプラッシュ画像のウィジェットブループリントの数分、HUDメッセージの仕掛けを使用する（今回は3個）
![スクリーンショット 2023-12-24 103840.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/a2db021a-39e7-2920-2741-95735b0d6834.png)
- タイトル画像の表示用。
![スクリーンショット 2023-12-24 105114.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/efa3f5fd-b840-067a-6fb6-a9f9e5a549e9.png)

4. HUD制御×2
HUDを非表示にするものと、非表示にしたHUDを表示するものです。
「HUDを表示する」を、それぞれ「いいえ」、「はい」と設定します。

5. トリガー
Verseの処理の最後にトリガーを行っています。今回未使用ですが、Verseの処理のあとに処理を追加する場合に使用できます。

6. エンドゲームの仕掛け
今回、メニューのボタン4「QUIT」押下時にゲーム終了にすることにしました。
ユーザーオプション - 機能 > 起動する
　ポップアップダイアログの「OnResponding Button 4」

### Verse
処理内容は「Making a Title Sequence」と同じです。（変数名とSleepの時間を好みに変えたくらい）
![スクリーンショット 2023-12-24 094927.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/e40b5273-2f98-e201-128d-b06810ad1531.png)

![スクリーンショット 2023-12-24 094943.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/7c013b61-9c79-81ff-68b9-07f788a14d9f.png)


### ウィジェットブループリント
ウィジェットブループリントは、私は5つ用意しました（メニューボタン用×1、スプラッシュ画像用×3、タイトル（冒険者）画像用×1）

![スクリーンショット 2023-12-24 090812.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/4250fae3-479f-4405-35ce-0fbc44042dac.png)

フォートナイトのボタンウィジェットは透明にすることはできないので、上にテクスチャを重ねます。ボタンウィジェット（「UEFN BUtton Quiet」）のみ「Visible」にして、ボタン以外は「Not Hit-Testable (Self Only)」にします。
![スクリーンショット 2023-12-24 091015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/52672a7f-0f6c-6d48-893f-ae554d95dba7.png)
見た目上のボタン一つにつき、以下6枚の画像のように設定しています。
![スクリーンショット 2023-12-24 091316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/ee8f867f-7c6a-85d3-d8ab-069565e6fe49.png)

![スクリーンショット 2023-12-24 091729.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/9369081f-a474-e390-8360-cae196ba3942.png)

![スクリーンショット 2023-12-24 091504.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/2d69d6e5-7b69-23be-4ec7-855590a5f283.png)

![スクリーンショット 2023-12-24 091429.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/39de719c-5f1a-ac8b-830f-d6b0e9f6e62f.png)

![スクリーンショット 2023-12-24 091416.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/156dbabe-9445-002d-9dbd-8d46ba5ca781.png)

![スクリーンショット 2023-12-24 091325.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/81209c18-c180-3fda-8abe-1aa8759144c3.png)
タイトル画像は、画像を重ねて作成しています。（下の層から順に、背景画像→黒い半透明→円形の画像→キャラクターのマテリアル）
![スクリーンショット 2023-12-24 112134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1947445/57d2992e-5d9b-597b-b36a-0195d9bb7821.png)


## おわりに
フォートナイトのボタンウィジェットには色がついているので、ボタンウィジェットの上にテクスチャを重ねられないものかとずっと思っていました。アーリーアクセスの機能「カメラ：定点」と一緒に思いがけず知ることができてよかったです。
また「UI Widget Editor」でウィジェットブループリントのビューバインディングについて学ぶことができました。ただ、ボタンが押されたとき以外の使用方法がわかっていないので、ビューバインディングの情報にも注目したいと思います。
本記事を読んでくださりありがとうございました。