Language:
Page Info
Engine Version:

3.メインメニューを作成する


最初に、以下のようにメインメニューのレイアウトを作ります。

  1. MainMenu Widget ブループリントを開きます。

  2. [Designer (デザイナ)] タブで、パレット からウィジェットを Hierarchy にドラッグ&ドロップして以下のようにセットアップします。

    Hierarchy1.png

    参考までに、キャンバス パネル には、Image が 1 つ、Text 付き Vertical Box が 1 つ、および Text 付きの 3つの Button があります。

  3. Hierarchy で、Vertical Box を選択し、右クリック して、それを コピー します。

  4. キャンバス パネル で右クリックして、Paste を選択して Vertical Box のもうひとつのコピーを貼り付けます。

    Hierarchy2.png

  5. 新しい Vertical Box右クリック して、Button をコピーし、それを貼り付けて 4 番めのボタン/テキスト ウィジェットを作成します。

    Hierarchy3.png

  6. ひとつめの Vertical Box を選択し、[Details (詳細)] パネルでそれを MainMenu に名前変更し、isVariable オプションにチェックを入れて ZOrder1 に設定します。

    Hierarchy4.png

    わかりやすくするためにウィジェットに名前を付けてそれを変数に設定して、アクセスできるようにするとともに、ZOrder を設定してこれから設定する画像の上に表示されるようにします。

  7. もうひとつの Vertical Box を選択し、[Details] パネルでそれを Options に名前変更し、isVariable オプションにチェックを入れて ZOrder1 に設定します。

  8. 以下の画像のように各 ボタン の名前を変更します。

    Hierarchy5.png

    ボタン名を更新し、各ボタンが何を行うかがわかるようにします。これにより、各ボタンの機能のスクリプティングが簡単になります。

  9. [Details] パネルの ContentText セクションで、各 Text ウィジェットを以下のように更新します。

    Hierarchy6.png

    各ボタンに表示されるテキストとメニューのヘッダーを更新します。

  10. Ctrl を押したまま各 ボタン を選択します。[Details] パネルで、 HoveredTint カラーを設定し、それぞれの SizeFill に設定します。

    Hierarchy7.png

    ここでは、すべてのボタンのサイズを調整し、マウスをかざしたときのボタンの色を定義します。

  11. HierarchyImage を選択します。次に [Details] パネルの AppearanceBrush で、使用する TextureSprite または Material を選択します。

    Hierarchy8.png

    このガイドと同じものをご利用になりたい場合は、バックグラウンドのサンプル からダウンロードできます。

    アンリアル エンジン にドラッグ&ドロップしてインポートします (確認メッセージが表示されるたびに Yes をクリックしてください)。

  12. [Designer] ウィンドウで、画像をサイズ調整してレイアウト全体を占めるようにします。

    Hierarchy9.png

  13. Image[Details] パネルで、[Anchor] ボタンをクリックして画面を満たすオプションを選択します。Scalebox を使って画像を保持することもできます。アスペクト比に適切にマッチするように画像を確実にスケーリング、リサイズします。

    Hierarchy10.png

  14. 両方の Vertical Boxes を選択し、左センター位置に Anchor (固定) します。

    Hierarchy11.png

  15. Options Vertical Box を選択し、Visibility(可視性) 設定を Hidden(非表示) に設定します。

    Hierarchy12.png

    デフォルトではオプションを表示しないようにし、スクリプトを通して可視にします。

  16. MainMenu の Vertical Box を選択し、サイズ調整し、Designer ウィンドウでお好きな位置に配置します。

    Hierarchy13.png

  17. Text ウィジェットの [Details (詳細)] パネルから、FontSize、および Alignment を調整することができます。

    Hierarchy14.png

    こうした設定を色々試して必要なエフェクトを得ることができます。

  18. Options Vertical Box をお好きなようにセットアップして、 Main Menu Vertical Box のすぐ後ろに移動します。

    Hierarchy15.png

    一度に見えるのは、このうちのひとつだけであるため、互いに重なっても問題はありません。

メニューの視覚的レイアウトが完了したら、次のステップでメニューの機能をスクリプティングします。