1. Epic GamesDeveloper
  3. スレート エディタ ウィンドウのクイックスタート ガイド

スレート エディタ ウィンドウのクイックスタート ガイド

スレートを使用して、シンプルなエディタ ウィンドウをビルドします。

スレート エディタ ウィンドウのクイックスタート ガイド

これは、Unreal Engine の UI フレームワークである スレート を使用して、ユーザー入力に応答するシンプルなエディタ ウィンドウを作成する方法をステップごとに説明するガイドです。このページは、スレートと他のシステムとの相互作用に関する包括的なガイドではなく、スレートの構文が UI のレイアウトにどのように関係しているかと、UI をイベントに応答させるための基本事項に焦点を絞って説明します。

1. プロジェクトの設定

このガイドでは、以下の設定で SlateQuickstartGame という名称の新しいプロジェクトを使用します。

  • テンプレート：サードパーソン プロジェクト
  • C++ プロジェクト

また、既存のプロジェクトを使用して、このガイドの手順を実行することもできます。このプロジェクトは、エディタの機能に焦点を絞っているため、特定のターゲット プラットフォームに依存していません。

2. ウィンドウ プラグインを作成する

新しいエディタ ウィンドウをすばやく使用し始めるには、[Edit (編集)] > [Plugins (プラグイン)] ウィンドウを開いて、[+ Add (追加)] ボタンをクリックし、新しいプラグインを作成します。プラグイン タイプとして [Editor Standalone Window (エディタのスタンドアローン ウィンドウ)] を選択し、それに「SlateQuickstartWindow」という名前を付けます。[Create Plugin (プラグインを作成)] をクリックして完了します。

クリックして画像を拡大

これにより、基本的なエディタ ウィンドウをサポートするために必要な C++ クラスを持つ Plugin モジュールが自動的に作成されます。エディタを閉じて、プロジェクトを再コンパイルしてから、プロジェクトを再度開きます。新しいエディタ ウィンドウは、[Window (ウィンドウ)] ドロップダウンにあります。

クリックして画像を拡大

このウィンドウを最初に表示すると、プレースホルダー テキストが表示されますが、インタラクティブな要素は含まれません。

ウィンドウのコードを理解する

メニューの作成を続行する前に、SlateQuickstartWindowModule.cpp のコードを確認し、スレートの宣言型の構文の使用方法を簡単にプレビューします。スレート コードは OnSpawnPluginTab 関数に含まれています。最初に表示すると、関数は次のようになります。

TSharedRef<SDockTab> FSlateQuickstartWindowModule::OnSpawnPluginTab(const FSpawnTabArgs& SpawnTabArgs)

{
	FText WidgetText = FText::Format(

		LOCTEXT("WindowWidgetText", "Add code to {0} in {1} to override this window's contents"),
		FText::FromString(TEXT("FSlateQuickstartWindowModule::OnSpawnPluginTab")),
		FText::FromString(TEXT("SlateQuickstartWindow.cpp"))

		);

	return SNew(SDockTab)
	.TabRole(ETabRole::NomadTab)
	[
		// タブ コンテンツをここに入れます

		SNew(SBox)
		.HAlign(HAlign_Center)
		.VAlign(VAlign_Center)
		[
			SNew(STextBlock)
			.Text(WidgetText)
		]
	];

}

この関数は、次のステップを実行します。

  1. FText::Format を使用して、複数の文字列を組み合わせて WidgetText という文字列を作成します。
  2. SNew 関数を使用して、新しい SDockTab を定義します。これは、ドッキング可能なウィンドウを表します。
  3. SDockTab にコンテンツを格納することができる SBox 要素を指定します。このボックスはウィンドウの中心に揃える HAlign パラメータと VAlign パラメータを含んでいます。
  4. 新しい STextBlock を SBox に追加し、そのテキストを WidgetText の値として設定します。
  5. これらの UI 要素をすべて含む SDockTab を返します。

この仕組みを理解する最善の方法は、UMG で同様のユーザー インターフェースを作成する方法について考えることです。UMG でこれを再作成するには、ルート UI 要素としてボックス ウィジェットをステージ上にドラッグし、その中にテキスト ウィジェットを配置して、そのアライメントを中央に変更します。ステージと階層は、次の画像のようになります。

