반응형

이번에는 앞서 그린 지형 위에 캐틱터를 그려서 움직이게 하려고 합니다.

따라해보시면서 궁금하신 부분들은 댓글 남겨주세요.

 

1. 유니티 프로젝트에 2D 캐릭터 임포트하기

지난 시간에 지형 에셋을 무료로 다운 받았던 것처럼 캐릭터도 무료로 다운 받아주세요.

2D 캐릭터는 유니티 에셋 스토어 > 2D > 캐릭터 카테고리에서 찾으시면 됩니다.

 

유니티 에셋 스토어 > 2D > 캐릭터 카테고리의 화면

 

저는 아래의 에셋을 선택했어요.

캐릭터가 심플하면서 상당히 쓸만해 보였거든요.

 

 

Prototype Hero Demo - Pixel Art | 2D 캐릭터 | Unity Asset Store

Elevate your workflow with the Prototype Hero Demo - Pixel Art asset from Sven Thole. Find this & more 캐릭터 on the Unity Asset Store.

assetstore.unity.com

 

지난 번처럼 내 에셋에 추가하기를 눌러주세요.

 

2D 캐릭터 무료 에셋

 

내 에셋으로 이동하시면 지난 번에 사용했던 지형 에셋과 함께 추가된 에셋을 확인하실 수 있어요.

 

내 에셋 화면

 

이제 캐릭터 에셋을 유니티에서 열어보면 아래처럼 Pakage Manager 윈도우가 노출되요.

 

Pakage Manager 윈도우

 

전과 동일하게 에셋을 다운로드/임포트 해주세요.

 

에셋 다운로드/임포트

 

2. 데모 파일 살펴보기

유니티에서 에셋을 임포트하시면 아래처럼 Assets 폴더 하위에 Prototype Hero Demo 폴더가 추가됩니다.

그리고 Prototype Hero Demo 폴더 하위에는 5개의 폴더가 있어요.

 

Prototype Hero Demo  폴더

 

그 중에서 Demo 폴더의 Demo Scene을 열어서 살펴볼게요.

 

Prototype Hero Demo > Demo 폴더의 Demo 파일

 

Demo Scene을 실행하면 Hierarchy 윈도우를 통해 어떤 요소들이 있는지 확인할 수 있어요.

 

Hierarchy 윈도우와 Scene 윈도우

 

Demo를 실행하면 아래의 영상처럼 플레이 됩니다.

캐릭터를 좌/우로 이동하면서 점프도 가능하고,

이동 중에 상황에 따라서 효과음과 함께 캐릭터의 모션이 변경되고 있네요.

 

데모 플레이 영상

 

이전 시간에 지형 팔레트를 설정한 것처럼, 캐릭터도 이미지 파일을 모션 별로 분리해서 사용하고 있어요. 

 

모션 별로 분리된 캐릭터 파일

 

3. 지형 위에 캐릭터 그리기

이제 지형 위에 캐릭터를 그리기 위해서 Sprites 폴더의 캐릭터 이미지를 사용하려고 합니다.

사실, Demo 폴더에 미리 준비된 에셋이 있지만 공부할겸 캐릭터 이미지를 사용해서 캐릭터를 그려볼게요.

PrototypeHero.png 파일을 끌어서 Hierarchy 윈도우로 이동시켜 주세요.

 

캐릭터 이미지 사용 (예시)

 

그러면 아래처럼 PrototypeHero_0라는 명칭의 오브젝트가 생성됩니다.

저는 데모처럼 PrototypeHero로 이름을 변경해 주었네요.

 

캐릭터 오브젝트의 이름 변경

 

Hierarchy 윈도우에 캐릭터를 추가하시면, Scene 윈도우에도 아래처럼 캐릭터가 보입니다.

그리고 Scene을 플레이하면 지형 위에 캐릭터가 공중부양 하듯이 그려지는 모습을 볼 수 있습니다.

 

캐릭터가 추가된 모습 (예시)

 

그리고 캐릭터가 데모처럼 지형 위에서 이동하려면 물리적인 요소가 필요합니다.

캐릭터에 Rigidbody 2D를 추가해주세요.

추가 방법은 캐릭터의 Inspector 윈도우에서 Add Component 버튼을 클릭하셔서 진행하시면 됩니다.

 

Rigidbody 2D 추가 (예시)

 

Rigidbody 2D를 추가하면 어떻게 되는지 아래 영상으로 확인할 수 있어요.

캐릭터가 그냥 아래로 떨어져 버리네요.

 

캐릭터에 Rigidbody 2D를 적용한 영상

 

데모에서는 지형과 캐릭터에 콜라이더 2D가 적용되었기 때문에 캐릭터가 위에서 떨어져도 캐릭터의 위치가 지형 아래로 벗어나지 않습니다.

참고로, 콜라이더 2D는 물리적인 충돌을 감지하기 위한 요소입니다.

콜라이더 2D의 모양에 따라서 충돌 체크하는 방식이 다르며, 명칭도 달라집니다.

 

