[유니티] 롤 골드그래프를 만들어보자(2) - 선 찍기

UI를 이용하여 롤 골드그래프를 만들어보자

코드만 필요하신분은 아래로 내리시면 있습니다.

 

이전 결과물

이전에 점까지 찍었으니 이제 선을 찍을 차례입니다.

각 부분 코드만 정리하고 전체코드는 마지막에 올리겠습니다.

---

5. 각 점을 연결한 선을 찍는다.

선을 연결하기 전에 이전포스팅에서 말씀드렸다싶이 마스크를 이용하려하니

먼저 선에 붙일 마스크를 만들고 코드를 작성하겠습니다.

1. 이전에 만든 Line 프리팹에 Mask 컴포넌트를 추가한다.

2. MaskPanel 빈 오브젝트를 만들고

3. 자식으로 BLue, Purple을 추가하고 프리팹으로 만들면 끝

 

코드 고고

public Transform LineGroup;
// 생성한 선을 자식으로 둘 부모
public GameObject Line;
// 선 프리팹
public GameObject MaskPanel;
// Mask 프리팹

private void DrawGoldGraph()
{
    // ---
    // 격차 최대값 등...
    // ---

    Vector2 prevDotPos = Vector2.zero;
    // 이전 점과 현재 점을 이어야하므로 이전 점의 위치를 저장한다.

    for (int i = 0; i < SAMPLE_RATE; i++)
    {
        // ---
        // 점 찍기
        // ---
        
        if (i == 0)
        {
            prevDotPos = dotRT.anchoredPosition;
            continue;
        }
        // 최초 점을 찍을 땐 연결할 선이 없으므로 넘긴다.

        GameObject line = Instantiate(Line, LineGroup, true);
        line.transform.localScale = Vector3.one;

        RectTransform lineRT = line.GetComponent<RectTransform>();
        Image lineImage = line.GetComponent<Image>();

        float lineWidth = Vector2.Distance(prevDotPos, dotRT.anchoredPosition);
        float xPos = (prevDotPos.x + dotRT.anchoredPosition.x) / 2;
        yPos = (prevDotPos.y + dotRT.anchoredPosition.y) / 2;
        // 그림으로 설명..

        Vector2 dir = (dotRT.anchoredPosition - prevDotPos).normalized;
        float angle = Mathf.Atan2(dir.y, dir.x) * Mathf.Rad2Deg;
        lineRT.anchoredPosition = new Vector2(xPos, yPos);
        lineRT.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, lineWidth);
        lineRT.localRotation = Quaternion.Euler(0f, 0f, angle);
        // 두 점 사이의 각도를 tan를 이용하여 구한다.
        // atan를 이용해 라디안 값을 구하고 Rad2Deg를 이용해 라디안을 각도로 변환해준다.

        GameObject maskPanel = Instantiate(MaskPanel, Vector3.zero, Quaternion.identity);
        maskPanel.transform.SetParent(LineGroup);
        maskPanel.GetComponent<RectTransform>().anchoredPosition = Vector2.zero;
        maskPanel.transform.SetParent(line.transform);
        // 마스크 패널 생성

        prevDotPos = dotRT.anchoredPosition;
        // 이전 점 좌표 업데이트
    }
}

---

여기까지 결과물

아주 잘된다.

 

2편으로 끝내고 싶었는데 피곤해서 이만 줄이고 다음편으로..