[개발 일기] 공격 범위 표시하기

development diary

GIF:

When: 1학년 11월 3일

 

Developed: 개발한 것

• 프로젝트 : Crazy Squid / 엔진 수업 팀 프로젝트
• 설명 : 플레이할 때 보여주려는 의도는 아니고, 스킬을 쓸 때 공격 범위가 없으면 테스트할 때
  너무 불편해질 것 같아 공격 범위를 표시하려고 했습니다. 그런데 이 게임에선 플레이어가
  자유자재로 돌아가기 때문에 공격 범위도 플레이어에 맞게 돌아가는데, 기즈모는 회전시킬 수 없어서
  라인 렌더러를 활용했습니다. 라인 렌더러를 공부하여 라인 렌더러가 벡터의 배열로 특정 좌표들에 점을 찍고,
  이어서 선을 만드는 컴포넌트라는 것을 알았는데, 플레이어가 돌면 범위 벡터도 특정 좌표를 중심으로 돌아야
  했기 때문에 그 방법을 검색하다 쿼터니언에 벡터를 곱하면 원점(0, 0)을 중심으로 회전한다는 것을 알았습니다.
  처음에는 원점을 중심으로 모양을 잡았는데, 벡터를 돌리고 오프셋을 적용하면 회전하는 중심축이 플레이어가
  아닌 범위의 가운데가 되어 범위 표시가 플레이어가 돌 때 공전과 자전을 동시에 하지 않고 자전만 하게 됩니다.
  때문에 먼저 오프셋을 적용하여 중심축을 플레이어로 맞추고, 쿼터니언에 곱하여 플레이어를 중심으로
  회전할 수 있게 하였습니다.
• 사용한 코드 : (git 링크)

using UnityEngine;

public class DrawRangeManager : MonoSingleton<DrawRangeManager>
{
    public LineRenderer lineRenderer;
    public bool closed = true;

    protected override void Awake()
    {
        base.Awake();

        lineRenderer = GetComponent<LineRenderer>();
    }

    public void DrawBox(Vector2 size, float angle, Vector3 position, Vector3 offset)
    {
        lineRenderer.loop = true;
        lineRenderer.positionCount = 4;

        float halfX = size.x / 2;
        float halfY = size.y / 2;

        Vector3[] points = { new Vector2(-halfX, -halfY), new Vector2(-halfX, halfY),
        new Vector2(halfX, halfY), new Vector2(halfX, -halfY)};

        for (int i = 0; i < points.Length; i++)
        {
            points[i] = Quaternion.Euler(0, 0, angle) * (points[i] + offset) + position;
        }

        lineRenderer.SetPositions(points);
    }

}

• 코드 설명 : 일단 LineRenderer 컴포넌트를 변수에 담고, 아직은 사각형 범위 공격만 있기 때문에
  크기, 각도, 위치, 오프셋을 조정할 수 있는 사각형 범위를 그리는 메서드를 하나 만들었습니다.
  점 4개를 순서대로 이으면 선이 3개 생기기 때문에 빈 공간을 채우기 위해 LineRenderer의
  loop를 true로 설정해 마지막 점과 처음 점을 잇는 선을 그리도록 했고, 사각형이기 때문에 positionCount를
  4로 설정하였습니다. 전 처음에 모양을 잡은 후, offset을 적용하여 자신의 중심이 아닌 플레이어의
  중심을 기준으로 회전할 수 있게 만들어 회전시키고, 마지막으로 플레이어 위치로 맞췄습니다.
  모양은 직사각형이기 때문에 정한 크기의 길이 / 2, 높이 / 2를 구한 다음, 왼쪽 아래는 x값은 0에서 길이의
  절반을 뺀 값, y값은 0에서 높이의 절반을 뺀 값으로 해서 좌표를 구하는 방식으로 사각형의 4개의 점을 구했습니다.
  그 후 for문으로 각 점에 offset을 더하고, 더한 값과 쿼터니언에 값을 곱하여 플레이어가 있을 위치를
  중심으로 회전시킨 다음, 마지막으로 position을 더하여 플레이어 위치로 이동시켰습니다.
  모든 좌표를 구했기 때문에 lineRenderer.SetPosition(points);로 라인을 그릴 수 있습니다. 

 

Result: 쿼터니언에 벡터를 곱하면 벡터가 원점을 중심으로 돌아간다는 사실을 알았는데, 용도가 다양할 것 같아 더욱 자세히 공부해야겠다는 생각이 들었습니다.