Unity UGUI의 Shadow(그림자) 구성 요소 소개 및 사용

Unity UGUI의 Shadow(그림자) 구성 요소 소개 및 사용

1. Shadow 구성 요소는 무엇입니까?

Shadow(그림자) 컴포넌트는 UI 요소에 그림자 효과를 추가하는 데 사용되는 Unity UGUI의 특수 효과 컴포넌트입니다. 그림자의 색상, 오프셋, 흐림 및 기타 속성을 조정하여 UI 요소를 보다 3차원적이고 계층적으로 보이게 할 수 있습니다.

2. Shadow 구성 요소의 작동 방식

Shadow(Shadow) 컴포넌트는 UI 요소와 같은 모양이지만 UI 요소 아래에 약간 확대된 그림자 이미지를 그려서 그림자 효과를 구현합니다. 그림자 이미지의 색상, 오프셋 및 블러링은 속성을 통해 조정할 수 있습니다.

3. Shadow 구성 요소의 공통 속성

• 효과 색상 : 그림자의 색상입니다.
• Effect Distance : 그림자의 오프셋 거리.
• 그래픽 알파 사용 : UI 요소의 투명도를 그림자의 투명도로 사용할지 여부입니다.
• 흐림 : 그림자가 얼마나 흐릿한지.
• Blur Distance : 그림자의 흐림 거리입니다.

4. Shadow(그림자) 컴포넌트 공통 기능

• ModifyMesh : 그림자 이미지를 그리는 데 사용되는 UI 요소의 메쉬를 수정합니다.

5. 완전한 샘플 코드

예제 1: 그림자 효과 추가

using UnityEngine;
using UnityEngine.UI;

public class AddShadowExample : MonoBehaviour
{
    public Text text;
    public Shadow shadow;

    void Start()
    {
        shadow = text.GetComponent<Shadow>();
        shadow.enabled = true;
    }
}

작업 단계 :

1. Text 개체를 만들고 여기에 스크립트를 첨부합니다.
2. Text 개체를 text스크립트의 변수로 드래그합니다.
3. Start 함수에서 Text 개체의 Shadow 구성 요소를 가져오고 enabled해당 속성을 true로 설정합니다.

참고 :

• Shadow 구성 요소를 사용하기 전에 UI 요소에 그래픽 구성 요소(텍스트, 이미지 등)가 이미 있는지 확인해야 합니다.

예 2: 그림자 색상 조정

using UnityEngine;
using UnityEngine.UI;

public class ChangeShadowColorExample : MonoBehaviour
{
    public Text text;
    public Shadow shadow;

    void Start()
    {
        shadow = text.GetComponent<Shadow>();
        shadow.enabled = true;
        shadow.effectColor = Color.red;
    }
}

작업 단계 :

1. Text 개체를 만들고 여기에 스크립트를 첨부합니다.
2. Text 개체를 text스크립트의 변수로 드래그합니다.
3. Start 함수에서 Text 개체의 Shadow 구성 요소를 가져오고 enabled해당 속성을 true로 설정합니다.
4. Shadow 구성 요소의 속성을 effectColor빨간색으로 설정합니다.

참고 :

• effectColor이 속성은 Color 유형의 값을 허용하며 다른 RGB 값을 설정하여 그림자 색상을 조정할 수 있습니다.

예 3: 그림자 오프셋 조정

using UnityEngine;
using UnityEngine.UI;

public class ChangeShadowOffsetExample : MonoBehaviour
{
    public Text text;
    public Shadow shadow;

    void Start()
    {
        shadow = text.GetComponent<Shadow>();
        shadow.enabled = true;
        shadow.effectDistance = new Vector2(5, -5);
    }
}

작업 단계 :

1. Text 개체를 만들고 여기에 스크립트를 첨부합니다.
2. Text 개체를 text스크립트의 변수로 드래그합니다.
3. Start 함수에서 Text 개체의 Shadow 구성 요소를 가져오고 enabled해당 속성을 true로 설정합니다.
4. Shadow 구성 요소의 속성을 effectDistanceVector2(5, -5)로 설정합니다.

참고 :

• effectDistance속성은 Vector2 유형의 값을 허용하며 그림자의 오프셋은 다른 x 및 y 값을 설정하여 조정할 수 있습니다.

예 4: 그림자 흐림 조정

using UnityEngine;
using UnityEngine.UI;

public class ChangeShadowBlurExample : MonoBehaviour
{
    public Text text;
    public Shadow shadow;

    void Start()
    {
        shadow = text.GetComponent<Shadow>();
        shadow.enabled = true;
        shadow.blur = 2;
    }
}

작업 단계 :

1. Text 개체를 만들고 여기에 스크립트를 첨부합니다.
2. Text 개체를 text스크립트의 변수로 드래그합니다.
3. Start 함수에서 Text 개체의 Shadow 구성 요소를 가져오고 enabled해당 속성을 true로 설정합니다.
4. Shadow 구성 요소의 속성을 blur2로 설정합니다.

참고 :

• blur이 속성은 float 유형의 값을 허용하며 다른 값을 설정하여 그림자의 흐림을 조정할 수 있습니다.

예제 5: 그래픽 알파를 그림자 투명도로 사용

using UnityEngine;
using UnityEngine.UI;

public class UseGraphicAlphaExample : MonoBehaviour
{
    public Text text;
    public Shadow shadow;

    void Start()
    {
        shadow = text.GetComponent<Shadow>();
        shadow.enabled = true;
        shadow.useGraphicAlpha = true;
    }
}

작업 단계 :

1. Text 개체를 만들고 여기에 스크립트를 첨부합니다.
2. Text 개체를 text스크립트의 변수로 드래그합니다.
3. Start 함수에서 Text 개체의 Shadow 구성 요소를 가져오고 enabled해당 속성을 true로 설정합니다.
4. Shadow 구성 요소의 속성을 useGraphicAlphatrue로 설정합니다.

참고 :

• 속성이 true로 설정 되면 useGraphicAlpha그림자의 투명도가 UI 요소의 투명도와 일치합니다.

참조

• Unity 공식 문서: Shadow