◀ 5.

UE5でボタンに文字を記載する方法

▶

編集

ページの作成

テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレート

UE5でボタンに文字を記載する方法

Unreal Engine 5（以下UE5）では、UIの構築に使用する「UMG（Unreal Motion Graphics）」を利用して簡単にボタンを作成し、その上に文字を記載することができます。本記事では、ボタンに文字を記載する具体的な方法を解説します。

UMGの基本概要

UMGは、UE5でUIを作成するためのツールです。UMGを使用すると、ドラッグ&ドロップでボタンやテキスト、イメージなどのUI要素を配置できます。ボタンに文字を記載するには、ボタンとテキストの組み合わせが必要です。

ボタンに文字を記載する手順

以下は、UMGを使用してボタンに文字を記載する手順です。

手順1: ウィジェットブループリントの作成

1. コンテンツブラウザで右クリックし、「User Interface」から「Widget Blueprint」を選択します。 2. 作成されたウィジェットブループリントを適切な名前（例: MainMenuWidget）にリネームします。 3. ダブルクリックしてウィジェットエディタを開きます。

手順2: ボタンの追加

1. ウィジェットエディタの「Palette」タブから「Button」を選択し、キャンバスパネルにドラッグ&ドロップします。 2. ボタンの位置やサイズを調整します。

手順3: ボタンにテキストを追加

1. 「Palette」タブから「Editable Text」を追加します。２. 「Hierarchy」タブで「Editable Text」を先ほどの「Button」にドラッグ & ドロップして子要素にします。 3. 「Details」タブを使用して、テキストの内容を設定します（例: "Start Game"）。４. 同じく「Details」タブから「動作」の「Visibility」を「Not Hit- Testable(Self Only)」にする。

ポイント: テキストのフォントサイズやスタイルは「Details」タブでカスタマイズできます。

手順4: ボタンのデザインを調整する

1. 「Button」を選択し、「Details」タブで「Appearance」セクションを開きます。 2. 背景色やホバー時の色などをカスタマイズします。 3. 必要に応じて、ボタンの角丸やボーダーを設定します。

手順5: ウィジェットをゲームに表示する

1. レベルブループリントを開きます。 2. 「BeginPlay」イベントを追加します。 3. 「Create Widget」ノードを追加し、作成したウィジェットブループリント（例: MainMenuWidget）を指定します。 4. 「Add to Viewport」ノードを接続してウィジェットを画面に表示します。