プレイ画面に文字を表示

まずはウォーミングアップです。基本的な使い方を覚えましょう。
UMGを使ってプレイ画面に文字を表示してみます。

UMGはウィジェットブループリントと呼ばれる専用のブループリントで作成します。
まずは新規にウィジェットブループリントを作成しましょう。

整理したい方は事前にウィジェット用のフォルダを作ると良いです。

00:04　右クリックから「ユーザーインターフェイス」の「ウィジェットブループリント」を選択
00:09　名前を入力して完了

作成したウィジェットブループリントをダブルクリックで開きます。

開くとこのような画面が出てきます。

ウィジェットブループリントは「デザイナー」と「グラフ」という２つのモードがあります。
下の動画で簡単に説明します。

00:00～　右上にある「デザイナー＞グラフ」タブでモードを変える事ができます。

「デザイナー」は主に表示したいUIのレイアウトを設定します。
00:15～　左上の「パレット」にはテキストやスライダー、ボタンなど他にも色々なウィジェットが用意されています。配置する時はここから必要なパーツ（ウィジェット）を持っていきます。
00:48～　左下の「ヒエラルキー」には配置されているウィジェットが表示されます。
01:01　右の「詳細」ではウィジェットの詳細設定をする事ができます。
01:19　下の「アニメーション」ではウィジェットにアニメーションを設定する事ができます。

01:31　「グラフ」ではブループリントを使いウィジェットのロジックを設定していきます。
01:42　ブループリントの組み方は基本的に今まで登場したブループリントと同じです。

では、文字を表示させましょう。

00:00　「デザイナー」タブを開き、左の「パレット」から「Text」をドラッグ＆ドロップ
00:09　表示させたい文章を入力・配置（「詳細パネル」の「Font」にある「Size」でサイズ変更）
00:35　コンパイル

ウィジェットブループリントでの作業は終わりですが、まだプレイ画面に表示されません。
レベルブループリントでウィジェットブループリントを表示させるブループリントを組みましょう。

00:38　レベルブループリントを開く
00:48　「イベント BeginPlay」からピンを出し「Create Widget」（ウィジェットを作成）に繋ぐ
01:05　「Class」は先程作った「ウィジェットブループリント」を選択
01:11　「Return Value」からピンを出し「Add to Viewport」に繋ぐ
01:23　コンパイルして閉じる
01:32　プレイして、文字が表示されているか確認

無事、文字を表示する事ができました。
ですが、少々フォントが味気ないですね。次は、フォントを読み込んで追加しましょう。

フォントを追加する

フォントを追加してウィジェットの文字に適用します。

00:00　フォント用のフォルダを作成
00:11　追加したいフォントをドラッグ＆ドロップ（.OTF または .TTF）
00:14 「Yes」をクリック

インポートはこれで完了です。ウィジェットの文字に反映します。
00:21　ウィジェットブループリントを開く
00:26　変更したい文字を選択
00:30　詳細パネルの「Appearance」にある「Font Family」から追加したフォントを選択
00:39　コンパイルして完了

フォントインポートについての詳しい情報は公式ドキュメントをご覧ください。

では次にスタート画面を作りましょう。

スタート画面を作成

私がスタート画面を作る時は、スタート画面専用のレベルを別で作ることが多いのですが、今回は初心者向けという事ですので、現在のレベルでスタート画面を作成します。

まず、スタート画面用の「ウィジェットブループリント」を作り、ボタンと文字を配置します。

00:00　ウィジェットブループリントを新規作成
00:11　ウィジェットブループリントを開く
00:13　背景を入れたいので、「Border」をビジュアルデザイナにドラッグ＆ドロップ
00:16　サイズや位置を合わせる
アンカーをセンターにして、AlignmentのXYを両方0.5にすると、配置したパーツの真ん中にアンカーが配置されます。
※アンカーについての詳しい情報は 公式ドキュメントをご覧ください。
00:36　「Appearance」の「Brush Color」で色を決定
背景は完了です。

〈STARTボタン〉を作ります。
00:46　「Button」を「階層」にある「Border」の下にドラッグ＆ドロップ
00:51　サイズと位置を合わせます
01:22　「Appearance」の「Tint」「A」を変えることで透明度を調整できます
01:42　「Text」を「Button」にドラッグ＆ドロップし、「START」と入力
02:00　サイズやフォントを変更
02:07　もう一つ「Text」を「Canvas Panel」の下に追加（無くても構いません）
02:30　「Click to start」　と入力しフォントと位置を調整

初めに作った背景の位置がズレてしまいました。
03:17　動かしたくないパーツは階層にあるカギマークをロックしておくと安心です。

次に、レベルブループリントを編集し今作ったスタート画面が表示されるようにします。

メニューボタン画面を作る

今回は〈操作説明ボタン〉と〈終了ボタン〉を作ります。

メニューボタン用のウィジェットブループリントを作りましょう。
※基本的な事は今までやってきているので、ここから先の説明はポイントだけ紹介していきます。

00:00～　メニューボタン用のウィジェットブループリント(Menu)を作り、ビジュアルデザイナーに〈操作説明ボタン〉と〈終了ボタン〉ボタンを配置します。
03:07～　このメニューボタンは〈STARTボタン〉をクリックした後に表示させたいので、スタート画面のウィジェットブループリントにブループリントを組んでいきます。
03:22～　〈STARTボタン〉をクリック後、スタート画面をRemoveし、その後にメニューボタン用のウィジェットブループリント(Menu)を表示させます。
04:02～　Input Modeが「Set Input Mode Game Only」になっています。メニューボタンが出ている時のInput ModeはUIとGameどちらも使うので「Set Input Mode Game and UI」に変更します。
04:23～　コンパイルしてプレイします。無事、〈STARTボタン〉をクリックするとメニューボタンが表示されました。

ボタンクリック後の処理を組んでいませんが、一旦ここでストップし、〈操作説明ボタン〉クリック後に表示されるウィジェットを先に作ります。

操作説明画面を作る

操作説明用のウィジェットブループリントを作ります。

00:00～　操作説明用のウィジェットブループリント(Operation)を作り、操作説明の画像(.png)をインポート。ビジュアルデザイナーに画像と文字、背景、〈戻るボタン〉を配置します。
※操作説明の画像はこちらのサイトでダウンロードしたものを使用しています。使用した素材は こちら。

04:42～　メニューボタン用のウィジェットブループリント(Menu)を開き、〈操作説明ボタン〉クリック後の処理を組んでいきます。
〈操作説明ボタン〉をクリック後、メニューボタンのウィジェットをRemoveし、その後に操作説明画面(Operation)を表示させます。
06:07～　操作説明画面(Operation)が出ている時もマウスカーソルを表示したいので、「Show Mouse Cursor 」にチェックを入れる。
06:15～　この時はUIのみ操作したいので、「Set Input Mode UI Only」を使い、「Set Game Paused」の「Paused」にチェックを入れ、プレイは一時停止にします。
06:56～　コンパイルしてプレイします。無事、〈操作説明ボタン〉をクリックすると操作説明画面が表示されました。

次は、操作説明画面に表示されている〈戻るボタン〉クリック後の処理を組んでいきましょう。