[IC] Isometric 타일맵 에디터 제작기 (2) - Isometric 에디터 그리드

18.01.04

본격적인 에디터 코딩

에디터 구상

틈틈히 에디터에 대해 구상해보았다.

주요 4가지 사항을 정리해보면

1. 타일 그리드를 볼 수 있으며 그 크기도 조절 가능하다.

2. 그리드에 Snap하는 기능이 있으며 원한다면 이 기능을 끌수 있다.

3. 원하는 타일을 선택하고 그리드 내부를 클릭하면 타일이 생성된다.

4. 타일은 땅/오브젝트 두가지로 분류할 수 있다.

Isometric 타일 Grid

먼저 다이아몬드 형태의 Isometric 그리드를 에디터에서 보이도록 하는 것부터 시작하였다.

선 하나 씬 뷰에 그리는 것도 생각보다 복잡하였다.

선이 밖으로 튀어나갔다가 선 기울기가 이상해졌다가 등등 시행착오를 겪고 나서야 완성하였다.

먼저 MapManager 에디터 스크립트의 OnSceneGUI 함수이다.

(일단 mapManager는 mapWidth, mapHeight, gridSize, gridColor를 변수로 갖고 있다)

(gridConst는 0.01f)

    void OnSceneGUI()
    {
        //그리드 상수 업데이트
        gridWidth = mapManager.gridSize * gridConst * 0.5f;
        gridHeight = mapManager.gridSize * gridConst * 0.25f;

        //그리드 Draw
        DrawMapGrid();
    }

그리고 DrawMapGrid 함수는 아래과 같다.

private void DrawMapGrid()
    {
        //그리드 선 색 설정
        Handles.color = mapManager.gridColor;

        //왼쪽 아래 방향 그리드 Draw
        Vector2 startPos = mapManager.transform.position;
        Vector2 endPos = mapManager.transform.position;

        startPos.y += gridHeight;
        endPos.x -= mapManager.mapHeight * gridWidth;
        endPos.y -= (mapManager.mapHeight - 1) * gridHeight;

        for (int i = 0; i < (mapManager.mapWidth + 1); i++)
        {
            Handles.DrawLine(startPos, endPos);

            startPos.x += gridWidth;
            startPos.y -= gridHeight;
            endPos.x += gridWidth;
            endPos.y -= gridHeight;
        }

        //오른쪽 아래 방향 그리드 Draw
        startPos = mapManager.transform.position;
        endPos = mapManager.transform.position;

        startPos.y += gridHeight;
        endPos.x += mapManager.mapWidth * gridWidth;
        endPos.y -= (mapManager.mapWidth - 1) * gridHeight;

        for (int i = 0; i < (mapManager.mapHeight + 1); i++)
        {
            Handles.DrawLine(startPos, endPos);

            startPos.x -= gridWidth;
            startPos.y -= gridHeight;
            endPos.x -= gridWidth;
            endPos.y -= gridHeight;
        }

    }

그러면 에디터상에서는 다음과 같이 예쁘게 선이 그려지는 것을 볼수 있다.

넘나 아름다운것...