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

このステップではメインメニューの視覚的レイアウトを行います。

Windows
MacOS
Linux

本ページは必要なくなりました。


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

  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] オプションにチェックを入れて [ZOrder] を「1」に設定します。

    ![](Hierarchy4.png)

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

  7. 別の [Vertical Box] を選択し、[Details] パネルで「Options」に名前変更し、[isVariable] オプションにチェックを入れて [ZOrder] を「1」に設定します。

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

    ![](Hierarchy5.png)

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

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

    ![](Hierarchy6.png)

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

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

    ![](Hierarchy7.png)

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

  11. Hierarchy[Image] を選択します。次に [Details] パネルの [Appearance][Brush] で、使用する テクスチャスプライト または マテリアル を選択します。

    ![](Hierarchy8.png)

    このガイドと同じものをご利用になりたい場合は、

    [バックグラウンドのサンプル](ExampleBackground.png)
    からダウンロードできます。

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

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

    ![](Hierarchy9.png)

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

    ![](Hierarchy10.png)

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

    ![](Hierarchy11.png)

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

    ![](Hierarchy12.png)

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

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

    ![](Hierarchy13.png)

  17. それぞれの Text ウィジェットの [Details (詳細)] パネルで フォントサイズ配置 の調整ができます。

    ![](Hierarchy14.png)

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

  18. Vertical Box Options を自由に設定して、Vertical Box Main Menu のすぐ後ろに移動します。

    ![](Hierarchy15.png)

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

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


Select Skin
Light
Dark
Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信