UI 모양 수정자

*이 콘텐츠는 AI(베타)를 사용해 번역되었으며, 오류가 있을 수 있습니다. 이 페이지를 영어로 보려면 여기를 클릭하세요.

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

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

그라디언트

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

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

그라디언트의 Color 속성에 ColorSequence를 통해 색상을 설정합니다.
그라디언트의 Transparency 속성에 NumberSequence를 통해 투명도를 설정합니다.
Type 속성을 통해 그라디언트의 유형을 선택합니다.
Offset 속성을 통해 그라디언트의 시작점 (부모의 경계 안쪽 또는 바깥쪽)을 선택합니다.
Rotation 속성을 통해 그라디언트의 각도를 선택합니다.
Scale 속성을 통해 그라디언트의 스케일을 선택합니다.
TileMode 속성을 통해 그라디언트의 엣지 샘플링 동작을 선택합니다.

색상 시퀀스

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

탐색기 창에서 UIGradient를 선택합니다.
속성 창에서 Color 속성 필드 안을 클릭한 후, 입력 상자 오른쪽의 ⋯ 버튼을 클릭합니다.
색상 시퀀스의 하단 축에 있는 각 삼각형은 해당 지점의 색상 값을 결정하는 키포인트입니다.
1. 색상 시퀀스에서 키포인트를 클릭하여 선택하거나 재배치하거나, 그래프의 아무 곳을 클릭하여 다른 키포인트를 추가합니다.
2. 색상 옆의 작은 사각형을 클릭하여 색상 팝업 창을 열고, 키포인트에 원하는 색상을 선택합니다.
3. 필요에 따라 그래프 전반에 걸쳐 색상을 추가/조정하기 위해 이 단계를 반복합니다.

투명도

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

탐색기 창에서 UIGradient를 선택합니다.
속성 창에서 Transparency 속성 필드 안을 클릭한 후, 입력 상자 오른쪽의 ⋯ 버튼을 클릭합니다.
숫자 시퀀스 그래프의 각 사각형은 해당 지점의 투명도 값을 결정하는 키포인트입니다.
1. 숫자 시퀀스에서 키포인트를 클릭하여 선택하거나 재배치하거나, 그래프의 아무 곳을 클릭하여 다른 키포인트를 추가합니다.
2. 시간 및 값 입력을 통해 특정 시간/값 조합을 입력합니다.
3. 필요에 따라 그래프 전반에 걸쳐 투명도 수준을 추가/조정하기 위해 이 단계를 반복합니다.

유형

그라디언트의 Type 속성은 Linear, Radial, 또는 Conical 중에서 유형을 설정합니다.

Linear — 색상/투명도 시퀀스가 요소를 가로질러 직선으로 전환됩니다. 방향은 회전에 의해 제어되며, 위치는 오프셋에 의해 제어됩니다. 이것이 기본값입니다.
Radial — 색상/투명도 시퀀스가 요소의 중심에서 바깥쪽으로 방사형으로 퍼지며, 선택적으로 Offset에 의해 이동됩니다. 반지름은 요소의 너비와 높이의 평균을 2로 나눈 값으로 정의되며, 효과적으로 $\text{(width+height)/4}$ 입니다. Rotation은 방사형 그라디언트에 영향을 미치지 않습니다.
Conical — 색상/투명도 시퀀스가 요소의 중심 주위를 시계 방향으로 스윕하며, 선택적으로 Offset에 의해 이동됩니다. Rotation은 스윕의 시작 및 종료 각도를 제어합니다. 기본적으로 이는 0에서 360도까지 스윕하지만, Scale 값이 1 미만이면 그 각도를 줄일 수 있습니다.

오프셋 및 회전

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

유사하게, 그라디언트를 회전하면 제어점도 회전합니다:

스케일

그라디언트의 Scale은 그라디언트의 범위를 곱하여 색상/투명도 시퀀스가 요소 내에서 얼마나 보이는지를 제어합니다.

Scale이 1 미만일 때, 그라디언트는 전체 범위보다 적게 퍼집니다. 나머지 색상/투명도는 TileMode 속성에 따라 채워집니다.
Scale이 1 초과일 때, 그라디언트는 전체 범위보다 더 많이 퍼지며 색상/투명도의 일부만 보입니다.

타일 모드

TileMode 속성은 전체 시퀀스가 부모 요소를 완전히 덮지 않을 때 그라디언트가 반복되는 방식을 설정합니다.

Clamp — 기본 모드로, 시퀀스의 시작과 끝에서 색상/투명도 값이 무한히 확장되어 시작 값이 그라디언트 이전의 모든 영역을 채우고 끝 값이 그라디언트 이후의 모든 영역을 채웁니다.
Repeat — 그라디언트가 색상/투명도 시퀀스 타일을 끝에서 시작으로 매끄럽게 감싸면서 반복됩니다. 시퀀스의 첫 번째와 마지막 색상/투명도 값이 다르면 눈에 띄는 이음새가 발생할 수 있습니다.
Mirror — 그라디언트가 각 경계에서 반사되어 색상/투명도 시퀀스가 ping‑pong 방식으로 진행됩니다. 이는 각 타일 가장자리에서 방향이 반전되므로 이음새 없이 부드러운 반복을 생성합니다.

스트로크

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

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

두께

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

텍스트 객체에 적용된 UIStroke 인스턴스의 Thickness 속성을 트윈하는 것을 피하십시오. 이는 매 프레임마다 많은 글리프 크기를 렌더링하고 저장하여 성능 문제나 텍스트 깜박임을 유발할 수 있습니다.

색상 또는 그라디언트

Color 속성을 통해 스트로크 색상을 설정할 수 있으며, 자식 UIGradient 인스턴스를 삽입하여 그라디언트 스트로크를 생성할 수 있습니다.

부모 객체와 UIStroke 모두 자식 UIGradient 인스턴스를 가질 수 있어, 스트로크와 채우기에 대해 독립적으로 그라디언트를 설정할 수 있습니다.

텍스트 윤곽선 또는 테두리

UIStroke는 부모 유형에 따라 텍스트 윤곽선 또는 테두리로 작동합니다. UIStroke를 TextLabel과 같은 텍스트 객체에 부모로 설정하면 텍스트의 윤곽선에 적용됩니다. 다른 GuiObjects에 부모로 설정하면 테두리에 적용됩니다.

텍스트 객체에 적용할 때, ApplyStrokeMode 속성을 통해 기본 스트로크 동작을 재정의할 수 있으며, 이를 통해 텍스트 자체가 아닌 객체의 경계에 스트로크를 적용할 수 있습니다. 두 개의 UIStroke 인스턴스를 텍스트 객체에 부모로 설정하여 텍스트 윤곽선과 테두리를 독립적으로 제어할 수도 있습니다. 하나는 Contextual로, 다른 하나는 Border로 설정합니다.