スレート は完全にカスタマイズ可能でプラットフォームに依存しない UI フレームワークで、例えば Unreal Editor やインゲーム UI の独自の楽しみや効率性など、ツールやアプリケーションのユーザーインターフェースの構築にあわせた設計となっています。スレートは宣言記法を簡単にデザイン、レイアウト、及びスタイル コンポーネントを作成する機能と組み合わせることによって、 UI の作成や UI 上でのイタレーションが簡単にできます。
スレート UI ソリューションが、ツールやアプリケーションのグラフィック ユーザー インターフェースをとても簡単に統合し、これらをすばやく相互作用させます。
宣言記法
スレートの 宣言記法 は、間接レイヤーを追加せずに、プログラマーが構築した UI へアクセス可能な状態にします。宣言のプロセスと新規ウィジェットの作成を単純化するためにマクロ一式が提供されます。
SLATE_BEGIN_ARGS( SSubMenuButton )
: _ShouldAppearHovered( false )
{}
/** ボタンに表示するラベル */
SLATE_ATTRIBUTE( FString, Label )
/** ボタンがクリックされると呼び出されます */
SLATE_EVENT( FOnClicked, OnClicked )
/** ボタンに入力するコンテンツ */
SLATE_NAMED_SLOT( FArguments, FSimpleSlot, Content )
/** ボタンをホバー状態で表示するかどうか */
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 でコンポーネントの外観をイタレートしたり、スタイルの共有や再利用が簡単にできます。
// ツールバー
{
Set( "ToolBar.Background", FSlateBoxBrush( TEXT("Common/GroupBorder"), FMargin(4.0f/16.0f) ) );
Set( "ToolBarButton.Normal", FSlateNoResource() ); // 注記: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 ) );
// ツールバー ボタンはトグルボタンの場合があるので、「チェックされた」ステート用のスタイルにする必要があります
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 ) ) );
// ツールバーボタンラベルのフォント
Set( "ToolBarButton.LabelFont", FSlateFontInfo( TEXT("Roboto-Regular"), 8 ) );
}
構成に使用したスタイル：
SNew( SBorder )
.BorderImage( FEditorStyle::GetBrush( "ToolBar.Background" ) )
.Content()
[
SNew(SHorizontalBox)
// コンパイルボタン (マルチボックス ボタンのように見せかけています)
+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 システムによって、プログラマーはエンジンとエディタへ直接アクセスすることができます。開発チームのワークフローやプロジェクトの必要最低条件に対応する新機能やツールの実装がとても簡単に出来ます。