Unity에서의 트랜스폼 프로퍼티
개요
Unity에서는 사용자 인터페이스(UI) 요소의 레이아웃을 조정하고, 애니메이션을 보다 매끄럽게 하기 위해 트랜스폼 프로퍼티를 사용합니다. 이 문서에서는 트랜스폼의 주요 개념과 사용 방법에 대해 설명하고, 예제를 통해 활용 방안을 알아보겠습니다.
트랜스폼 속성
트랜스폼은 다음과 같은 프로퍼티를 포함합니다.
| 프로퍼티 | USS 구문 | 설명 |
|---|---|---|
| Transform Origin | transform-origin | 회전, 확대/축소, 이동의 기준점을 설정합니다. |
| Translate | translate | 시각적 요소의 위치를 변경합니다. |
| Scale | scale | 시각적 요소의 크기를 변경합니다. |
| Rotate | rotate | 시각적 요소를 회전시킵니다. |
트랜스폼 프로퍼티 설명
- Transform Origin
- 회전의 기준점을 설정합니다. 기본값은 중앙입니다.
- 예제:
transform-origin: 0% 100%;transform-origin: 20px 10px;
- Translate
- 요소의 위치를 X축과 Y축에 따라 조정합니다.
- 예제:
translate: 80%;translate: 35px;
- Scale
- 요소의 크기를 조정합니다. 음수 값을 사용하면 뒤집기도 가능합니다.
- 예제:
scale: 2.5;scale: -1 1;
- Rotate
- 요소를 회전시킵니다. 다양한 단위를 지원합니다.
- 예제:
rotate: 45deg;rotate: -100grad;
C# 스크립트에서 트랜스폼 설정
다음 코드는 C# 스크립트를 사용하여 UI 요소의 트랜스폼 프로퍼티를 설정하는 방법을 보여줍니다.
// Transform origin 설정
element.style.transformOrigin = new StyleTransformOrigin(new TransformOrigin(new Length(100f, LengthUnit.Pixel), new Length(50f, LengthUnit.Percent)));
// Move 설정
element.style.translate = new StyleTranslate(new Translate(new Length(10f, LengthUnit.Percent), new Length(50f, LengthUnit.Pixel)));
// Scale 설정
element.style.scale = new StyleScale(new Scale(new Vector2(0.5f, -1f)));
// Rotate 설정
elements[0].style.rotate = new StyleRotate(new Rotate(new Angle(180f, AngleUnit.Degree)));
위 코드는 각각의 프로퍼티를 통해 UI 요소의 트랜스폼 상태를 설정하는 방법을 나타냅니다. 암시적 전환을 사용하면 더욱 간단하게 작성할 수 있습니다.
활용 예제
이러한 트랜스폼 프로퍼티는 다양한 UI 애니메이션과 전환 효과를 만드는 데 유용합니다. 예를 들어, 버튼을 클릭했을 때 흔들리는 효과를 주고 싶을 경우, translate와 rotate를 결합하여 사용할 수 있습니다.
// 버튼 클릭시 흔들리는 효과
element.style.rotate = new StyleRotate(new Rotate(new Angle(15f, AngleUnit.Degree)));
element.style.translate = new StyleTranslate(new Translate(new Length(5f, LengthUnit.Pixel), new Length(0, LengthUnit.Pixel)));
결론
트랜스폼 프로퍼티는 Unity의 UI 구성 요소의 변경 및 애니메이션을 제어하는 강력한 도구입니다. 이 문서에서 설명한 내용을 바탕으로 다양한 효과를 시도해보고, 필요에 맞게 트랜스폼 프로퍼티를 조정해보세요.