키워드

• Line Renderer로 포물선 그리기

Line Renderer

게임 내에서 유닛의 예상 공격을 표시해주는 기능을 만들어야한다.
그리고 레퍼런스에서는 이 표시가 포물선 형태로 캐릭터에서 대상에게 향하고 있다.

어떻게 만들까 생각하다가 우선 선이라는 점에서 LineRenderer를 써보기로 했다.

Trail과 비슷하게 Effects 카테고리로 분류되고 있다.

이렇게 인스펙터에서 Position을 설정해주니 해당 점들을 선으로 이어준다.
인스펙터에서 저렇게 조절할 수 있었으니 아마 제어 메서드가 있을 것이다.

공식 문서를 보니 이렇게 SetPosition, SetPositions 메서드가 있었다.

그리고 더 찾아보니 positionCount가 프로퍼티 형태로 제공되고 있었다.
우선 당장에 개발에 필요한 것들은 모두 찾았고, 한번 간단하게 테스트 해보기로 했다.

public void AddTest()
{
    line.positionCount = 3;
    Vector3 pos = Vector3.zero;
    for (int i = 0; i < 3; i++)
    {
        pos += Vector3.one;
        line.SetPosition(i, pos);
    }
}

ContextMenu로 실행해보니

예상한대로 사선을 그리며 선이 생성되었다.
이걸 이용해서 포물선을 그려볼 것이다.

포물선 그리기

계획

1. 시작점과 끝점을 Vector3로 받아온다.
2. line에 포물선을 위한 point의 갯수를 입력받는다.
3. 각 점들에 반복문으로 시작점과 끝점의 보간된 위치에 값을 넣어준다.
4. 각 점들의 y축 값을 포물선을 그리도록 추가한다.

여기서 난해했던 점은 4번이었다.
여러가지 생각나는 방법들이 있었고 간단하게 바로 떠오른 방법은 다음과 같았다.

방법 1

y축의 위치를 정해두고, 점들의 위치를 보간할 때 쓴 반복문에서
중간값으로 갈수록 더해주고, 그 이후부터는 빼준다.

결과

public void Method1()
{
    line.positionCount = pointCount + 1;
    float yHeight = 0f;
    for (int i = 0; i <= pointCount; i++)
    {
        Vector3 pos = Vector3.Lerp(start, end, (float)i / pointCount);
        yHeight += i <= pointCount / 2 ? 0.5f : -0.5f;
        pos.y = yHeight;

        line.SetPosition(i, pos);
    }
}

포물선이 아니라 꺾은 선이 그려진다.
그럴 수 밖에 없던 것이 완만한 곡선형태로 값이 변하는 것이 아니라 균등한 값이 이용됐기 때문이다.

방법 2

완만한 곡선을 그려야한다.
이 점에서 생각했던 것이 좀 더 수학적으로 접근해야한다 였다.
이런 방식으로 포물선을 그릴려면 대체로 삼각함수를 이용해야했다.

중학교에서 배우는 삼각함수 중, sin의 그래프이다.
보면 0~π 까지의 그래프는 내가 생각하던 포물선을 그리고 있다.

이럴 줄 알았으면 그냥 이과 갈 걸
Mathf 라이브러리에는 당연히 sin과 π 상수도 있었다.

앞선 계획 4번을 조금 수정했다.
반복문 내에서 y축 값에 sin을 해준 값을 넣어준다.

public void Method2()
{
    line.positionCount = pointCount + 1;
    for (int i = 0; i <= pointCount; i++)
    {
        Vector3 pos = Vector3.Lerp(start, end, (float)i / pointCount);

        float angle = (float)i / pointCount * Mathf.PI;
        pos.y = Mathf.Sin(angle);

        line.SetPosition(i, pos);
    }
}

내가 필요한 값은 0~π까지의 값이므로 반복문에서 다음과 같이 계산해주었다.

float angle = (float)i / pointCount * Mathf.PI;
pos.y = Mathf.Sin(angle);

이렇게 얻은 각도값을 MathF.Sin 메서드에 넣어 Sin 결과값을 얻었다.

정상적으로 작동하는 것을 확인했으니 본 프로젝트에 적용해두었다.

#내일배움캠프 #스파르타내일배움캠프 #스파르타내일배움캠프TIL