Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

スレート は完全にカスタマイズ可能でプラットフォームに依存しない UI フレームワークで、例えば Unreal Editor やインゲーム UI の独自の楽しみや効率性など、ツールやアプリケーションのユーザーインターフェースの構築にあわせた設計となっています。スレートは宣言記法を簡単にデザイン、レイアウト、及びスタイル コンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。

スレート UI ソリューションが、ツールやアプリケーションのグラフィック ユーザー インターフェースをとても簡単に統合し、これらをすばやく相互作用させます。

宣言記法

スレートの 宣言記法 は、間接レイヤーを追加せずに、プログラマーが構築した UI へアクセス可能な状態にします。宣言のプロセスと新規ウィジェットの作成を単純化するためにマクロ一式が提供されます。

SLATE_BEGIN_ARGS( SSubMenuButton )
    : _ShouldAppearHovered( false )
    {}
    /** The label to display on the button */
    SLATE_ATTRIBUTE( FString, Label )
    /** Called when the button is clicked */
    SLATE_EVENT( FOnClicked, OnClicked )
    /** Content to put in the button */
    SLATE_NAMED_SLOT( FArguments, FSimpleSlot, Content )
    /** Whether or not the button should appear in the hovered state */
    SLATE_ATTRIBUTE( bool, ShouldAppearHovered )
SLATE_END_ARGS()

構成

スレートの構成フレームワークは、プロトタイピングやイタレーションの際の UI コンポーネントの再配置を単純化します。

以下は構成中の UI の事例です。

// スタティックメッシュの新規セクションを追加します。
ContextualEditingWidget->AddSlot()
.Padding( 2.0f )
[
    SNew( SDetailSection )
    .SectionName("StaticMeshSection")
    .SectionTitle( LOCTEXT("StaticMeshSection", "Static Mesh").ToString() )
    .Content()
    [
        SNew( SVerticalBox )
        + SVerticalBox::Slot()
        .Padding( 3.0f, 1.0f )
        [
            SNew( SHorizontalBox )
            + SHorizontalBox::Slot()
            .Padding( 2.0f )
            [
                SNew( SComboButton )
                .ButtonContent()
                [
                    SNew( STextBlock )
                    .Text( LOCTEXT("BlockingVolumeMenu", "Create Blocking Volume") ) 
                    .Font( FontInfo )
                ]
                .MenuContent()
                [
                    BlockingVolumeBuilder.MakeWidget()
                ]
            ]
        ]

    ]
];

上記の構成は、以下の UI コンポーネントを作成します。

スタイル

ウィジェットのさまざまな部分へ、スタイル作成および適用することができます。これにより UI でコンポーネントの外観をイタレートしたり、スタイルの共有や再利用が簡単にできます。

// Tool bar
{
    Set( "ToolBar.Background", FSlateBoxBrush( TEXT("Common/GroupBorder"), FMargin(4.0f/16.0f) ) );

    Set( "ToolBarButton.Normal", FSlateNoResource() );      // Note:Intentionally transparent background
    Set( "ToolBarButton.Pressed", FSlateBoxBrush( TEXT("Old/MenuItemButton_Pressed"), 4.0f/32.0f ) );
    Set( "ToolBarButton.Hovered", FSlateBoxBrush( TEXT("Old/MenuItemButton_Hovered"), 4.0f/32.0f ) );

    // Tool bar buttons are sometimes toggle buttons, so they need styles for "checked" state (ツールバー ボタンはトグルボタンの場合があるので、「チェックされた」ステート用のスタイルにする必要があります。)
    Set( "ToolBarButton.Checked", FSlateBoxBrush( TEXT("Old/MenuItemButton_Pressed"),  4.0f/32.0f, FLinearColor( 0.3f, 0.3f, 0.3f ) ) );
    Set( "ToolBarButton.Checked_Hovered", FSlateBoxBrush( TEXT("Old/MenuItemButton_Hovered"),  4.0f/32.0f ) );
    Set( "ToolBarButton.Checked_Pressed", FSlateBoxBrush( TEXT("Old/MenuItemButton_Pressed"),  4.0f/32.0f, FLinearColor( 0.5f, 0.5f, 0.5f ) ) );

    // Tool bar button label font (ツールバーボタンラベルのフォント)
    Set( "ToolBarButton.LabelFont", FSlateFontInfo( TEXT("Roboto-Regular"), 8 ) );
}

