[언리얼엔진] 슬레이트 개요

Slate는 Unreal Editor 또는 게임내 사용자 인터페이스와 같은 도구 및 응용 프로그램용 사용자 인터페이스를 효율적으로 구축하도록 설계된 플랫폼에 구애받지 않는 맞춤형 사용자 인터페이스 프레임워크이다. 서술형(declarative) 문법에 쉬운 디자인, 레이아웃, 스타일 요소가 결합된 Slate를 통해 쉬운 UI제작 및 반복 작업이 가능할 것이다. Slate UI 솔루션으로 툴과 어플리케이션에 사용할 GUI를 매우 쉽게 조합시킬수 있으며, 반복처리도 빠르게 가능하다.

서술형 문법

Slate의 서술형 문법(Declarative syntax)은 프로그래머가 인디렉션(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()

컴포지션

Slate의 컴포지션(Composition) 프레임워크는 프로토타이핑이나 반복처리를 위해 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()
                ]
            ]
        ]

    ]
];

스타일

스타일은 위젯의 여러 부분에 적용할 수 있다. 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 ) );
}

컴포지션에 사용된 스타일 예시

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는 타겟에 무관하게 렌더링 프리미티브를 사용하기에 어느 플랫폼에서도 실행 가능하다.

레이아웃 프리미티브

레이아웃 프리미티브로 정적, 동적 레이아웃으로 빌드를 쉽게 할 수 있다.

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

위 레이아웃 코드는 아래와 같이 표현된다.

[사진 첨부]

사용자 주도형 레이아웃

Slate의 도킹 프레임워크는 자유롭게 탭 패널을 재배치하고 도킹하는 기능이 있다. 사용자가 환경을 커스터마이징할 수 있다면, 원하는 툴을 가지고 원하는 방식으로 작업할 수 있게 된다.

떠다니는 탭

탭을 도킹 타깃에 드래그

도킹된 탭

개발자 툴

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

엔진 접근

Slate UI 시스템은 프로그래머에게 엔진과 에디터 직접 접근 권한을 제공하여 어떤 요구사항이든 수용할 수 있는 신기능과 툴 구현 작업을 쉽게 만들어 준다.