クリックして画像を拡大

SlateQuickstartWindow の場合、ビューポートのステージは SDockTab ウィジェットに置き換えられます。コードを確認すると、角括弧は指定されたウィジェット内にネストされている要素を定義し、ピリオドは [Details (詳細)] パネルに表示されるパラメータの値を設定します。

スレートの宣言型の構文の詳細については、「スレートの概要」を参照してください。

3. メニューのスレート ウィジェットを作成する

プラグイン ウィザードで生成される FSlateQuickstartWindowModule クラスに直接スレート ウィジェットを追加することができます。ただし、そうすると、ウィジェットのコールバックを処理する方法にいくつかの制限が課されます。そのため、メニューの内容を保持するために専用のスレート ウィジェットを作成し、そのウィジェットを FSlateQuickstartWindowModule クラスに追加します。

  1. コンテンツ ドロワーで、「C++ Classes」フォルダをクリックして、右クリックで表示されるメニューで [New C++ Class (新規 C++ クラス)] をクリックします。

    クリックして画像を拡大

  2. [Add C++ Class (C++ クラスを追加)] ウィンドウで、[Slate Widget (スレート ウィジェット] を選択し、[Next (次へ)] をクリックします。

  3. 新しい C++ クラスの設定を以下のように変更します。

    クリックして画像を拡大

    • Class Type (クラスの型)：Public

    • Name (名前)： ** QuickStartWindowMenu

    • Module (モジュール)：[Create Class (クラスを作成)]** をクリックして完了します。

    Click Create Class to finish.

[Create Class (クラスを作成)] をクリックする前に、必ず [Module (モジュール)] ドロップダウンを SlateQuickstartWindow モジュールに設定してください。これにより、クラスがプラグインのコードに追加されます。これを行わないと、ウィザードによってこのクラスがゲームのコードに追加されるため、スレート ウィジェットがプラグインで認識されません。

ウィザードは、プラグインの「Source」フォルダに SQuickStartWindowMenu という新しい C++ クラスを作成し、プロジェクトの Visual Studio ソリューションを再生成します。

4. メニューにウィジェットを設定する

メニューにスレート ウィジェットを追加するには、SQuickStartWindowMenu.cpp を開いて、Construct 関数に追加します。最初に表示すると、この関数は次のようになります。

	void SQuickStartWindowMenu::Construct(const FArguments& InArgs)
	{
		/*
		ChildSlot
		[
			// ウェイトを追加します
		];
		*/
	}

次の手順で、ウィンドウを設定します。

  1. Construct 関数内のコメントアウトされたコードを削除します。

  2. Construct 関数内で、SNew 関数を使用して新しい SVerticalBox を追加します。それに続けて、2 つの +SVerticalBox::Slot() 要素を追加します。両方のスロットに .AutoHeight() プロパティを指定します。

             SNew(SVerticalBox)
         +SVerticalBox::Slot()
         .AutoHeight()
         [
         ]
         +SVerticalBox::Slot()
         .AutoHeight()
         [
         ]

  3. 最初の Vertical Box スロット内に、2 つのスロットを含む SHorizontalBox を追加します。両方のスロットに .VAlign(VAlign_Top) プロパティを指定します。

             +SVerticalBox::Slot()
         [
             SNew(SHorizontalBox)
             +SHorizontalBox::Slot()
             .VAlign(VAlign_Top)
             [
             ]
             +SHorizontalBox::Slot()
             .VAlign(VAlign_Top)
             [
             ]
         ]

これにより、水平ボックスが垂直ボックス内にネストされ、この最初のスロットが効果的に 2 列に分割されます。

  1. 最初の水平スロットに、新しい STextBlock ウィジェットを追加します。.Text を FText::FromString("Test Button") に設定します。

             +SHorizontalBox::Slot()
         .VAlign(VAlign_Top)
         [
             SNew(STextBlock)
             .Text(FText::FromString("Test Button"))
         ]

ユーザー向けのテキストを表示する場合は、ローカライゼーションのサポートを提供するため、FString などではなく、FText を使用する必要があります。詳細については、「テキストのローカライゼーション」を参照してください。

  1. 2 つ目の水平スロットに、新しい SButton ウィジェットを追加します。.Text を FText::FromString("Press Me") に設定します。

             +SHorizontalBox::Slot()
         .VAlign(VAlign_Top)
         [
             SNew(SButton)
             .Text(FText::FromString("Press Me"))
		
         ]

  2. 2 つ目の Vertical Box スロットで、2 つのスロットを含む Horizontal Box もう 1 つ作成します。最初の水平スロットに "Test Checkbox" と表示する STextBlock ウィジェットを指定し、2 つ目の水平スロットに SCheckBox ウィジェットを追加します。

             +SVerticalBox::Slot()
         .AutoHeight()
         [
             SNew(SHorizontalBox)
             +SHorizontalBox::Slot()
             .VAlign(VAlign_Top)
             [
                 SNew(STextBlock)
                 .Text(FText::FromString("Test Checkbox"))
             ]
             +SHorizontalBox::Slot()
             .VAlign(VAlign_Top)
             [
                 SNew(SCheckBox)
             ]
         ]

  3. スレート ウィンドウの完成した定義は、次のようになります。

             return SNew(SDockTab)
         .TabRole(ETabRole::NomadTab)
         [
             SNew(SVerticalBox)
             +SVerticalBox::Slot()
             .AutoHeight()
             [
                 SNew(SHorizontalBox)
                 +SHorizontalBox::Slot()
                 .VAlign(VAlign_Top)
                 [
                     SNew(STextBlock)
                     .Text(FText::FromString("Test Button"))
                 ]
                 +SHorizontalBox::Slot()
                 .VAlign(VAlign_Top)
                 [
                     SNew(SButton)
                     .Text(FText::FromString("Press Me"))
                 ]
             ]
             +SVerticalBox::Slot()
             .AutoHeight()
             [
                 SNew(SHorizontalBox)
                 +SHorizontalBox::Slot()
                 .VAlign(VAlign_Top)
                 [
                     SNew(STextBlock)
                     .Text(FText::FromString("Test Checkbox"))
                 ]
                 + SHorizontalBox::Slot()
                 .VAlign(VAlign_Top)
                 [
                     SNew(SCheckBox)
                 ]
             ]
         ];

  4. コードを保存してコンパイルし、Unreal Editor でプロジェクトを開き、ウィンドウを開きます。

    [Live Coding (ライブ コーディング)] がアクティブで、Unreal Editor でプロジェクトを開いている間は、スレート ウィンドウをコンパイルすることはできません。コードのコンパイルを試みる前に、Unreal Editor を必ず閉じてください。

    ウィンドウを開くと、以下が表示されます。

    Preview of the test window

    ボタンもチェックボックスもまだ何も実行しませんが、次のセクションで機能を追加します。

5. イベントをインタラクティブ ウィジェットにバインドする

インタラクティブなスレート ウィジェットは、クリック、トグルなどのインタラクションに応答するイベントを使用します。このセクションでは、前のセクションのチェックボックスとボタンのインタラクションを制御するデリゲートをいくつか作成します。

  1. SQuickStartWindowMenu.h を開いて、次の関数と変数を宣言します。

                 public: 
             FReply OnTestButtonClicked();
             void OnTestCheckboxStateChanged(ECheckBoxState NewState);
             ECheckBoxState IsTestBoxChecked() const;
		
             protected:
             bool bIsTestBoxChecked;

    これらの関数にはテスト ボタンとテスト チェックボックスをクリックすると実行されるロジックが含まれています。チェックボックスは IsTestBoxChecked 関数を使用して表示する必要のある状態を決定し、bIsTestBoxChecked はその状態をキャッシュします。

  2. SQuickStartWindowMenu.cpp で、チェックボックスの関数を以下のように実装します。

                 void SQuickStartWindowMenu::OnTestCheckboxStateChanged(ECheckBoxState NewState)
             {
                 bIsTestBoxChecked = NewState == ECheckBoxState::Checked ? true : false;
             }
		
             ECheckBoxState SQuickStartWindowMenu::IsTestBoxChecked() const
             {
                 return bIsTestBoxChecked ? ECheckBoxState::Checked : ECheckBoxState::Unchecked;
             }

    これらは、チェックボックスの現在の状態のためのゲッターとセッターを提供します。OnTestCheckboxStateChanged 関数は、ユーザーがチェックボックスの状態を何に変更したかに応じて、bIsTestBoxChecked の値を設定します。一方、IsTestBoxChecked 関数はその変数を読み取り、ECheckBoxState に変換して返します。

  3. SCheckBox ウィジェットに .OnCheckStateChanged パラメータを追加し、FSlateQuickstartModule::OnTestCheckboxStateChanged 関数への参照を提供します。次に、IsChecked パラメータを追加し、SQuickStartWindowMenu::IsTestBoxChecked 関数への参照を提供します。

                 +SHorizontalBox::Slot()
             .VAlign(VAlign_Top)
             [
                 SNew(SCheckBox)
                 .OnCheckStateChanged(FOnCheckStateChanged::CreateSP(this, &SQuickStartWindowMenu::OnTestCheckboxStateChanged))
                 .IsChecked(FIsChecked::CreateSP(this, &SQuickStartWindowMenu::IsTestBoxChecked))
             ]

    これで、ユーザーが SCheckBox ウィジェットをオン/オフにするタイミングを追跡するメカニズムを実装することができました。

  4. OnTestButtonClicked 関数に以下の実装を行います。

                 FReply SQuickStartWindowMenu::OnTestButtonClicked()
             {
                 UE_LOG(LogTemp, Warning, TEXT("Hello, world! The checkbox is %s."), (bIsTestBoxChecked ? TEXT("checked") : TEXT("unchecked")));
                 return FReply::Handled();
             }

    この関数は、チェックボックスがオンになっているかどうかを示す簡潔なメッセージをアウトプット ログに出力します。

  5. SButton に .OnClicked パラメータを追加し、SQuickStartWindowMenu::OnTestButtonClicked 関数への参照を提供します。

                 +SHorizontalBox::Slot()
             .VAlign(VAlign_Top)
             [
                 SNew(SButton)
                 .Text(FText::FromString("Press Me"))
                 .OnClicked(FOnClicked::CreateSP(this, &SQuickStartWindowMenu::OnTestButtonClicked))
             ]

6. ウィンドウにメニューを追加する

最後に、作成したスレート ウィジェットをメニュー タブのコードに追加する必要があります。

  1. SlateQuickstartWindowModule.cpp を開いて、SDockTab の内容を削除します。コードは次のようになります。

             return SNew(SDockTab)
         .TabRole(ETabRole::NomadTab)
         [
		
         ];

  2. SQuickStartWindowMenu ウィジェットを SDockTab 内に追加します。

             return SNew(SDockTab)
         .TabRole(ETabRole::NomadTab)
         [
             SNew(SQuickStartWindowMenu)
         ];

コードを保存してコンパイルし、Unreal Editor を開き、ウィンドウをテストします。

最終結果

テスト ボタンをクリックすると、コンソール ログに「Hello, world!The checkbox is unchecked.」というメッセージが出力されます。チェックボックスをオンにすると、「Hello, world!The checkbox is checked.」というメッセージが出力されます。これは、スレート ウィンドウの基本的な動作を提供するサンプルです。これを拡張すると、カスタム エディタ ウィンドウを作成することができます。

応用編

さまざまなスレート ウィジェットのサンプルと、それらのウィジェットがデリゲートにバインドする多くの方法については、「STestSuite.cpp 」を参照してください。これはエンジンのインストール ディレクトリの「Source\Runtime\AppFramework\Private\Widgets\Testing」にあります。さまざまなレイアウトやインタラクティブな要素を作成するために、これらのウィジェットをさまざまな方法で試すことができます。また、スレート UI 要素を使用して、プロジェクト内のアセットやデータ、またはレベル エディタ内のワールドと相互に作用させるための試行錯誤を行うこともできます。

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page