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

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

    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

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