유니티 Unity UI 삼각형 그리기

파이어베이스 Firebase 푸시 PERMISSION_DENIED SOLVED!
안드로이드 스튜디오 Firebase - Login(auth) / Push [푸쉬코드적용] (2019.06.03)
안드로이드 스튜디오 Firebase - Login(auth) / Push [환경설정] (2019.05.28)
유니티(Unity) Firebase Analytics 사용시 Null Error
유니티(Unity) Firebase 추가시 Firebase.Editor.dll not loaded error
유니티(Unity) 빌드시 Firebase 오류

삼각형

유니티로 UI를 디자인할 때 이미지를 주로 사용하게 됩니다. 하지만 때로는 이미지를 사용하지 않고 Mesh를 이용하여 간단한 삼각형을 그려야 할 때가 있습니다. 오늘은 vertices를 조절하여 삼각형을 그리는 방법에 대해 알아보겠습니다.

----

----

CanvasRenderer

Mesh를 사용자가 원하는 세팅으로 설정하여 CanvasRenderer의 Mesh를 교체하는 형식으로 진행됩니다.

우선 Mesh를 생성하고 버텍스값과 트라이앵글값을 세팅해 주면 됩니다.

그리고 CanvasRenderer의 SetMesh와 SetMaterial 을 설정해 주면 원하는 색의 삼각형을 간단하게 그릴 수 있습니다.

코드는 다음과 같습니다.

[SerializeField] Material mt;
CanvasRenderer itemRenderer;

private void Awake()
{
    itemRenderer = GetComponent<CanvasRenderer>();
    SetData(200, 100);
}

public void SetData (int _height, int _width)
{
    Mesh mesh = new Mesh();

    Vector3[] verties = new Vector3[3];
    int[] triangles = new int[3];

    verties[0] = Vector3.zero;
    verties[1] = new Vector3(0, _height);
    verties[2] = new Vector3(_width, 0);

    triangles[0] = 0;
    triangles[1] = 1;
    triangles[2] = 2;

    mesh.vertices = verties;
    mesh.triangles = triangles;

    itemRenderer.SetMesh(mesh);
    itemRenderer.SetMaterial(mt, null);
}

 

중요하게 봐야하는 곳은 verties[0], verties[1], verties[2] 의 값을 넣어주는 것인데

좌측 하단부터 시작해서 시계방향 순서로 값을 지정해 줍니다.

결과적으로 높이 200 밑변 100의 삼각형이 그려집니다.

Material은 삼각형의 색을 정해줍니다.

쉐이더의 종류는 UI/Default로 설정해 주고 Tint 값을 변경해서 색을 정합니다.

활용

해당 기능은 Radar Chart를 그릴 일이 생겼을 때 활용할 수 있습니다.

위의 이미지처럼 각각의 영역에 삼각형을 위치시켜서 Radar Chart를 완성시킬 수 있습니다.