Carrot
본문 바로가기
Unity/멋쟁이사자처럼 부트캠프

[멋쟁이사자처럼부트캠프] 유니티 게임 개발 5기(28일차) - 2D 플랫포머 게임(3)

by 독기품은토끼 2025. 6. 25.
✅ 오늘의 학습 목표
1. 공격 기능 추가
2. 타일맵 제작

 

1. 기능 추가

1. 공격 기능 추가

1.1. 히트박스 생성 및 애니메이션 적용

 

공격을 처리할 히트박스를 생성해 주고 애니메이션 동작과 크기에 맞게 콜라이더를 활성/비활성화 해준다.

 

하지만 실무에서 이렇게 애니메이션에서 스케일을 조절하는 것은 성능적으로 좋지 않다.

게임 이미지 제작자에게 검과 동일한 이미지를 만들어달라고 하고, 그 이미지에 맞게 폴리곤 콜라이더로 적용해 주는 것이 제일 좋다.

 

1.2. 공격 판정 확인

public class KnightController_Joystick : MonoBehaviour
{
    private float atkDamage = 3f;

    void OnTriggerEnter2D(Collider2D other)
    {
        if (other.CompareTag("Monster"))
        {
            Debug.Log($"{atkDamage} 데미지로 공격");
        }
    }

    void Attack()
    {
        if (!isAttack)
        {
            isAttack = true;
            atkDamage = 3f;
            animator.SetTrigger("[Trigger] Attack");
        }
        else
            isCombo = true;
    }

    public void CheckCombo()
    {
        if (isCombo)
        {
            atkDamage = 5f;
            animator.SetBool("[Bool] IsCombo", true);
        }
        else
        {
            animator.SetBool("[Bool] IsCombo", false);
            isAttack = false;
        }
    }
}

 

2. 키보드 오브젝트

조이스틱에만 구현한 애니메이션이나 공격기능을 이제 키보드 오브젝트에도 넣어준다.

using UnityEngine;

public class KnightController_Keyboard : MonoBehaviour
{
    private Animator animator;
    private Rigidbody2D knightRb;

    private Vector3 inputDir;
    [SerializeField] private float moveSpeed = 3f;
    [SerializeField] private float jumpPower = 13f;

    private float atkDamage = 3f;

    private bool isGround;
    private bool isAttack;
    private bool isCombo;

    void Start()
    {
        animator = GetComponent<Animator>();
        knightRb = GetComponent<Rigidbody2D>();
    }

    void Update()
    {
        InputKeyboard();
        Jump();
        Attack();
    }

    void FixedUpdate()
    {
        Move();
    }

    void OnCollisionEnter2D(Collision2D other)
    {
        if (other.gameObject.CompareTag("Ground"))
        {
            animator.SetBool("[Bool] IsGround", true);
            isGround = true;
        }
    }

    private void OnCollisionExit2D(Collision2D other)
    {
        if (other.gameObject.CompareTag("Ground"))
        {
            animator.SetBool("[Bool] IsGround", false);
            isGround = false;
        }
    }

    void OnTriggerEnter2D(Collider2D other)
    {
        if (other.CompareTag("Monster"))
        {
            Debug.Log($"{atkDamage} 데미지로 공격");
        }
    }

    void InputKeyboard()
    {
        float h = Input.GetAxisRaw("Horizontal");
        float v = Input.GetAxisRaw("Vertical");
        inputDir = new Vector3(h, v, 0);

        // 애니메이터 파라미터에 값 전달 => 애니메이션 동작
        animator.SetFloat("[Float] JoystickX", inputDir.x);
        animator.SetFloat("[Float] JoystickY", inputDir.y);
    }

    void Move()
    {
        if (inputDir.x != 0)
        {
            var scaleX = inputDir.x > 0 ? 1 : -1;
            transform.localScale = new Vector3(scaleX, 1, 1);

            knightRb.linearVelocityX = inputDir.x * moveSpeed;
        }
    }

    void Jump()
    {
        if (Input.GetKeyDown(KeyCode.Space) && isGround)
        {
            animator.SetTrigger("[Trigger] Jump");
            knightRb.AddForceY(jumpPower, ForceMode2D.Impulse);
        }
    }

    void Attack()
    {
        if (Input.GetKeyDown(KeyCode.Z))
        {
            if (!isAttack)
            {
                isAttack = true;
                atkDamage = 3f;
                animator.SetTrigger("[Trigger] Attack");
            }
            else
                isCombo = true;
        }
    }

    public void CheckCombo()
    {
        if (isCombo)
        {
            atkDamage = 5f;
            animator.SetBool("[Bool] IsCombo", true);
        }
        else
        {
            animator.SetBool("[Bool] IsCombo", false);
            isAttack = false;
        }
    }

    public void EndCombo()
    {
        isAttack = false;
        isCombo = false;
    }
}

 

2. Tile Map 제작

🥕 예행 작업
1. Scene 생성 (Town)
2. Assets 다운로드
 

Free - Pixel Art Asset Pack - Topdown Tileset - 16x16 Sprites by Anokolisa

500 Sprites, 3 Heroes, 8 enemies, 50 Weapons

anokolisa.itch.io

 

Hana Caraka - Topdown Tileset by Otterisk

Complete 16x16 seasonal tileset for your top down games

otterisk.itch.io

 

Summer Village Tileset and Asset Pack 32x32 Pixels by schwarnhild

A village-themed 32x32 top-down asset pack with tileset , assets and animated villagers

