Unity UGUI의 아웃라인(획) 구성 요소 소개 및 사용

Unity UGUI의 아웃라인(획) 구성 요소 소개 및 사용

1. 아웃라인(획) 구성 요소란 무엇입니까?

아웃라인(획) 컴포넌트는 UI 요소에 획 효과를 추가하는 데 사용되는 Unity UGUI의 특수 효과 컴포넌트입니다. 획의 색상, 너비, 흐림을 설정하여 UI 요소를 시각적으로 더 돋보이게 할 수 있습니다.

2. 아웃라인 구성 요소의 작동 방식

윤곽선(획) 구성 요소는 UI 요소 주위에 여러 개의 동일한 UI 요소를 그리고 다른 색상과 크기를 설정하여 획 효과를 얻습니다. 획의 폭과 흐림은 매개변수를 조정하여 제어할 수 있습니다.

3. 아웃라인(획) 컴포넌트 공통 속성

• 효과 색상 : 획의 색상입니다.
• 효과 거리 : 양수 또는 음수 값으로 설정할 수 있는 스트로크의 거리입니다.
• 그래픽 알파 사용 : UI 요소의 투명도를 스트로크의 투명도로 사용할지 여부입니다.
• Blur : 획이 얼마나 흐릿한지.
• 외곽선 : 획의 너비입니다.

4. 아웃라인(획) 컴포넌트 공통 기능

• ModifyMesh : 획 효과를 그리기 위해 UI 요소의 그리드를 수정합니다.

5. 완전한 샘플 코드

예제 1: 버튼에 빨간색 획 추가

using UnityEngine;
using UnityEngine.UI;

public class Example1 : MonoBehaviour
{
    public Button button;
    public Outline outline;

    void Start()
    {
        outline.effectColor = Color.red;
        outline.effectDistance = new Vector2(2, -2);
        outline.useGraphicAlpha = true;
        outline.blur = 0;
        outline.outline = 5;
    }
}

단계:

1. 버튼을 만들고 버튼에 Example1 스크립트를 첨부합니다.
2. 버튼의 아웃라인 구성 요소를 Example1 스크립트의 아웃라인 변수로 드래그합니다.
3. Start 함수에서 effectColor, effectDistance, useGraphicAlpha, blur 및 outline을 포함한 외곽선 속성을 설정합니다.

지침:

• 획의 색상, 거리, 투명도, 흐림 및 너비를 원하는 대로 조정할 수 있습니다.

예 2: 텍스트에 파란색 획 추가

using UnityEngine;
using UnityEngine.UI;

public class Example2 : MonoBehaviour
{
    public Text text;
    public Outline outline;

    void Start()
    {
        outline.effectColor = Color.blue;
        outline.effectDistance = new Vector2(1, -1);
        outline.useGraphicAlpha = true;
        outline.blur = 0;
        outline.outline = 3;
    }
}

단계:

1. 텍스트 개체를 만들고 Example2 스크립트를 텍스트 개체에 첨부합니다.
2. 텍스트 개체의 윤곽선 구성 요소를 Example2 스크립트의 윤곽선 변수로 드래그합니다.
3. Start 함수에서 effectColor, effectDistance, useGraphicAlpha, blur 및 outline을 포함한 외곽선 속성을 설정합니다.

지침:

• 획의 색상, 거리, 투명도, 흐림 및 너비를 원하는 대로 조정할 수 있습니다.

예 3: 이미지에 녹색 획 추가

using UnityEngine;
using UnityEngine.UI;

public class Example3 : MonoBehaviour
{
    public Image image;
    public Outline outline;

    void Start()
    {
        outline.effectColor = Color.green;
        outline.effectDistance = new Vector2(3, -3);
        outline.useGraphicAlpha = true;
        outline.blur = 0;
        outline.outline = 7;
    }
}

단계:

1. 그림 개체를 만들고 그림 개체에 Example3 스크립트를 첨부합니다.
2. 그림 객체의 아웃라인 구성 요소를 Example3 스크립트의 아웃라인 변수로 드래그합니다.
3. Start 함수에서 effectColor, effectDistance, useGraphicAlpha, blur 및 outline을 포함한 외곽선 속성을 설정합니다.

지침:

• 획의 색상, 거리, 투명도, 흐림 및 너비를 원하는 대로 조정할 수 있습니다.

예 4: 슬라이더에 노란색 선 추가

using UnityEngine;
using UnityEngine.UI;

public class Example4 : MonoBehaviour
{
    public Slider slider;
    public Outline outline;

    void Start()
    {
        outline.effectColor = Color.yellow;
        outline.effectDistance = new Vector2(2, -2);
        outline.useGraphicAlpha = true;
        outline.blur = 0;
        outline.outline = 5;
    }
}

단계:

1. 슬라이더 개체를 만들고 슬라이더 개체에 Example4 스크립트를 첨부합니다.
2. 슬라이더 개체의 윤곽선 구성 요소를 Example4 스크립트의 윤곽선 변수로 드래그합니다.
3. Start 함수에서 effectColor, effectDistance, useGraphicAlpha, blur 및 outline을 포함한 외곽선 속성을 설정합니다.

지침:

• 획의 색상, 거리, 투명도, 흐림 및 너비를 원하는 대로 조정할 수 있습니다.

예 5: 입력 상자에 자주색 획 추가

using UnityEngine;
using UnityEngine.UI;

public class Example5 : MonoBehaviour
{
    public InputField inputField;
    public Outline outline;

    void Start()
    {
        outline.effectColor = Color.magenta;
        outline.effectDistance = new Vector2(1, -1);
        outline.useGraphicAlpha = true;
        outline.blur = 0;
        outline.outline = 3;
    }
}

단계:

1. 입력 상자 개체를 만들고 Example5 스크립트를 입력 상자 개체에 연결합니다.
2. 입력 상자 객체의 Outline 구성 요소를 Example5 스크립트의 outline 변수로 드래그합니다.
3. Start 함수에서 effectColor, effectDistance, useGraphicAlpha, blur 및 outline을 포함한 외곽선 속성을 설정합니다.

지침:

• 획의 색상, 거리, 투명도, 흐림 및 너비를 원하는 대로 조정할 수 있습니다.

참조

• Unity 공식 문서: 개요