[Unity] 베지어 곡선으로 카이사 q 따라하기

참고

https://tonikat.tistory.com/10

https://lee-seokhyun.gitbook.io/workspace/client/easy-mathematics/gdc2012/3

 

만들어 본 이유

평소에도 리그오브레전드 게임의 챔피언, 카이사의 Q 스킬 '이케시아 폭우'를 쓸 때마다 토도도독 박히는 느낌이 좋았다.

그런 느낌은 못 냈지만, 비슷하게 구현한 게시글을 봐서 나도 내 방식대로 구현해보았다.

 

베지어 곡선에 대해 많이 공부하게 되었다.

 

핵심 코드

가장 핵심은 역시 베지어 곡선이다.

3차 베지어 곡선을 썼는데, 3차 베지어 곡선은 점 4개로 위치를 구하는 것이다.

방정식으로 정석으로 코딩하면 이렇게 되는데, 수포자인 나는 이해가 한번에 가지 않는다.

/// <summary>
/// 3차 베지어 곡선.
/// </summary>
/// <param name="a">시작 위치</param>
/// <param name="b">시작 위치에서 얼마나 꺾일 지 정하는 위치</param>
/// <param name="c">도착 위치에서 얼마나 꺾일 지 정하는 위치</param>
/// <param name="d">도착 위치</param>
/// <returns></returns>
private float CubicBezierCurve(float a, float b, float c, float d)
{
    // (0~1)의 값에 따라 베지어 곡선 값을 구하기 때문에, 비율에 따른 시간을 구했다.
    float t = m_timerCurrent / m_timerMax; // (현재 경과 시간 / 도착 위치에 도착할 시간)

    // 방정식.
    return Mathf.Pow((1 - t), 3) * a
        + Mathf.Pow((1 - t), 2) * 3 * t * b
        + Mathf.Pow(t, 2) * 3 * (1 - t) * c
        + Mathf.Pow(t, 3) * d;
}

 

베지어 곡선은 결국에는 원리가 간단하므로, 그대로 코드로 짜면 이렇게 쉽게 짤 수 있다.

구글링 하다보니, 그래프로 슥슥 설명하시던데 

private float CubicBezierCurve(float a, float b, float c, float d)
{
    float t = m_timerCurrent / m_timerMax;

    // 이해한대로 편하게 쓰면.
    float ab = Mathf.Lerp(a, b, t);
    float bc = Mathf.Lerp(b, c, t);
    float cd = Mathf.Lerp(c, d, t);

    float abbc = Mathf.Lerp(ab, bc, t);
    float bccd = Mathf.Lerp(bc, cd, t);

    return Mathf.Lerp(abbc, bccd, t);
}

 

그 외에 생각했던 것들

a와 d는 시작 위치와 도착 위치이므로, 쉽게 값을 대입할 수 있는데, b와 c는 따로 위치를 잡아야한다.

랜덤하게 위치를 잡아주었는데 랜덤으로 하니, 오브젝트를 기준으로 앞으로 나가거나 뒤로 나가거나 별로 안 이뻤다.

// 시작 지점.
m_points[0] = _startTr.position; 

// 시작 지점을 기준으로 랜덤 포인트 지정.
m_points[1] = _startTr.position +
    (_newPointDistanceFromStartTr * Random.Range(-1.0f, 1.0f) * _startTr.right) + // X (좌, 우 전체)
    (_newPointDistanceFromStartTr * Random.Range(-1.0f, 1.0f) * _startTr.up) + // Y (위, 아래 전체)
    (_newPointDistanceFromStartTr * Random.Range(-1.0f, 1.0f) * _startTr.forward); // Z (앞, 뒤 전체)

// 도착 지점을 기준으로 랜덤 포인트 지정.
m_points[2] = _endTr.position +      
    (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.right) + // X (좌, 우 전체)
    (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.up) + // Y (위, 아래 전체)
    (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.forward); // Z (앞, 뒤 전체)

// 도착 지점.
m_points[3] = _endTr.position;

 

이 부분은 어느 정도의 고정한 랜덤 값을 줘서 해결했다.

플레이어의 뒤쪽 윗부분에서 시작. -> 도착지점의 앞 부분으로 도착. 느낌으로 랜덤 값을 주었다.

// 시작 지점.
m_points[0] = _startTr.position; 

// 시작 지점을 기준으로 랜덤 포인트 지정.
m_points[1] = _startTr.position +
    (_newPointDistanceFromStartTr * Random.Range(-1.0f, 1.0f) * _startTr.right) + // X (좌, 우 전체)
    (_newPointDistanceFromStartTr * Random.Range(-0.15f, 1.0f) * _startTr.up) + // Y (아래쪽 조금, 위쪽 전체)
    (_newPointDistanceFromStartTr * Random.Range(-1.0f, -0.8f) * _startTr.forward); // Z (뒤 쪽만)

// 도착 지점을 기준으로 랜덤 포인트 지정.
m_points[2] = _endTr.position +
    (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.right) + // X (좌, 우 전체)
    (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.up) + // Y (위, 아래 전체)
    (_newPointDistanceFromEndTr * Random.Range(0.8f, 1.0f) * _endTr.forward); // Z (앞 쪽만)

// 도착 지점.
m_points[3] = _endTr.position;

참고로 위에 사용한 2개의 움짤은 같은 속성 값으로 사용했다.

 

코드

