1. UMG（Unreal Motion Graphics）の基本とウィジェットの作成 [0]

thumbnail UMGは、Unreal Engineでメニューやボタンなどのユーザーインターフェース（UI）を作成するためのツールである。

1.1. UMGとは何か [0]

  1. UMGは、Unreal Engineプロジェクトにメニュー、ボタン、ロゴなどのUIを追加し、プロジェクトをよりインタラクティブにするためのUIエディターである [0]。
  2. UMGで作成するUIは「ウィジェットブループリント」と呼ばれる [5]。

1.2. 最初のウィジェットブループリントの作成手順 [3]

  1. コンテンツブラウザで「Ctrl + Space」を押し、新しいフォルダ「UI」を作成する [3]。
  2. 「UI」フォルダ内で右クリックし、「ユーザーインターフェース」から「ウィジェットブループリント」を選択する [4]。
  3. デフォルト設定の「ユーザーウィジェット」を選択し、アセットを作成する [6]。
  4. ウィジェットブループリントに「WBP_Menu」のような名前を付ける（「WBP_」はウィジェットブループリントの略） [7]。
  5. 作成したウィジェットブループリントをダブルクリックしてUMGエディターを開く [9]。

2. UMGエディターの構成とUI要素の追加 [10]

thumbnail UMGエディターは、パレットから要素をドラッグ＆ドロップしてUIをデザインし、詳細パネルでプロパティを設定する。

2.1. UMGエディターのモードとパネル [10]

  1. UMGは、パレット（ライブラリ）からテキスト、スライダー、画像などの要素をドラッグ＆ドロップしてUIをデザインするツールキットである [10]。
  2. UMGエディターには主に2つのモードがある [13]。
    1. デザイナーモード：UIの見た目をデザインする [13]。
    2. グラフモード：UIにロジックとインタラクティブ性（操作性）を追加する [15]。
  3. エディターの主要なパネルは以下の通りである [18]。
    1. キャンバスパネル：UI要素を配置するメインの領域である [18]。
    2. パレット（ライブラリ）：追加できるUI要素のカテゴリとリストが表示される [18]。
    3. 階層パネル：ウィジェットブループリント内の要素の親子関係が表示される [22]。
    4. 詳細パネル：選択した要素のプロパティ（値、サイズ、色など）を設定する [23]。

2.2. テキスト要素の追加と設定 [20]

  1. パレットから「Text」要素をキャンバスパネルにドラッグ＆ドロップする [20]。
  2. 階層パネルで、ウィジェットブループリントの下に「Text」が追加されたことを確認する [22]。
  3. 詳細パネルでテキストの値を「make good art」に変更する [23]。
  4. テキストのサイズを「42」に変更する [25]。
  5. テキストの色やフォントも詳細パネルで変更できる [27]。

3. 作成したUIをビューポートに表示する [31]

thumbnail

作成したUIは、レベルブループリントで「ウィジェットを作成」し、「ビューポートに追加」することでゲーム画面に表示できる。

3.1. レベルブループリントでのUI表示設定 [31]

  1. 作成したUIは、そのままではゲームプレイ時に表示されない [31]。
  2. UIをビューポートに表示するには、以下の手順を行う [32]。
    1. ツールバーの「ブループリント」から「レベルブループリントを開く」を選択する [35]。
    2. 「Event Begin Play」ノードからドラッグし、「Create Widget」を検索して追加する [38]。
    3. 「Create Widget」ノードの「Class」で、作成したウィジェットブループリント「WBP_Menu」を選択する [40]。
    4. 「Create Widget」ノードの青いピンからドラッグし、「Add to Viewport」を検索して追加する [44]。
    5. 「Add to Viewport」ノードの「Target」ピンと「Return Value」ピンが接続されていることを確認する [46]。

3.2. UIの表示確認 [47]

  1. ゲームをプレイすると、画面の左上に「make good art」というテキストが表示される [47]。

4. 複数のUI要素を配置するためのパネルの活用 [56]

thumbnail

複数のUI要素を配置するには、まずキャンバスパネルのような「パネル」を追加し、その中に要素を配置する必要がある。

4.1. パネルの必要性 [56]

  1. テキスト要素は子要素を持つことができないため、直接ボタンなどの他の要素を追加することはできない [57]。
  2. 複数のUI要素を配置するには、まず「パネル」を追加する必要がある [60]。

4.2. キャンバスパネルの追加と要素の配置 [61]

  1. 既存のテキスト要素を右クリックし、「Wrap With」から「Canvas Panel」を選択する [61]。
  2. 階層パネルで、キャンバスパネルの下にテキストが配置されたことを確認する [63]。
  3. パレットから「Button」要素をキャンバスパネルの下にドラッグ＆ドロップする [64]。
  4. キャンバスパネルを使用すると、要素を自由にドラッグして配置したり、サイズを変更したりできる [66]。
  5. ゲームをプレイすると、テキストとボタンの両方が表示される [68]。

5. その他のヒントと今後の展望 [69]

thumbnail

UIのテスト中にマウスカーソルを表示する方法や、今後の学習内容について説明する。

5.1. UIテスト中のマウスカーソル表示 [69]

  1. ゲームプレイ中にマウスカーソルが表示されない場合、「Shift + F1」を押すと一時的にマウスカーソルを表示できる [69]。
  2. 再度クリックすると、視点操作に戻る [72]。

5.2. 今後の学習内容 [76]

  1. 次のレッスンでは、ボタンのクリック機能やその他の操作について詳しく学ぶ [76]。
  2. 今後のレッスンで学びたい内容があれば、コメントで質問できる [77]。