UI 스타일 편집기 사용자 가이드

문서 요약: UI Styles 작업에 UnrealUI^? Style Editor 슈트를 사용하는 것에 대한 가이드

Maury Mountain 작성. Richard Nalezynski^? 유지관리.

개요

본 문서는 Unreal UI Style Editor의 주요 기능을 사용하는 방법에 대해 설명합니다.

UI 장면에서 스타일을 사용하면 User Interfaces를 사용자 지정화할 시 많은 시간과 노력을 아낄 수 있고, UI의 비주얼 모습을 위한 집중된 한 영역을 갖게 하여줍니다. Styles 함수는 웹 개발에서의 CSS(Cascading Style Sheets)와 유사한 것으로 텍스트와 이미지가 UI 전반에 걸쳐 따르게 되는 사전 정의된 모습과 속성을 설정할 수 있게 하여줍니다. CSS와 유사하게 특정 스타일의 속성을 변경하면, 현재 지정된 모든 위젯에 걸쳐 업데이트 되어집니다.

스타일 편집기 사용하기

스타일 제작하기

스타일 제작 시, 3가지 유형 중 한 유형의 스타일을 제작하여, Friendly Names와 Unique Tag를 부여하고, UI Editor내에서의 정리 및 간편한 지정을 위해 그룹 지정하고, 스타일이 어떤 UI 상태를 사용할 지를 설정하고, 속성을 구성하여, 최종적으로 Style Editor에서 스타일 결과를 미리보기할 수 있습니다.

스타일 편집기 개요

편집기 레이아웃

다음은 Style Editor의 각기 다른 섹션들입니다.

작업하고 있는 스타일 유형에 따라 이러한 섹션들의 목적을 볼 수 있습니다.

스타일 작업

스타일의 유형

텍스트 스타일

글꼴 유형만을 허용하는 스타일 유형입니다. 이 스타일은 현재 패키지에 있는 모든 글꼴을 찾아내어 스타일에 지정할 수 있도록 하여줍니다.

이미지 스타일

이미지 위젯으로 지정하기 위한 이미지와 재질 입력 및 위젯의 이미지 요소를 받아들입니다.

콤보 스타일

전체를 포함하는 스타일. 한 개의 스타일내에서 글꼴 및 이미지 스타일을 설정하게 하여줍니다. 콤보 스타일의 글꼴 및 이미지 속성을 설정할 시, 이전에 제작한 텍스트 또는 이미지 스타일이 사용되게 정의할 수 있습니다. 또 다른 방법으로는, 사용자 지정하고 필요에 따른 스타일을 설정할 수 있습니다.

스타일 명명 및 그룹짓기

Friendly Name(친화적인 이름)

친화적인 이름 필드는 스킨 편집기^? 에 표시되는 이름이고 윗젯에 스타일을 지정할 때 선택하는 이름입니다. 빈칸 및 특수 문자가 허용되며 여러 다른 스타일로부터 스타일을 구분하고 차별화시키는 쉬운 방법입니다.

Unique Tag(고유 태그)

이 이름은 다른 모든 스타일과 다른 고유한 이름이어야 합니다. 친화적인 이름과 동일할 수 있지만 빈칸 또는 특수 문자가 포함될 수 없습니다. 이 태그는 필요한 사항이 발생할 시 코드에서 참조됩니다.

Group Name(그룹 이름)

정리의 목적으로 스타일을 서로 유사한 사용자 지정 그룹으로 그룹지을 수 있습니다. Skin Editor에서 Group Tab으로 이동한 다음, 마우스 오른쪽 버튼을 클릭하여 고유 이름을 가진 새로운 그룹을 만드십시오. 이 그룹 이름은 Style Editor내의 드롭다운 메뉴에 나타나게 됩니다. 스타일을 위젯에 지정하면서 콘텍스 메뉴에 그룹 이름이 괄호([그룹이름])안에 있고 해당 그룹내의 모든 스타일이 하부 메뉴에 있는 것을 주목하셨을 것입니다.

스타일 속성

각 3가지 유형의 스타일은 유사한 속성을 공유합니다. 이미지와 텍스트를 위한 특정 속성이 있고 콤보 스타일내에 동일한 속성이 표시됩니다. 스타일 속성의 한 가지 아주 중요한 특징은 각 상태가 상태만의 독립적인 속성을 가진다는 점입니다. Active, Disabled, Enabled, Focused, Pressed 상태를 선택하였다면, 속성이 모든 상태에 영향을 미치게 하는 것이 의도인 경우 shift 키를 누른 상태에서 모든 상태를 선택하고 속성을 변경해야 합니다. 그렇지 않으면, 각 개별 상태가 고유의 모습과 느낌을 가지도록 설정할 수 있습니다.

텍스트 옵션

Font(글꼴): 게임에 현재 로드된 글꼴에서 선택합니다. 글꼴은 편집기에서 검색된 Package.Group.Name으로 표시됩니다.

Style Color(스타일 색상): 해당 상태에 색상을 지정하기 위해 컬러 휠을 엽니다.

Alpha Value(알파 값): 상태의 알파를 0에서 300 중의 값으로 설정합니다. UI에서 후처리가 활성화된 경우, 100 이상의 모든 값은 글꼴에 “발광” 효과를 줍니다.

Clipping Mode(클리핑 모드): 글꼴에 대한 클리핑 모드를 설정합니다.

Overdraw(오버드로우): 위젯 경계의 끝에 도달하는 문자열은 문자열이 끝날 때까지 경계 밖으로 계속 진행합니다.

Clipped: 위젯의 크기에 따라 문자열의 끝을 잘라냅니다.