1) 원형 충돌 영역을 위한 써클 콜라이더 2D.
2) 정사각형 및 직사각형 충돌 영역을 위한 박스 콜라이더 2D.
3) 자유형 충돌 영역을 위한 폴리곤 콜라이더 2D.
4) 자유형 충돌 영역 및 완전히 닫히지 않은 영역(원형 컨벡스 코너 등)을 위한 에지 콜라이더 2D.
5) 원형 또는 마름모 모양의 충돌 영역을 위한 캡슐 콜라이더 2D.
6) 박스 콜라이더 2D 및 폴리곤 콜라이더 2D를 병합하기 위한 복합 콜라이더 2D.

 

 

데모 지형과 캐릭터에 적용된 콜라이더 2D

 

우리도 데모처럼 콜라이더 2D를 지형과 캐릭터에 적용하면 문제가 해결됩니다.

우선, Hierarchy 윈도우에서 타일맵을 선택해주세요.

그리고 Inspector 윈도우에서 아래처럼 Tilemap Collider 2D를 추가해 주세요.

 

Tilemap Collider 2D 추가 방법

 

그러면 다음과 같이 타일맵에 콜라이더 2D가 적용된 것을 확인하실 수 있어요.

 

Tilemap Collider 2D 적용

 

이제는 캐릭터에도 콜라이더 2D를 적용해 주세요.

캐릭터의 Inspector 윈도우에서 Box Collider 2D를 추가해 주시면 됩니다.

 

Box Collider 2D 위치

 

캐릭터에 Box Collider 2D를 추가하시면 아래처럼 형광색의 네모난 박스가 추가됩니다.

이제 이 박스의 위치와 크기를 캐릭터에 맞게 조절해 주세요.

 

캐릭터에 Box Collider 2D 적용

 

캐릭터의 Box Collider 2D 정보를 다음과 같이 변경하시면 캐릭터에 딱 맞는 크기로 변경됩니다.

  x y
Offset -0.03125 0.71875
Size 0.5625 1.3125

 

캐릭터의 Box Collider 2D 정보 수정

 

그러면 이제 캐릭터가 지형 밖으로 벗어나지 않는다는 것을 아래의 영상으로 확인하실 수 있습니다.

 

지형과 캐릭터에 Collider 2D를 적용한 영상

 

4. 캐릭터 움직이기

이제는 캐릭터를 움직이기 위해서 C# 스크립트가 필요합니다.

다음과 같이 Scenes 폴더에 스크립트를 추가해 주세요.

 

C# 스크립트 추가 방법

 

스크립트의 이름은 HeroInput으로 설정해 줬어요.

 

생성된 HeroInput 스크립트

 

이제 생성한 스크립트를 Inspector 윈도우에서 Open 버튼을 클릭하여 수정해야 됩니다.

 

HeroInput 스크립트를 오픈

 

유니티를 설치하실 때 함께 설치된 Microsoft Visual Studio 2019를 선택해 주세요.

저도 튜토리얼을 작성하면서 유니티를 처음 설치했기 때문에 아래처럼 설정 화면이 노출되고 있습니다.

 

C# 스크립트 수정을 위해서 Microsoft Visual Studio 2019 실행

 

스크립트의 Update() 안에 아래의 소스 코드를 복사해서 붙여 넣어 주세요.

소스는 반드시 "{"와 "}" 사이에 추가하셔야 돼요.

 

1
2
3
4
5
float horizontal = Input.GetAxis("Horizontal");
Debug.Log(horizontal);
Vector2 position = transform.position;
position.x = position.x + 0.1f * horizontal;
transform.position = position;
cs

 

소스를 추가하신 후에 저장을 해주시면 유니티의 스크립트 내용이 아래처럼 갱신됩니다.

소스 코드는 키 입력이 발생되면 캐릭터의 위치를 변경해 주는 간단한 내용입니다.

 

수정된 HeroInput 스크립트

 

참고로, Horizontal 입력에 대해서 궁금하시면 아래처럼 Edit > Project Settings > Input Manager에서 정보를 확인하실 수 있어요.

 

Horizontal 정보

 

이제 이 스크립트를 캐릭터에 적용해 주세요.

스크립트를 캐릭터로 드래그해주시면 됩니다.

 

캐릭터에 Hero Input 스크립트 반영

 

Scene을 플레이 했을 때, Console 윈도우를 보시면 위 소스코드의 Debug.Log(horizontal); 덕분에 입력된 키 값이 출력되는 것을 확인할 수 있습니다.

 

Debug.Log(horizontal)

 

캐릭터에 적용된 스크립트 때문에 Scene을 플레이하시면 키보드의 키와 키를 이용해서 캐릭터를 움직일 수 있습니다.

영상을 보시면 아쉬운 부분이 있지만, 개선할 부분들은 다음에 포스팅하는 글에서 확인하세요.

 

캐릭터 이동 영상

이 글을 보시고 수정이 필요한 부분이나 개선점 등이 있으시다면 댓글로 남겨주세요.

반응형

+ Recent posts