schwarnhild.itch.io

 

2D Pixel Art Platformer | Biome - American Forest | 2D 주변환경 | Unity Asset Store

Elevate your workflow with the 2D Pixel Art Platformer | Biome - American Forest asset from Superposition Principle. Find this & more 주변환경 on the Unity Asset Store.

assetstore.unity.com

 

Background for mobile games, portrait, 2D, art. | 2D 주변환경 | Unity Asset Store

Elevate your workflow with the Background for mobile games, portrait, 2D, art. asset from Armor and Rum. Find this & more 주변환경 on the Unity Asset Store.

assetstore.unity.com

 

1. 타일 팔레트 생성

1.1. 타일 팔렛트 창 열기

 

1.2. 타일 팔렛트 생성

 

2. 이미지 전처리(?) 작업

픽셀 아트 기반의 타일맵을 정확하고 선명하게 표현하기 위해서 이미지 전처리 작업을 해주어야 한다.

 

2.1. 이미지 설정

  • 타일맵에서 사용하는 이미지는 보통 2D 스프라이트이기 때문에 Sprite (2D and UI) 선택
  • 하나의 이미지에 여러 타일이 그려져 있는 형태이므로 Multiple 선택
  • 타일셋 이미지의 타일 크기가 16x16 이므로 16 입력
  • 픽셀 아트 특성상 선명한 픽셀 경계가 중요하므로 Point (no filter) 선택

2.2. 이미지 자르기

 

타일 크기가 16x16 이므로 Cell Size도 16 x 16으로 설정해 준 후 잘라줌

 

2.3. 타일 팔레트에 적용

 

미술 할 때처럼 팔레트에 여러 색깔을 두고 필요할 때마다 붓을 가져다 대는 것처럼

타일 팔레트도 동일하게 여러 타일맵을 두고 필요할 때마다 클릭해서 배치해 준다.

 

3. 타일맵 생성

3.1. 타일맵 생성 및 종류

 

여러 타일맵 종류가 있는데 우리는 2D 플랫포머 게임을 구현할 것이기 때문에 Rectangular 타일맵을 선택해 주었다.

 

타일맵 종류 설명 사용 예시
Rectangular Tilemap 기본 정사각형(또는 직사각형) 타일로 구성된 타일맵 일반적인 2D 플랫포머, 탑다운 RPG 등
Hexagonal Point Top Tilemap 육각형 타일이 뾰족한 꼭짓점이 위/아래 방향으로 배치됨 전략 게임, 정육각 전투 격자
Hexagonal Flat Top Tilemap 육각형 타일이 평평한 면이 위/아래 방향으로 배치됨 전략 게임이나 퍼즐형 게임 등
Isometric Tilemap 등각 투영(Isometric) 방식의 타일맵. 사선 방향의 평면 타일 사용 쿼터뷰 RPG, 도시 건설 게임
Isometric Z As Y Tilemap Isometric과 유사하나 Z축을 Y축처럼 사용. 높낮이 표현에 적합 3D 느낌이 강조된 쿼터뷰 게임, 층이나 건물 구조 표현 등

 

 

3.2. 반복 작업

 

이런식으로 다른 타일맵들도 타일 팔레트에 배치해 주고, 하이어라키에 타일맵을 생성해 준다.

 

4. 타일맵 배치

이 부분은 취향에 맞게 타일맵을 배치해 주면 된다

 

 

4.1. 단축키 

  • W : 타일맵 제작 취소
  • Shift + 클릭 : 지우기
  • Ctrl + 클릭 : 타일 변경 → 배치된 타일 복사함
  • S : 영역 설정
  • M : 설정한 영역을 일괄 이동
  • U : 경계선 내부를 타일로 채움
  • [ , ] : 좌 / 우로 회전
  • Shift + [ : Flip X
  • Shift + ] : Flip Y

 

4.2. 타일 팔레트 내 타일맵 이동

 

 

5. 콜라이더 추가

 

흙 길에서만 걸을 수 있도록 콜라이더를 설정해 주었는데

나중에 혹시 집 내부 이동을 지붕이 비치게 만들어서 이동되게 하는 시스템이면 콜라이더를 조금 수정해주어야 한다.

씬 전환으로 넘어가도 집 내부 들어가는 건 보여야 하니까.. 수정해 주면 좋을 것 같긴 하답

 

 


 

 

오늘 갑작스럽게 과제? 라고 해야할지 아무튼 기존에 만들었던 프로젝트를 제출해야하는 임무가 생겼다

강사님께서 피드백을 해주신다고 하셔서 새로 만들어볼까도 싶고.. 흠

근데 당장 자격증 시험도 다가오고 있어서 시간 여유가 있으면 새로 만들고 없으면 그냥 약간의 기능만 추가하고 제출하는 식으로 해야겠다 ㅠㅠ

 

 

 

풉키키키 옛날에 이런 비슷한 거 만들었었는데

이땐 맨땅에 헤딩이라 진짜 무진장 힘들었던 기억이 난다..

오늘 타일맵은 노가다로 만든 거라 좀 불편했는데 나중에 Rule인가 암튼 그 타일맵 만드는 거 배우면 더 수월하게 맵 제작을 할 수 있을 거라 생각한다.

이땐 카메라 세팅 어캐하는지 전혀 몰라서 검은 화면 보이는데 너무 킹받네

ㅋㅋㅋ아 암튼 오늘 수업도 재밌었돠!!!