Ellipse(줄임표): 문자열이 위젯의 경계에 도달할 경우 문자열 끝에 “…”를 추가합니다.

Wrapped(감싸기): 문자열이 위젯의 가장자리에 도달할 경우 각 텍스트 줄에 줄바꿈이 실행됩니다.

Clipping Alignment (클리핑 정렬): 클리핑에 대해 왼쪽/상단, 가운데, 또는 오른쪽/하단으로 정렬합니다.

Alignment H/V(정렬 H/V): 수평 및 수직 축에 있는 스타일에 대한 기본 텍스트 정렬을 설정합니다.

Scale to fit(맞춤): 원할 경우 동적으로 해당 문자열을 스케일 조절하는 설정. 최소 스케일은 스타일에게 글꼴을 특정 값 아래로 스케일 조절하지 않도록 지시하는데 사용됩니다.

Scale X/Y(스케일 X/Y): 0과 1 사이의 값을 입력합니다. 일정하지 않게 스케일 조절될 수 있습니다.

Spacing Chars/Lines(빈칸 문자/줄): 스타일의 픽셀 간격(kerning) 및 줄 높이 값을 지정합니다. 하부픽셀 값을 받아들입니다.

Padding H/V(패딩 H/V): 문자열의 모든 측면에 입력 값 픽셀을 추가합니다. H는 문자열의 시작과 끝에 추가하고, V는 줄의 상단과 하단에 추가합니다.

이미지 옵션

Color/Alpha(색상/알파): 해당 스타일에 지정된 이미지의 색상을 설정합니다. 참고: 이미지 스타일에서 재질을 사용하는 중, 색상/알파는 반드시 스타일에서가 아니라 재질 자체에서 적용되야 합니다.

Default Texture(기본 텍스처): 녹색 화살표를 사용하여 텍스처 또는 재질을 이 필드에 지정합니다.

Image Alignment(이미지 정렬): 위젯 안에 있는 이미지의 왼쪽, 가운데, 오른쪽 정렬.

Adjustment Type(조절 유형): 이미지가 UI 장면에서 그려질 시, 위젯내에서 이미지가 스케일 조절되는 방법을 설정합니다.

Clipped: 위젯의 경계선으로 잘립니다.

Scaled(스케일): 위젯의 크기에 따라 스케일됩니다. 위젯이 이미지의 형상과 모습을 정의합니다.

Uniformly Scaled(일정하게 스케일):

Bound(경계):

Stretched(늘림): 텍스처의 가운데 픽셀을 ‘늘리고’ 원본 해상도에 따라 이미지의 상단 L,R과 하단 L, R 모서리를 유지합니다.

Sample Position/Size(샘플 위치/크기): 텍스처에 사용자 지정 UV 좌표를 적용할 수 있게 하여 주고 또는 텍스처의 특정 영역을 제외시킵니다.

목록 스타일

UI 목록은 스타일을 사용하지만 목록 자체는 목록 상태가 작동하도록 하는데 필요한 4가지 다른 스타일을 가집니다.

UI List 위젯 자체에는 Active, Disabled, Enabled, Focused, Pressed의 5가지 상태가 있습니다. UI List내의 셀 자체에는 고유 스타일이 있습니다. 각 셀에는 Normal, Mouse Over, Selected, Active 스타일이 필요합니다. 이러한 4가지 스타일내에서 상태는 UI List의 현재 상태를 나타냅니다. 이는 즉, Focused 목록(현재 스크롤링하고 있는 것)은 Normal, Selected, Mouse Over, and Active 셀 스타일의 Focused 상태를 사용합니다.

List Styles 설정할 시, 기본 스타일을 제작한 다음, 메인 스타일을 탬플릿으로 사용하여 셀 스타일을 만드는 것이 좋은 방법입니다. 따라서, 특정 상태 색상과 관련있을 필요가 없는 모든 스타일을 재빠르게 변경할 수 있습니다.

도움말 및 트릭

스타일을 제작할 시, 다른 스타일을 탬플릿으로 사용하여 제작할 수 있습니다. 이렇게 하면 필요에 따라 스타일의 특정 세트를 폭넓게 변경할 수 있게됩니다. 예를 들어, 글꼴의 크기를 글로벌적으로 증가시킬 필요가 있고 그러한 모든 스타일이 해당 특정 글꼴에 대해 기본 스타일을 사용하는 경우, 한 번만 변경시키면 속성은 그것을 탬플릿으로 사용하는 다른 모든 스타일에 걸쳐 전달됩니다.

재질과 재질 인스턴스는 이미지 스타일에서 사용될 수 있고 스타일 상태 별 재질을 가질 수 있습니다. 해당 재질에 포함된 모든 애니메이션은 UI에 그리게됩니다. Color와 Alpha 값은 스타일에 지정된 Material과 작동하지 않습니다. 이러한 것은 반드시 재질/재질 인스턴스 자체에서 설정되어여 합니다.

특정 위젯에 대해 UI 편집기내에서 스타일을 재정의할 수 있습니다. 이러한 재정의는 해당 스타일의 모든 상태 속성을 완전히 교체하지만 텍스트를 정렬시키는 간단한 방법입니다. 그러나 이러한 재정의(override)를 글로벌적으로 변경시키는 쉬운 방법은 없습니다. 따라서, 재정의를 통해 모든 스케일 유형을 설정한 경우 모든 위젯의 재정의 설정을 조절할 필요가 있습니다.

스타일 명명을 조심해서 하십시오. 스타일 사용 도중, 스타일의 이름 변경 및 삭제는 문제를 일으킬 수 있습니다. 명명을 구체적인 방법을 가지고 하면 스킨 전체에 너무 많은 중복된 스타일이 생성되지 않도록 확실히 할 수 있습니다.