UI 모양 수정자

모양 수정자를 활용하여 GuiObjects의 모양을 더욱 사용자 정의할 수 있습니다.

• 객체의 배경에 그라디언트를 적용합니다.
• 텍스트나 테두리에 스트로크를 적용합니다.
• 객체에 둥근 모서리를 설정합니다.
• 객체의 테두리 사이에 패딩을 늘립니다.
• 객체 뒤에 드롭 섀도우를 추가합니다.

그라디언트

UIGradient 객체는 부모 GuiObject에 색상 및 투명도 그라디언트를 적용합니다.

그라디언트를 구성하는 방법은 다음과 같습니다:

• 그라디언트의 Color 속성에 ColorSequence를 통해 색상을 설정합니다.
• 그라디언트의 Transparency 속성에 NumberSequence를 통해 투명도를 설정합니다.
• Offset 속성을 통해 그라디언트의 시작점을 선택합니다(부모의 경계 안쪽 또는 바깥쪽).
• Rotation 속성을 통해 그라디언트의 각도를 선택합니다.

색상 시퀀스

그라디언트의 색상 시퀀스를 설정하려면:

1. Explorer 창에서 UIGradient를 선택합니다.

2. Properties 창에서 Color 속성 필드 안을 클릭한 후, 입력 상자 오른쪽의 ⋯ 버튼을 클릭합니다. 색상 시퀀스 팝업이 표시됩니다.

   

   색상 시퀀스의 하단 축에 있는 각 삼각형은 해당 지점의 색상 값을 결정하는 키포인트입니다.

   

3. 색상 시퀀스에서 키포인트를 클릭한 후, Color 옆의 작은 사각형을 클릭하여 Colors 팝업 창을 엽니다.

4. 키포인트에 원하는 색상을 선택합니다.

   

5. 필요에 따라 다음을 수행할 수 있습니다:

   • 그래프의 아무 곳이나 클릭하여 다른 키포인트를 추가합니다.
   • 기존 키포인트를 새 위치로 드래그하거나, 키포인트를 선택하고 Time 입력을 통해 특정 시간 값을 입력합니다.
   • 키포인트를 선택하고 Delete 버튼을 클릭하여 삭제합니다.
   • Reset 버튼을 클릭하여 시퀀스를 초기화합니다.

투명도

그라디언트의 투명도를 조정하려면:

1. Explorer 창에서 UIGradient를 선택합니다.

2. Properties 창에서 Transparency 속성 필드 안을 클릭한 후, 입력 상자 오른쪽의 ⋯ 버튼을 클릭합니다. 숫자 시퀀스 팝업이 표시됩니다.

   

   숫자 시퀀스 그래프의 각 사각형은 해당 지점의 투명도 값을 결정하는 키포인트입니다.

   

3. 키포인트를 클릭하고 드래그하거나, 키포인트를 선택하고 Time 및 Value 입력을 통해 특정 시간/값 조합을 입력합니다.

   

4. 필요에 따라 다음을 수행할 수 있습니다:

   • 그래프의 아무 곳이나 클릭하여 다른 키포인트를 추가합니다.
   • 키포인트를 선택하고 Delete 버튼을 클릭하여 삭제합니다.
   • Reset 버튼을 클릭하여 시퀀스를 초기화합니다.

오프셋 및 회전

Offset 및 Rotation 속성을 통해 그라디언트의 제어점을 조정하고 각도를 설정할 수 있습니다. 다음 다이어그램에서 설명하듯이, Offset은 부모의 너비 또는 높이의 백분율을 기준으로 하며, 양수 또는 음수 값 모두 유효합니다.

마찬가지로, 그라디언트를 회전하면 제어점도 회전합니다:

스트로크

UIStroke 인스턴스는 텍스트나 테두리에 윤곽선을 적용합니다. 주요 기능은 다음과 같습니다:

• 스트로크 윤곽선의 색상 및 두께를 조정할 수 있습니다.
• 부모의 투명도와 독립적으로 스트로크 투명도를 설정할 수 있습니다.
• 부모의 테두리에 대한 위치 및/또는 오프셋을 사용자 정의할 수 있습니다.
• 세 가지 모서리 스타일(둥글게, 베벨, 또는 미터).
• UIGradient 인스턴스를 통해 스트로크 그라디언트 지원.

두께

Thickness 속성을 통해 스트로크 너비를 설정할 수 있으며, 이는 픽셀(기본값)로 측정되거나 수정자의 StrokeSizingMode에 따라 부모에 상대적으로 조정됩니다. 텍스트에 스트로크가 적용되고 StrokeSizingMode가 ScaledSize로 설정되면 두께는 글꼴 크기에 상대적입니다.

색상 또는 그라디언트

Color 속성을 통해 스트로크 색상을 설정할 수 있으며, 자식 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 속성을 통해 개별 모서리를 제어할 수 있습니다.

패딩

UIPadding 객체는 부모 GuiObject의 내용에 위, 아래, 왼쪽 및/또는 오른쪽 패딩을 적용합니다. 예를 들어, 수정자의 PaddingBottom 속성에 오프셋을 적용하여 텍스트 레이블 안의 텍스트를 아래로 또는 위로 이동할 수 있습니다.

섀도우

UIShadow 객체는 부모 UI 인스턴스 뒤에 드롭 섀도우를 렌더링합니다. 주요 기능은 다음과 같습니다:

• 섀도우의 블러를 조정합니다.
• 섀도우의 색상 및 투명도를 조정합니다.
• 섀도우의 오프셋 및 확산을 조정합니다.
• 부모가 GuiObject.Rotation으로 회전하면 섀도우도 회전합니다.
• 부모에 둥근 모서리가 있으면 섀도우도 둥근 모서리를 가집니다.

블러

BlurRadius 속성은 섀도우의 블러 정도를 결정합니다. 값이 클수록 섀도우의 가장자리가 더 부드럽게 보입니다. 이 UDim 속성의 스케일 인자는 부모의 너비 또는 높이 중 짧은 쪽에 상대적입니다.

색상 및 투명도

Color 속성은 섀도우의 색상을 결정하며, Transparency는 섀도우의 투명도를 설정합니다. 0은 완전히 불투명하고 1은 완전히 투명합니다.

오프셋 및 확산

Offset 속성은 섀도우를 부모의 위치에 상대적으로 이동시키며, Spread는 부모의 크기에 상대적으로 섀도우를 확장하거나 축소합니다.