未経験からUE5|タイトルメニューの作成

はじめに #

ゲームを開始すると基本的にいきなりゲームを開始するというのは、ユーザー目線から見て非常に困惑します。
それを防ぐために、ゲームを開始する前にタイトル画面を作成し、そこでユーザーにゲームを開始するかゲームを終了するか選んでもらいましょう。

準備 #

UnrealEngine を起動し、ゲームプロジェクトから空のプロジェクト作成してください。
プロジェクト名は「TitleScreen」とします。

Widget の作成 #

UnrealEngine には、Widget と呼ばれるユーザーインターフェースを扱うブループリントが存在します。
今回はそれを作成し、ゲーム画面上に出力したいと思います。

以下 Gif 画像を参考に、Widget ブループリントを作成してください。
Widget ブループリントは TitleWidgetBluePrint とします。

デザイナー作成 #

Widget ブループリントを開くと、Widget をカスタマイズすることができます。
作成した TitleWidgetBlueprint を開き、以下コードをコピペしてください。

Begin Object Class=/Script/UMG.CanvasPanel Name="CanvasPanel_93"
Begin Object Class=/Script/UMG.CanvasPanelSlot Name="CanvasPanelSlot_7"
End Object
Begin Object Name="CanvasPanelSlot_7"
LayoutData=(Offsets=(Left=764.000000,Right=382.059937,Bottom=799.537354))
Parent=/Script/UMG.CanvasPanel'"CanvasPanel_93"'
Content=/Script/UMG.VerticalBox'"VerticalBox_0"'
End Object
Slots(0)=/Script/UMG.CanvasPanelSlot'"CanvasPanelSlot_7"'
bExpandedInDesigner=True
End Object
Begin Object Class=/Script/UMGEditor.WidgetSlotPair Name="WidgetSlotPair_22"
WidgetName="CanvasPanel_93"
End Object
Begin Object Class=/Script/UMG.VerticalBox Name="VerticalBox_0"
Begin Object Class=/Script/UMG.VerticalBoxSlot Name="VerticalBoxSlot_9"
End Object
Begin Object Class=/Script/UMG.VerticalBoxSlot Name="VerticalBoxSlot_8"
End Object
Begin Object Class=/Script/UMG.VerticalBoxSlot Name="VerticalBoxSlot_1"
End Object
Begin Object Name="VerticalBoxSlot_9"
Size=(Value=50.000000)
Padding=(Top=200.000000)
HorizontalAlignment=HAlign_Center
Parent=/Script/UMG.VerticalBox'"VerticalBox_0"'
Content=/Script/UMG.Button'"Exit"'
End Object
Begin Object Name="VerticalBoxSlot_8"
Size=(Value=50.000000)
Padding=(Top=200.000000)
HorizontalAlignment=HAlign_Center
Parent=/Script/UMG.VerticalBox'"VerticalBox_0"'
Content=/Script/UMG.Button'"Start"'
End Object
Begin Object Name="VerticalBoxSlot_1"
Padding=(Left=200.000000,Top=200.000000,Right=200.000000)
HorizontalAlignment=HAlign_Center
Parent=/Script/UMG.VerticalBox'"VerticalBox_0"'
Content=/Script/UMG.TextBlock'"TextBlock"'
End Object
Slots(0)=/Script/UMG.VerticalBoxSlot'"VerticalBoxSlot_1"'
Slots(1)=/Script/UMG.VerticalBoxSlot'"VerticalBoxSlot_8"'
Slots(2)=/Script/UMG.VerticalBoxSlot'"VerticalBoxSlot_9"'
RenderTransform=(Translation=(X=19.519519,Y=1.501501))
bExpandedInDesigner=True
End Object
Begin Object Class=/Script/UMG.TextBlock Name="TextBlock"
Text=NSLOCTEXT("\[E9B167F24B0042B8E03DE5966F126EE7\]", "E43A9AAE47D785D62E49B0B284F4FDB2", "メインメニュー")
Justification=Center
DisplayLabel="TextBlock"
End Object
Begin Object Class=/Script/UMG.Button Name="Start"
Begin Object Class=/Script/UMG.ButtonSlot Name="ButtonSlot_0"
End Object
Begin Object Name="ButtonSlot_0"
Padding=(Left=200.000000,Top=0.000000,Right=200.000000,Bottom=0.000000)
VerticalAlignment=VAlign_Fill
Parent=/Script/UMG.Button'"Start"'
Content=/Script/UMG.TextBlock'"TextBlock_1"'
End Object
Slots(0)=/Script/UMG.ButtonSlot'"ButtonSlot_0"'
bExpandedInDesigner=True
DisplayLabel="Start"
End Object
Begin Object Class=/Script/UMG.TextBlock Name="TextBlock_1"
Text=NSLOCTEXT("\[E9B167F24B0042B8E03DE5966F126EE7\]", "F751DF4E46F227EC89715D9794788029", "Start")
Justification=Center
bExpandedInDesigner=True
DisplayLabel="TextBlock_1"
End Object
Begin Object Class=/Script/UMG.Button Name="Exit"
Begin Object Class=/Script/UMG.ButtonSlot Name="ButtonSlot_0"
End Object
Begin Object Name="ButtonSlot_0"
Padding=(Left=200.000000,Top=0.000000,Right=200.000000,Bottom=0.000000)
VerticalAlignment=VAlign_Fill
Parent=/Script/UMG.Button'"Exit"'
Content=/Script/UMG.TextBlock'"TextBlock_2"'
End Object
Slots(0)=/Script/UMG.ButtonSlot'"ButtonSlot_0"'
bExpandedInDesigner=True
DisplayLabel="Exit"
End Object
Begin Object Class=/Script/UMG.TextBlock Name="TextBlock_2"
Text=NSLOCTEXT("\[E9B167F24B0042B8E03DE5966F126EE7\]", "7AB91DC1433564FD1D671D9F7B6DA861", "Exit")
Justification=Center
DisplayLabel="TextBlock_2"
End Object

イベントの作成 #

作成した TitleWidgetBlueprint にイベントを作成します。
以下の GIf 画像を参考にしてください。

作成したブループリントは以下の通りです。

レベルブループリントの修正 #

作成した TitleWidgetBlueprint をゲーム開始時に表示するようにしなければいけません。
以下 Gif を設定しゲーム開始時に表示されるようにレベルブループリントを編集しましょう。

作成したブループリントは以下の通りです。

ここまで出来たら、起動するとゲーム画面の上にタイトルが表示されるかと思います。
以下が起動したときの画面です。