스타일링

UMG 를 통해 UI 화면을 제작할 때가 되었다면, 요소 레이아웃 배치는 시작일 뿐입니다. 버튼, 바, 텍스트 박스 등 그 각각마다 그 표현 방식에 영향을 끼칠 수 있는 여러가지 스타일 옵션이 있으며, 이는 UMG 내 디테일 패널에서 바로 할당할 수 있습니다.

아래 위젯 각각은 스타일 옵션을 활용하지만, 그 각각의 스타일 옵션은 다를 수 있습니다:

• Button
• Check Box
• Editable Text Box
• Multi Line Editable Text Box
• Progress Bar
• Size Box
• Slider
• Spin Box
• Text Block
• Combo Box (String)
• Editable Text
• Multi Line Editable Text

상태

특히나 상호작용형 위젯의 경우에는, 위젯이 어떠한 조건에 처했는가 또는 어떻게 상호작용 되었는가에 따라 다른 모습을 내도록 할 수가 있습니다. 예를 들어 화면상에 정상적으로 표시되는 버튼이 있는데, 마우스 커서를 올리면 색이 변하거나 웅웅거리고, 클릭을 하면 완전히 다른 동작을 하는 경우입니다. 이는 상태 (State)라 일컬으며, 스타일링의 가장 흔한 형태이고, 위젯의 현재 상태에 따라 어떤 모양으로 나타날지를 지정할 수 있습니다.

위에서 버튼 위젯은 Normal (보통), Pressed (눌림), Hovered (커서 올림), Disabled (꺼짐) 상태에 따라 바뀝니다. 대부분의 위젯은 보통, 눌림, 커서 올림, 꺼짐 상태를 사용하겠지만, 사용중인 위젯 유형에 따라 옵션이 추가될 수도 있습니다.

이미지 상태 설정하기

각 상태에 대해, 사용할 위젯에 대한 이미지 를 (텍스처 나 머티리얼 애셋 중 하나로) 설정할 수 있습니다. 이미지 크기 는 리소스의 슬레이트 유닛 크기를 나타내고, 9 스케일 박스를 사용하는 Draw As 옵션은 이미지를 Box, Border, Image 중 어느 형태로 그릴 것인지 지정할 수 있습니다.

그 각각에 대한 예제는 다음과 같습니다:

• Box 는 (파랑 점선인) 마진 에 따라 측면과 가운데가 (주황색 화살표처럼) 늘어나는 3x3 박스를 그립니다.
  • 초록 화살표는 마진 x 이미지 크기 값에 따른 상수 값을 나타냅니다.
• Border 는 (파랑 점선인) 마진 에 따라 각 면이 (주황색 화살표처럼) 타일링 되는 3x3 테두리를 그립니다.
  • 가운데는 Border 사용시 그려지지 않습니다.
  • 초록 화살표는 마진 x 이미지 크기 에 따른 상수값을 나타냅니다.
• 이미지 는 이미지를 그리고 (주황색 화살표처럼) 늘어나며 (Stertch) 마진 은 무시될 것입니다.

텍스처 기반 이미지

텍스처 를 자기 이미지 애셋으로 할당할 수는 있지만, 텍스처가 모든 디바이스에서 압축 부작용 없이 산뜻하게 나타나도록 하기 위해서 설정해 줘야 하는 옵션이 몇 가지 있습니다. 텍스처 에디터에서 Level Of Detail 아래, Mip Gen Settings 을 NoMipmaps 로, LOD Group 을 UI 로 설정합니다. Compression 아래에서 Compression Setting 을 TC Editor Icon 로 설정합니다.

클릭하면 크게 볼 수 있습니다.

머티리얼 기반 이미지

머티리얼 역시도 이미지 상태에 대한 이미지 애셋으로 할당할 수 있지만, 세팅을 조금 바꿔줘야 합니다. 머티리얼 안에서 디테일 패널의 Usage8* 아래 Used with UI 박스를 체크해 줘야 합니다. 그러면 슬레이트 전용 셰이더로 컴파일이 됩니다. 또한 이미시브 컬러** 로만 출력되도록도 해야 합니다.

클릭하면 크게 볼 수 있습니다.

다이내믹 머티리얼

머티리얼 파라미터를 수정하기 위해서는 다이내믹 머티리얼 인스턴스 가 필요합니다. 이미지 위젯만 있으면, 머티리얼 포함 슬레이트 브러시가 있기만 하다면야 그 작업이 특히나 쉬워지며, 다이내믹 이미지를 요청하면 됩니다 (한 번만 생성한 다음 캐시에 저장합니다).

틴트 / 마진

또한 각 상태 아래에는 이미지 틴트 (색조) 옵션이 있어, 제공된 이미지에 연관된 상태에 맞게 색조를 입힐 수 있습니다. 또한 마진 옵션도 있어 Box 와 Border 그리기 모드의 여백 크기를 입력할 수 있습니다 (이미지 모드에서 마진은 무시됩니다).

패딩

Padding (패딩) 스타일링 옵션은 위젯의 측면 주변에 만들어지는 테두리를 가리킵니다.

예를 들어 위의 박스 버튼에 대한 이미지에서 Normal Padding (보통 패딩)은 버튼의 배경 이미지 내 테두리를 말합니다. 적용되면 버튼의 내용은 버튼의 테두리와 함께 채워져 나타납니다. Pressed Padding (눌림 패딩)은 보통 패딩과 같지만 버튼이 눌렸을 때 적용되는 패딩을 말합니다.

사용중인 위젯의 유형에 따라 각기 다른 패딩 옵션을 사용 가능해질 수 있습니다.

사운드

Sound (사운드)는 위젯의 현재 상태에 따라 소리를 설정할 수 있습니다.

사운드 적용이 가능한 대부분의 위젯은 커서 올림 또는 눌림 사운드 이벤트를 활용하는데, 위젯에 마우스 커서를 올리거나 클릭했을 때 지정된 사운드를 재생해 주는 것입니다. 위 체크 박스 위젯 그림에 보면 Checked 와 Unchecked 는 물론 Hovered 에 대한 사운드 이벤트 설정 옵션이 있습니다.

사용중인 위젯 유형에 따라 각기 다른 사운드 옵션이 사용 가능할 수 있습니다.

렌더 트랜스폼

위젯 디테일 패널의 Render Transform (렌더 트랜스폼) 섹션 아래에는 위젯의 외형을 수정하는 데 사용할 수 있는 부가 스타일링 옵션이 있습니다. 렌더 트랜스폼 세팅으로 위젯의 Translation (이동), Scale (스케일), Shear (기울이기), Angle (각도) 는 물론, 그 Pivot (피벗) 포인트도 조정할 수 있습니다.

렌더 트랜스폼 세팅 예제는 아래와 같습니다.

렌더 트랜스폼 세팅 각각은 키프레임을 통해 애니메이션 으로 변경 가능하며, 블루프린트 를 통한 변경을 통해 사용자가 수행한 게임플레이 동작 도중 내지 결과에 따른 수정도 가능합니다. 렌더 트랜스폼은 레이아웃 트랜스폼에 상대적이며, 그 부모에 의해 잘리지 않습니다 (예를 들어 버튼으로 가득찬 스크롤 박스가 있는 경우, 렌더 트랜스폼 세팅에서 Translation 을 조절하면 박스 범위 밖으로 버튼이 밀려날 수 있습니다).