외관 수정자를 활용하여 GuiObjects의 외관을 더욱 사용자 정의할 수 있습니다.
- 개체의 배경에 그라디언트를 적용하십시오.
- 텍스트 또는 경계에 스트로크를 적용하십시오.
- 개체에 둥근 모서리를 설정하십시오.
- 개체의 경계 간 패딩을 늘리십시오.
- 개체 뒤에 드롭 섀도를 추가하십시오.
그라디언트
UIGradient 개체는 상위 GuiObject에 색상과 투명도 그라디언트를 적용합니다.
그라디언트를 구성할 수 있는 방법은 다음과 같습니다:
- 그라디언트의 시작점을 설정할 수 있습니다 (부모의 경계 내부 또는 외부) - Offset 속성을 사용합니다.
- 그라디언트의 각도를 선택할 수 있습니다 - Rotation 속성을 사용합니다.
색상 시퀀스
그라디언트의 색상 시퀀스를 설정하려면:
탐색기 창에서 UIGradient를 선택합니다.
색상 시퀀스에서 키포인트를 클릭한 후, Color 옆의 작은 정사각형을 클릭하여 Colors 팝업 창을 엽니다.
키포인트에 대한 원하는 색상을 선택합니다.
필요 시, 다음을 수행할 수 있습니다:
- 그래프의 아무 곳이나 클릭하여 다른 키포인트를 추가합니다.
- 기존 키포인트를 새로운 위치로 드래그하거나, 특정 시간 값을 입력하여 Time 입력란에 입력합니다.
- 키포인트를 선택하고 삭제 버튼을 클릭하여 키포인트를 삭제합니다.
- 리셋 버튼을 클릭하여 시퀀스를 초기화합니다.
투명도
그라디언트의 투명도를 조정하려면:
탐색기 창에서 UIGradient를 선택합니다.
속성 창에서 Transparency 속성 필드 내부를 클릭한 다음, 입력 상자 오른쪽의 ⋯ 버튼을 클릭합니다. 숫자 시퀀스 팝업이 나타납니다.
숫자 시퀀스 그래프의 각 사각형은 해당 포인트의 투명도 값을 결정하는 키포인트입니다.
원하는 키포인트를 클릭하고 드래그하거나, 키포인트를 선택하고 Time 및 Value 입력란을 통해 특정 시간/값 조합을 입력합니다.
필요 시, 다음을 수행할 수 있습니다:
- 그래프의 아무 곳이나 클릭하여 다른 키포인트를 추가합니다.
- 키포인트를 선택하고 삭제 버튼을 클릭하여 키포인트를 삭제합니다.
- 리셋 버튼을 클릭하여 시퀀스를 초기화합니다.
오프셋 및 회전
Offset 및 Rotation 속성을 사용하면 그라디언트의 제어 포인트와 각도를 조정할 수 있습니다. 다음 다이어그램이 보여주듯이, Offset은 부모의 너비나 높이의 백분율을 기준으로 하며, 양수 또는 음수 값 모두 유효합니다.
마찬가지로, 그라디언트를 회전시키면 제어 포인트도 회전합니다:
스트로크
UIStroke 인스턴스는 텍스트 또는 경계에 윤곽선을 적용합니다. 주요 특징은 다음과 같습니다:
- 부모의 투명도와 독립적으로 스트로크 투명도를 설정하는 기능.
- 부모의 경계에 상대적으로 스트로크의 위치 및/또는 오프셋을 설정하는 기능.
- 세 가지 모서리 스타일 (둥근, 벨벳, 또는 미터).
- UIGradient 인스턴스를 통한 스트로크 그라디언트 지원.
두께
Thickness 속성을 통해 스트로크의 두께를 설정할 수 있습니다. 이는 픽셀(기본값)로 측정되거나 수정자의 StrokeSizingMode에 따라 부모에 상대적으로 크기가 조정됩니다. 텍스트에 스트로크가 적용되고 StrokeSizingMode가 ScaledSize로 설정되면 두께는 글꼴 크기에 상대적입니다.
색상 또는 그라디언트
Color 속성을 통해 스트로크 색상을 설정할 수 있으며, 자식 UIGradient 인스턴스를 추가하여 그라디언트 스트로크를 생성할 수도 있습니다.
부모 객체와 UIStroke는 모두 자식 UIGradient 인스턴스를 가질 수 있어, 스트로크와 채움에 대해 각각 개별적으로 그라디언트를 설정할 수 있습니다.
텍스트 윤곽선 또는 경계
부모 유형에 따라 UIStroke는 텍스트 윤곽선 또는 경계로 작동합니다. UIStroke를 TextLabel와 같은 텍스트 객체에 부모로 설정하면 텍스트 윤곽선에 적용됩니다; 다른 GuiObjects에 부모로 설정하면 경계에 적용됩니다.
텍스트 객체에 적용할 때, ApplyStrokeMode 속성을 통해 기본 스트로크 동작을 재정의할 수 있으며, 텍스트가 아니라 객체의 경계에 스트로크를 적용할 수 있습니다. 또한 두 개의 UIStroke 인스턴스를 텍스트 객체에 부모로 설정하여 텍스트 윤곽선과 경계를 개별적으로 제어할 수 있습니다. 하나는 Contextual로 설정하고 다른 하나는 Border로 설정합니다.
경계 위치/오프셋
BorderStrokePosition은 스트로크의 위치를 부모의 경계에 상대적으로 설정하고, BorderOffset은 스트로크 위치에 추가 오프셋을 지정할 수 있게 해줍니다.
투명도
Transparency 속성은 스트로크의 투명도를 부모 객체의 BackgroundTransparency 또는 TextTransparency와 독립적으로 설정합니다. 이를 통해 "빈" 텍스트와 경계를 렌더링할 수 있습니다 (단지 윤곽선으로 구성됨).
코너 스타일
LineJoinMode 속성을 사용하여 코너가 해석되는 방식을 제어할 수 있습니다. 이 속성은 Round, Bevel, 또는 Miter 중 하나의 값을 허용합니다.
레이어링
여러 형제 UIStroke 인스턴스를 GuiObject에 앞에서 뒤로 레이어링하려면, ZIndex 속성을 사용할 수 있습니다. 낮은 ZIndex를 가진 객체는 더 높은 ZIndex를 가진 객체의 뒤에 렌더링됩니다.
같은 ZIndex를 가진 UIStroke 인스턴스의 렌더링 순서는 정의되지 않으므로, 렌더링 순서가 중요한 경우 동일한 인덱스의 여러 UIStroke 인스턴스를 적용하지 마십시오.
모서리
UICorner 인스턴스는 부모 GuiObject의 모서리에 변형을 적용합니다. CornerRadius 속성을 통해 적용할 반경을 조정할 수 있으며, Scale 또는 Offset를 사용할 수 있습니다.
Scale은 부모의 짧은 가장자리의 전체 길이를 기준으로 백분율로 모서리를 둥글게 하며, 0.5 이상의 비율은 부모를 "알약" 모양으로 변형시킵니다. Offset는 부모의 너비/높이에 관계없이 특정 픽셀 수로 모서리를 둥글게 합니다.
또한 TopLeftRadius, TopRightRadius, BottomRightRadius, 및 BottomLeftRadius 속성을 통해 개별 모서리를 제어할 수 있습니다.
TopRightRadius = (0, 48)
BottomRightRadius = (0, 48)
BottomLeftRadius = (0, 0)
패딩
UIPadding 개체는 부모 GuiObject의 내용에 상단, 하단, 왼쪽 및/또는 오른쪽 패딩을 적용합니다. 예를 들어, 수정자의 PaddingBottom 속성에 오프셋을 적용하여 텍스트 레이블 내부의 텍스트를 아래로 또는 위로 이동할 수 있습니다.
그림자
UIShadow 개체는 부모 UI 인스턴스 뒤에 드롭 섀도를 렌더링합니다. 주요 기능은 다음과 같습니다:
- 그림자의 블러 효과를 조정합니다.
- 그림자의 색상 및 투명도를 조정합니다.
- 그림자의 오프셋 및 확산을 조정합니다.
- 부모가 GuiObject.Rotation에 의해 회전된 경우, 그림자도 회전합니다.
- 부모가 둥근 모서리를 가지면 그림자도 둥근 모서리를 가집니다.
UIShadow는 텍스트를 지원하지 않습니다. 이 수정자를 TextLabel이나 TextButton에 추가하면 객체의 직사각형 경계 영역의 그림자가 렌더링되며, 텍스트에 대한 그림자는 아닙니다.
블러 효과
BlurRadius 속성은 그림자의 블러 효과를 결정합니다. 값이 클수록 그림자의 가장자리가 더 부드럽게 나타납니다. 이 UDim 속성의 비율 요소는 부모의 너비 또는 높이에 상대적입니다, 둘 중 짧은 것을 기준으로 합니다.
색상 및 투명도
Color 속성은 그림자의 색상을 결정하고, Transparency 속성은 그림자의 투명도를 설정합니다 (0은 완전히 불투명하고 1은 완전히 투명합니다).
오프셋 및 확산
Offset 속성은 그림자를 부모의 위치에 상대적으로 이동시키고, Spread 속성은 부모의 크기에 따라 그림자를 확대하거나 축소합니다.
