슬레이트 개요

Slate (슬레이트)는 언리얼 엔진 4 와 함께 제공되는 플랫폼 무관, 완벽한 커스텀 유저 인터페이스 프레임워크로, 언리얼 에디터와 같은 툴과 어플리케이션에 쓸 유저 인터페이스나 게임내 유저 인터페이스의 재미와 효율을 높일 수 있도록 디자인된 것입니다. 서술형(declarative) 문법에 쉬운 디자인, 레이아웃, 스타일 요소가 결합된 Slate 를 통해 쉬운 UI 제작 및 반복작업이 가능할 것입니다.

Slate UI 솔루션으로 툴과 어플리케이션에 쓸 그래픽 유저 인터페이스를 매우 쉽게 조합시킬 수 있으며, 그에 대한 반복처리도 매우 빠르게 가능합니다.

서술형 문법

Slate 의 서술형 문법 은 프로그래머가 인디렉션(indirection, 포인터를 통한 변수 접근) 레이어를 추가하지 않고도 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()
Copy full snippet

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()

컴포지션

Slate의 컴포지션(구성) 프레임워크는 프로토타이핑이나 반복처리를 위해 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").ToString() )
						.Font( FontInfo )
					]
					.MenuContent()
					[
						BlockingVolumeBuilder.MakeWidget()
					]
				]
			]

		]
	];
Copy full snippet

// 스태틱 메시용 섹션을 새로 추가합니다. 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").ToString() ) .Font( FontInfo ) ] .MenuContent() [ BlockingVolumeBuilder.MakeWidget() ] ] ] ] ];

위의 컴포지션으로 아래와 같은 UI 요소를 만듭니다:

스타일

스타일은 위젯의 여러 부분에 만들어 적용할 수 있습니다. 그러면 UI 컴포넌트의 외양에 대한 반복작업 뿐만 아니라 스타일 공유 및 재사용도 편해집니다.

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

		Set( "ToolBarButton.Normal", FSlateNoResource() );		// 주: 고의적인 투명 배경
		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 ) ) );

		// 툴바 버튼 레이블 폰트
		Set( "ToolBarButton.LabelFont", FSlateFontInfo( TEXT("Roboto-Regular"), 8 ) );
	}
Copy full snippet

// 툴바 { Set( "ToolBar.Background", FSlateBoxBrush( TEXT("Common/GroupBorder"), FMargin(4.0f/16.0f) ) ); Set( "ToolBarButton.Normal", FSlateNoResource() ); // 주: 고의적인 투명 배경 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 ) ) ); // 툴바 버튼 레이블 폰트 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").ToString())
					.Font( FEditorStyle::GetFontStyle( FName( "ToolBarButton.LabelFont" ) ) )
					.ToolTipText(LOCTEXT("CompileButton_Tooltip", "Recompile the blueprint").ToString())
				]
			]
		]
	]
Copy full snippet

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").ToString()) .Font( FEditorStyle::GetFontStyle( FName( "ToolBarButton.LabelFont" ) ) ) .ToolTipText(LOCTEXT("CompileButton_Tooltip", "Recompile the blueprint").ToString()) ] ] ] ]

입력

Slate에는 마우스와 키보드 입력을 받는 기능이 지원됩니다. 유연한 키 바인딩 시스템이 제공되어 어느 명령에 어떤 키조합이든 바인딩 가능하며, 그 바인딩을 동적으로 변경할 수도 있습니다.

출력

Slate는 타깃 무관 렌더링 프리미티브를 사용하기에, 사실상 어느 플랫폼에서도 실행 가능합니다. 현재는 언리얼 엔진 4 가 실행되는 플랫폼이면 어디서든 실행 가능하도록 언리얼 엔진 4 Rendering Hardware Interface (RHI)를 대상으로 삼습니다.

레이아웃 프리미티브

레이아웃 프리미티브로 정적이고 동적인 레이아웃 빌드를 쉽게 할 수 있습니다.

	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( "	}" );
Copy full snippet

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 는 아래와 같습니다:

사용자 주도형 레아아웃

Slate의 도킹 프레임워크 는 상상할 수 있는 어떤 레이아웃으로도 탭 패널을 재배치하고 도킹하는 능력을 사용자에게 부여해 줍니다. 사용자가 환경을 커스터마이징할 수 있다면, 원하는 툴을 가지고 원하는 방식으로 작업할 수 있게 됩니다.

떠다니는 탭

탭을 도킹 타깃에 드래그

도킹된 탭

개발자 툴

Slate 위젯 리플렉터 로는 UI 와 관련 코드를 디버깅하고 분석할 수 있습니다. 버그와 예상치 못한 행위를 추적하는 데 뿐만 아니라, 유저 인터페이스의 프로파일링과 최적화하는 데도 도움이 됩니다.

엔진 접근

Slate UI 시스템은 프로그래머에게 엔진과 에디터 직접 접근 권한을 제공, 어느 개발 팀의 작업방식이든 어느 프로젝트의 요구사항이든 수용할 수 있는 신기능과 툴 구현 작업을 훨씬 쉽게 만들어 줍니다.