Pentagon Balance UI 제작하기

캐릭터의 스텟을 받아와 오각형 밸런스 UI로 보여주기 위해 제작

* 이번에 제작한 오각형 밸런스 유아이는 월드 스페이스에서 사용되게 제작.

 

 

1. 캐릭터의 스테이터스 5가지를 받으면, 각 스테이터스를 최대 스테이터스로 나눠 0 ~ 1 사이의 값으로 만들기.

2. 오각형의 각 꼭지점 위치 계산하기

    void CalculatePentagonVertices()
    {
        for (int i = 0; i < 5; i++)
        {
            float angle = (72 * i+18) * Mathf.Deg2Rad; // 72도씩 증가, 시작지점  18도
            pentagonVertices[i] = new Vector3(Mathf.Cos(angle) * radius, Mathf.Sin(angle) * radius, 0f);
        }
    }

오각형을 만들 것이기 때문에 360을 5 로 나눠준 뒤 꼭지점을 가장 윗부분에 위치시키기 위해 18도에서 시작.

각도를 레디안 값으로 변환 후 코싸인을 사용해 각 꼭지점 위치를 구합니다.

 

 

3. 오각형의 각 꼭지점 위치와 0 ~ 1 사이의 값으로 만들어 놓은 스테이터스를 사용해 매쉬 생성

스테이터스에 따른 삼각형을 5개를 만들 것 입니다.

    void CreatePentagonMesh()
    {
        Mesh mesh = new Mesh();
        vertices = new Vector3[6]; // 5 + 1 (중심점)
        int[] triangles = new int[15]; 

        // 중심점
        vertices[0] = Vector3.zero;

        // 오각형의 꼭짓점
        for (int i = 0; i < 5; i++)
        {
            vertices[i + 1] = pentagonVertices[i] * attributes[i];
        }

        // 삼각형 설정
        for (int i = 0; i < 5; i++)
        {
            triangles[i * 3] = 0; // 중심점
            triangles[i * 3 + 1] = i + 1;
            triangles[i * 3 + 2] = (i + 1) % 5 + 1;
        }

        mesh.vertices = vertices;
        mesh.triangles = triangles;
        
        mesh.RecalculateNormals();
        

        meshFilter.mesh = mesh;

        Color color = fillMaterial.color;
        color.a = 0.1f;
        fillMaterial.color = color;
        
    }

 

            triangles[i * 3] = 0;
            triangles[i * 3 + 1] = i + 1;
            triangles[i * 3 + 2] = (i + 1) % 5 + 1;

 

triangles[i * 3] = 0;
    - 각 삼각형의 첫 번째 꼭짓점은 항상 중심점 입니다.
    - 예: triangles[0], triangles[3], triangles[6], triangles[9], triangles[12] 모두 중심점 (`0`)을 가리킵니다.

triangles[i * 3 + 1] = i + 1;
    - 각 삼각형의 두 번째 꼭짓점은 현재 꼭짓점입니다.
    - 예: triangles[1]은 vertices[1], triangles[4]는 vertices[2], triangles[7]은 vertices[3], triangles[10]은 vertices[4], triangles[13]은 vertices[5]을 가리킵니다.

triangles[i * 3 + 2] = (i + 1) % 5 + 1;
    - 각 삼각형의 세 번째 꼭짓점은 다음 꼭짓점입니다. (i + 1) % 5을 통해 다음 꼭짓점의 인덱스를 계산하고, +1을 더하여 vertices 배열의 인덱스로 변환합니다.
    - 예: triangles[2]는 vertices[2], triangles[5]는 vertices[3], triangles[8]은 vertices[4], triangles[11]은 vertices[5], triangles[14]은 vertices[1]을 가리킵니다 (마지막 꼭짓점 이후 다시 첫 번째 꼭짓점으로 돌아갑니다).

 

4. 중심부에서 각 꼭지점까지 라인을 그려줘 스탯을 한눈에 보기 편하게 만들기

LineRenderer은 일반적으로 월드공간에서 사용 됨으로 캔버스의 랜더모드를 월드 스페이스로 변환해 줍니다.

lineRenderer.useWorldSpace = false; 로 라인 랜더러를 로컬 좌표를 사용하도록 설정해줍니다.

 

5. 각 꼭지점 부분에 변경된 스테이터스 업데이트 해주기

생성된 오각형 꼭지점 부분에 텍스트로 스테이터스 이름과 스테이터스 벨류를 업데이트 해줍니다.