1.Widget ブループリントの設定

3D ゲームワールドで表示する Widget ブループリントを作成します。

Windows
MacOS
Linux
On this page

3D ワールド空間でウィジェットを表示できるようにするには、まず表示する Widget ブループリント を作成しなければなりません。このチュートリアルでは、プレイヤーがナビゲートできる 3D メニューを作成しますが、この手法を使ってあらゆるタイプの 3D ウィジェットを作成することができます (ヘルスバー、インタラクティブなワールド内の UI 要素など)。

このガイドでは、Starter Content を有効にした状態で Blueprint Third Person テンプレートを使用して新規プロジェクトを作成しました。

ステップ

  1. プロジェクトの コンテンツ ブラウザ で、ルートの 「Content」 フォルダを 右クリック し、「UMG」という名前でフォルダを新規作成します。

  2. UMG」フォルダ内で Add New をクリックし、[User Interface][Widget ブループリント] を選択します。

    3DWidgets_1.png

  3. Widget ブループリント に「MainMenu」と名前を付け [Save All (すべて保存)] ボタンをクリックします。

    3DWidgets_2.png

  4. Widget ブループリントダブルクリック すると UMG エディタで開きます。

    3DWidgets_3.png

    デフォルトで Widget ブループリントの [Designer] タブに戻ります。

  5. [Hierarchy (階層)] ウィンドウで CanvasPanel (キャンバス パネル) を削除し、[Palette] ウィンドウから Vertical Box を追加します ([Panel (パネル)] セクションにあります)。

    3DWidgets_4.png

    Vertical Box を上の画像のように Rootドラッグ&ドロップ することができます。

  6. [Palette] ウィンドウの [Common]Text ウィジェットを Vertical Box にドラッグします。

    3DWidgets_5.png

  7. [Hierarchy] ウィンドウで Text ウィジェットをクリックします。次に [Details (詳細)] パネルでそれを [Fill] に設定し、水平および垂直に センタリング します。

    3DWidgets_6.png

  8. [パレット] ウィンドウの CommonButton ウィジェットを Vertical Box にドラッグします。

    3DWidgets_7.png

  9. [Hierarchy] ウィンドウで Button ウィジェットをクリックします。次に [詳細] パネルで [Size] を「Fill」に設定します。

    3DWidgets_8.png

  10. Button[Details] パネルの [Style][Normal]Tint (色調を弱める) をお好みの色に設定します (ここでは黒を選択しました)。

  11. [Hovered] を展開し、Tint の色を上記 Normal で使用したものとは違う色に設定します。

    3DWidgets_9.png

    これで Normal の場合はある色で表示され、マウスでボタン上を Hovered する (マウスをかざす) と別の色で表示されるようになります。

  12. [Hierarchy] ウィンドウで [Text Block] をクリックし、コピーし、[Vertical Box] をクリックして貼り付けます。

  13. 前の手順をあと 2 回繰り返して Text Block が 4 つになるようにします。

    3DWidgets_10.png

  14. [Hierarchy] ウィンドウで [Button] をクリックし、コピーし、[Vertical Box] をクリックして貼り付けます。

  15. 前の手順を繰り返して Button が 3 つになるようにします。

    3DWidgets_11.png

  16. [Hierarchy]Text Block を各 Button にドラッグします。

    3DWidgets_12.png

    以下のようなレイアウトになります。

    3DWidgets_13.png

  17. [Hierarchy] ウィンドウで一番上の Text Block をクリックし、次に [Details] パネルの [Content]Text を「MY GAME TITLE「に設定します。

  18. Text Block について [Details] パネルの [Appearance] の [Font] オプションで フォント サイズを変更できます。

    3DWidgets_14.png

    ここでは、MY GAME TITLE とメニューに見出しを付けそのサイズを 102 に設定しました。

  19. ボタンに表示される各テキストについて、そのテキストをお好みのメニュー オプションに変更します (サイズも設定します)。

    3DWidgets_15.png

    最終成果物のメニュー、LOAD GAMENEW GAMEQUIT GAME です。フォント サイズは 56 に設定されています。

  20. [Compile] をクリックし、次に [Save] をクリックし、ブループリントを閉じます。

最終結果

Widget ブループリントのセットアップが完成し、これを Actor ブループリント内の Widget コンポーネント として使用することができますが、この後で設定します。このチュートリアルではクリックしたときのボタンの機能は設定しませんが、少なくともこれは 3D ワールド空間でナビゲーションできるマウスの操作に反応するメニューになり、作業開始の考え方を示しています。

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback