Develog
로그인

[TIL] 타일맵 구현하기(2)

muchan
muchan
∙2026년 4월 30일∙조회 12
유니티C#
[TIL] 타일맵 구현하기(2)
TIL
본문 로딩 중...

이 관심 주제의 첫 글입니다.

다음 글[TIL] 타일 맵 구현하기(1)
1
muchan

게임 버그도 콘텐츠입니다.

새 글이 올라오면 Develog 알림으로 알려드려요

댓글 0

이전 타일맵 구현하기(1)을 이어서 작성하겠습니다

타일맵 구현하기(1)

미방문 지역 안개 처리하기

우선 autoTile sprite와 마찬가지로 미방문 지역에 해당하는 안개타일 sprite가 존재
-> 4bit로 표현

Tile에서 안개처리하는 코드를 작성하였으니 참고

  • autoFowTileId
  • UpdateAutoFowTileId()

Map.cs의 Init함수 안에 아래 코드를 추가하여 FowTile도 초기화한다

csharp
for (int i = 0; i < tiles.Length; i++)
        {
            tiles[i].UpdateAutoTileId();
            tiles[i].UpdateAutoFowTileId();
        }

Stage.cs에 수정된 함수들

csharp
    public void DecorateTile(int tileId)
    {
        var tile = map.tiles[tileId]; // 데이터
        var tileGo = tileObjs[tileId]; // 게임 오브젝트
        var ren = tileGo.GetComponent<SpriteRenderer>();

        if (tile.isVisited)
        {
            if (tile.autoTileId != (int)TileTypes.Empty)
            {
                ren.sprite = islandSprites[tile.autoTileId];
            }
            else
            {
                ren.sprite = null;
            }
        }
        else
        {
            ren.sprite = isFowSprites[tile.autoFowTileId];
        }

        tile.UpdateAutoFowTileId();
    }

    public void OnTileVisited(int tileId)
    {
        OnTileVisited(map.tiles[tileId]);
    }

    public void OnTileVisited(Tile tile)
    {
        int centerX = tile.id % mapWidth;
        int centerY = tile.id / mapWidth;

        for (int i = -visitRadius; i <= visitRadius; i++)
        {
            for (int j = -visitRadius; j <= visitRadius; j++)
            {
                int x = centerX + j;
                int y = centerY + i;
                if (x < 0 || x >= mapWidth || y < 0 || y >= mapHeight)
                    continue;

                int id = y * mapWidth + x;
                map.tiles[id].isVisited = true;
                DecorateTile(id);

            }
        }

        var radius = visitRadius + 1;

        for (int i = -radius; i <= radius; i++)
        {
            for (int j = -radius; j <= radius; j++)
            {
                if (i == radius || i == -radius || j == radius || j == -radius)
                {
                    int x = centerX + j;
                    int y = centerY + i;
                    if (x < 0 || x >= mapWidth || y < 0 || y >= mapHeight)
                        continue;
                    int id = y * mapWidth + x;


                    // 여기 수정
                    map.tiles[id].UpdateAutoFowTileId();
                    DecorateTile(id);
                }
            }
        }
    }
  • DecorateTile(): 방문된 노드라면 기존 로직과 똑같이 islandSprites에 해당하는 스프라이트를 할당하고 방문하지 않은 노드라면 isFowSprites를 할당하여 안개 처리를 한다. 이후 UpdateAutoFowTileId() 호출
  • OnTileVisited(): 우선 플레이어의 Radius 범위만큼 isVisited를 true로 설정해 islandSprites를 할당한다. 이후 그 주변 (adjacents) 타일들의 autoFowTileId를 업데이트 해준다

PlayerMovement.cs에 아래 코드 추가