참고에 올린 사이트의 코드를 참고해서, 클래스는 동일한 상태에서 안의 코드만 내 방식대로 바꾸었다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Shooter : MonoBehaviour
{
    public GameObject m_missilePrefab; // 미사일 프리팹.
    public GameObject m_target; // 도착 지점.

    [Header("미사일 기능 관련")]
    public float m_speed = 2; // 미사일 속도.
    [Space(10f)]
    public float m_distanceFromStart = 6.0f; // 시작 지점을 기준으로 얼마나 꺾일지.
    public float m_distanceFromEnd = 3.0f; // 도착 지점을 기준으로 얼마나 꺾일지.
    [Space(10f)]
    public int m_shotCount = 12; // 총 몇 개 발사할건지.
    [Range(0, 1)] public float m_interval = 0.15f;
    public int m_shotCountEveryInterval = 2; // 한번에 몇 개씩 발사할건지.

    private void Update()
    {
        if(Input.GetKeyDown(KeyCode.A))
        {
            // Shot.
            StartCoroutine(CreateMissile());
        }
    }

    IEnumerator CreateMissile()
    {
        int _shotCount = m_shotCount;
        while (_shotCount > 0)
        {
            for(int i = 0; i < m_shotCountEveryInterval; i++)
            {
                if(_shotCount > 0)
                {
                    GameObject missile = Instantiate(m_missilePrefab);
                    missile.GetComponent<BezierMissile>().Init(this.gameObject.transform, m_target.transform, m_speed, m_distanceFromStart, m_distanceFromEnd);

                    _shotCount--;
                }
            }
            yield return new WaitForSeconds(m_interval);
        }
        yield return null;
    }
}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BezierMissile : MonoBehaviour
{
    Vector3[] m_points = new Vector3[4];

    private float m_timerMax = 0;
    private float m_timerCurrent = 0;
    private float m_speed;

    public void Init(Transform _startTr, Transform _endTr, float _speed, float _newPointDistanceFromStartTr, float _newPointDistanceFromEndTr)
    {
        m_speed = _speed;

        // 끝에 도착할 시간을 랜덤으로 줌.
        m_timerMax = Random.Range(0.8f, 1.0f);

        // 시작 지점.
        m_points[0] = _startTr.position; 

        // 시작 지점을 기준으로 랜덤 포인트 지정.
        m_points[1] = _startTr.position +
            (_newPointDistanceFromStartTr * Random.Range(-1.0f, 1.0f) * _startTr.right) + // X (좌, 우 전체)
            (_newPointDistanceFromStartTr * Random.Range(-0.15f, 1.0f) * _startTr.up) + // Y (아래쪽 조금, 위쪽 전체)
            (_newPointDistanceFromStartTr * Random.Range(-1.0f, -0.8f) * _startTr.forward); // Z (뒤 쪽만)

        // 도착 지점을 기준으로 랜덤 포인트 지정.
        m_points[2] = _endTr.position +
            (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.right) + // X (좌, 우 전체)
            (_newPointDistanceFromEndTr * Random.Range(-1.0f, 1.0f) * _endTr.up) + // Y (위, 아래 전체)
            (_newPointDistanceFromEndTr * Random.Range(0.8f, 1.0f) * _endTr.forward); // Z (앞 쪽만)

        // 도착 지점.
        m_points[3] = _endTr.position;

        transform.position = _startTr.position;
    }

    void Update()
    {
        if (m_timerCurrent > m_timerMax)
        {
            return;
        }

        // 경과 시간 계산.
        m_timerCurrent += Time.deltaTime * m_speed;

        // 베지어 곡선으로 X,Y,Z 좌표 얻기.
        transform.position = new Vector3(
            CubicBezierCurve(m_points[0].x, m_points[1].x, m_points[2].x, m_points[3].x),
            CubicBezierCurve(m_points[0].y, m_points[1].y, m_points[2].y, m_points[3].y),
            CubicBezierCurve(m_points[0].z, m_points[1].z, m_points[2].z, m_points[3].z)
        );
    }

    /// <summary>
    /// 3차 베지어 곡선.
    /// </summary>
    /// <param name="a">시작 위치</param>
    /// <param name="b">시작 위치에서 얼마나 꺾일 지 정하는 위치</param>
    /// <param name="c">도착 위치에서 얼마나 꺾일 지 정하는 위치</param>
    /// <param name="d">도착 위치</param>
    /// <returns></returns>
    private float CubicBezierCurve(float a, float b, float c, float d)
    {
        // (0~1)의 값에 따라 베지어 곡선 값을 구하기 때문에, 비율에 따른 시간을 구했다.
        float t = m_timerCurrent / m_timerMax; // (현재 경과 시간 / 최대 시간)

        // 방정식.
        /*
        return Mathf.Pow((1 - t), 3) * a
            + Mathf.Pow((1 - t), 2) * 3 * t * b
            + Mathf.Pow(t, 2) * 3 * (1 - t) * c
            + Mathf.Pow(t, 3) * d;
        */

        // 이해한대로 편하게 쓰면.
        float ab = Mathf.Lerp(a, b, t);
        float bc = Mathf.Lerp(b, c, t);
        float cd = Mathf.Lerp(c, d, t);

        float abbc = Mathf.Lerp(ab, bc, t);
        float bccd = Mathf.Lerp(bc, cd, t);

        return Mathf.Lerp(abbc, bccd, t);
    }

    void OnTriggerEnter(Collider collision)
    {
        Destroy(this.gameObject, 0.35f); // 한쪽에 Trigger 체크하는 것과 Rigidbody 컴포넌트 추가 잊지 말기.
    }
}

 

구현해봤으니까 제일 멋있어보이게 움짤 하나 남겨야겠다!!

생각보단 멋있지않다...  Trail 머터리얼이 이뻐야 할 듯.