構成に使用したスタイル：

SNew( SBorder )
.BorderImage( FEditorStyle::GetBrush( "ToolBar.Background" ) )
.Content()
[
    SNew(SHorizontalBox)

    // Compile button (faked to look like a multibox button) (コンパイルボタン (マルチボックス ボタンのように見せかけています))
    +SHorizontalBox::Slot()
    [
        SNew(SButton)
        .Style(TEXT("ToolBarButton"))
        .OnClicked( InKismet2.ToSharedRef(), &FKismet::Compile_OnClicked )
        .IsEnabled( InKismet2.ToSharedRef(), &FKismet::InEditingMode )
        .Content()
        [
            SNew(SVerticalBox)
            +SVerticalBox::Slot()
            .Padding( 1.0f )
            .HAlign(HAlign_Center)
            [
                SNew(SImage)
                .Image(this, &SBlueprintEditorToolbar::GetStatusImage)
                .ToolTipText(this, &SBlueprintEditorToolbar::GetStatusTooltip)
            ]
            +SVerticalBox::Slot()
            .Padding( 1.0f )
            .HAlign(HAlign_Center)
            [
                SNew(STextBlock)
                .Text(LOCTEXT("CompileButton", "Compile"))
                .Font( FEditorStyle::GetFontStyle( FName( "ToolBarButton.LabelFont" ) ) )
                .ToolTipText(LOCTEXT("CompileButton_Tooltip", "Recompile the blueprint"))
            ]
        ]
    ]
]

入力

スレートはマウスやキーボードからの入力をサポートします。任意のキーの組み合わせとコマンドのバインドを可能にする、柔軟性のあるキーバインディングシステムを提供します。これらのバインディングを動的に修正する機能も含みます。

出力

スレートは、ターゲットに依存しないレンダリングプリミティブを使用して、あらゆるプラットフォーム上で実行が可能です。現在は Unreal Engine 4 (UE4) の Rendering Hardware Interface (RHI) を対象に、Unreal Engine 4 が実行できる全てのプラットフォームで実行することができます。

レイアウト プリミティブ

レイアウトプリミティブによって、静的および動的レイアウトの構築が簡単に出来ます。

FString DefaultLayout =
                TEXT( " {" )
                TEXT( "     \"type\": \"tabstack\"," )
                TEXT( "     \"sizecoeff\":1," )
                TEXT( "     \"children\":" )
                TEXT( "     [" )
                TEXT( "         {" )
                TEXT( "             \"type\": \"tab\"," )
                TEXT( "             \"content\": \"Widget Inspector Tab\"" )
                TEXT( "         }," )
                TEXT( "         {" )
                TEXT( "             \"type\": \"tab\"," )
                TEXT( "             \"content\": \"Plugin Manager Tab\"" )
                TEXT( "         }," )
                TEXT( "         {" )
                TEXT( "             \"type\": \"tab\"," )
                TEXT( "             \"content\": \"Debug Tools\"" )
                TEXT( "         }" )
                TEXT( "     ]" )
                TEXT( " }" );

上記の構成は、以下の UI を作成します。

ユーザー主導型のレイアウト

ユーザーはスレートのドッキング フレームワークを利用して、タブ表示されているパネルをほとんどのレイアウトへ再配置および再固定することができます。自身の環境下へカスタマイズが可能になることにより、作業したいツールを使用して自身の方法による作業が可能になります。

タブはフロート状態です:

タブをドッキング ターゲットにドラッグします:

タブがドッキングされました:

デベロッパー ツール

バグや不適切な挙動の追跡に加え、ユーザーインターフェースのプロファイル化や最適化を支援します。

エンジンへのアクセス

スレート UI システムによって、プログラマーはエンジンとエディタへ直接アクセスすることができます。開発チームのワークフローやプロジェクトの必要最低条件に対応する新機能やツールの実装がとても簡単に出来ます。