csharp
    public void MoveTo(int tileId)
    {
        if (coMove != null)
        {
            StopCoroutine(coMove);
            coMove = null;
        }

        coMove = StartCoroutine(MoveCoroutine(tileId)); // Lerp 이동 시작
    }

    private IEnumerator MoveCoroutine(int tileId)
    {
        isMoving = true;
        animator.speed = 2f;
        Vector3 startPos = transform.position;
        Vector3 endPos = stage.GetTilePos(tileId);
        float elapsed = 0f;
        float duration = 1f / moveSpeed;

        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            transform.position = Vector3.Lerp(startPos, endPos, elapsed / duration);
            yield return null;
        }

        transform.position = endPos; // 정확한 위치로 보정
        currentTileId = tileId;
        isMoving = false;
        coMove = null;
        animator.speed = 0f;
        stage.OnTileVisited(tileId);
    }
  • MoveTo(): 해당 타일로 이동하는 함수. 코루틴을 사용하여 움직임을 구현
  • MoveCoroutine(): 타일 한칸을 이동하는 코루틴. Lerp 함수를 통해 자연스럽게 움직이며 OnTileVisited를 호출해 타일들을 업데이트 해준다

결과

플레이어 반경을 2로 설정하여 플레이어 기준 상하좌우 +2칸씩 맵이 보이게 된다

아래로 한칸 움직이면 숨겨졌던 타일들이 나오게 된다

댓글 0

댓글을 작성하려면 로그인이 필요합니다.

아직 댓글이 없습니다. 첫 번째 댓글을 작성해보세요.

관련 글

10.6 카드 매칭 게임(1)

10.6 카드 매칭 게임(1)

카드 매칭 게임 만들어 보기(1) '26.10.06 오후, 강사님께서 4×4 카드 매칭 게임을 만들어보라고 하셨다. 완성본을 먼저 보고 파트너와 함께 직접 만들어보는 시간이었다. 최근 수업에서는 문제 하나를 풀어도 시간이 너무 오래 걸려서 개인 시간까지 문제를 풀다 보면 하루가 거의 다 지나가는 느낌이었는데, 갑자기 카드 매칭 게임이라니…… 처음부터 조금

10월 7일21
9.28

9.28

1. 연산자란? 값을 가지고 무엇인가를 하는 기호. 여기서 - 3, 5 → 값 - + → 계산 기호 - = → 계산 결과를 변수에 리턴시켜주는 기호 - 3 + 5 → 계산해서 값이 되는 식(Expression) --- 2. 산술 연산자 , , , , 대표적인 산술 연산자 - == 더하기 - == 빼기 - == 곱하기 - == 나누기 - == 나머지 ---

9월 29일4
[면접대비] C# 심화(4)

[면접대비] C# 심화(4)

C심화 면접 대비(4)

9월 8일91
10.6 카드 매칭 게임(1)
C#

NEW10.6 카드 매칭 게임(1)

카드 매칭 게임 만들어 보기(1) '26.10.06 오후, 강사님께서 4×4 카드 매칭 게임을 만들어보라고 하셨다. 완성본을 먼저 보고 파트너와 함께 직접 만들어보는 시간이었다. 최근 수업에서는 문제 하나를 풀어도 시간이 너무 오래 걸려서 개인 시간까지 문제를 풀다 보면 하루가 거의 다 지나가는 느낌이었는데, 갑자기 카드 매칭 게임이라니…… 처음부터 조금

류운형
210
류운형
∙10월 7일
210
9.28
C#

9.28

1. 연산자란? 값을 가지고 무엇인가를 하는 기호. 여기서 - 3, 5 → 값 - + → 계산 기호 - = → 계산 결과를 변수에 리턴시켜주는 기호 - 3 + 5 → 계산해서 값이 되는 식(Expression) --- 2. 산술 연산자 , , , , 대표적인 산술 연산자 - == 더하기 - == 빼기 - == 곱하기 - == 나누기 - == 나머지 ---

류운형
400
류운형
∙9월 29일
400
[면접대비] C# 심화(4)
면접C#

[면접대비] C# 심화(4)

C심화 면접 대비(4)

muchan
muchan
910
muchan
muchan
∙9월 8일
910