スレートの概要

クロスプラットフォームに対応するスレート UI フレームワークの概要

Windows
MacOS
Linux

Slate UI

スレート は完全にカスタマイズ可能でプラットフォームに依存しない UI フレームワークで、例えばアンリアル エディタやインゲーム 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 コンポーネントを作成します。

Rendered 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"))
            ]
        ]
    ]
]

入力

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

出力

スレートは、ターゲットに依存しないレンダリングプリミティブを使用して、あらゆるプラットフォーム上で実行が可能です。現在はアンリアル・エンジン 4 (UE4) Rendering Hardware Interface (RHI) を対象に、アンリアル・エンジン 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 Layout

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

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

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

Docking

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

Drag to Docking Area

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

Docked

デベロッパー ツール

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

Widget Inspector

エンジンへのアクセス

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

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