[Unity2D] 유니티 2D기본과 애니메이션

 

 

유니티 3D기본이 끝나고 이제 본격적으로 2D에 대한 강의가 시작되었습니다.

먼저 유니티2D를 위한 기본 세팅 + 애니메이션 편입니다.

 

제가 뭣도 모르고 2D게임을 개발하려고 도트를 찍고있었거든요

사이즈 문제로 전부 폐기하게 되었습니다..

혹시라도 이 글을 보신다면 강의를 다 듣고 그래픽을 시작하시는 것을 추천드립니다.

 

[유니티 기초 - B13] 2D 프로젝트 준비하기 (+다운로드) : 골드메탈

[유니티 기초 - B14] 2D 아틀라스와 애니메이션 (+다운로드) : 골드메탈

님의 유튜브 영상을 보고 작성한 게시글입니다.

 

 

1. 프로젝트 시작

 

 

2D에는 Light가 필요 없기 때문에 기본으로 생성되는 것이 main Camera 뿐임 

 

Background를 이용해 배경색 변경가능

 

 

 

2. 오브젝트 

 

스프라이트sprite

Hierarchy -> 2Dobject -> sprite 로 새로운 오브젝트를 만들어줍니다

 

Insepctor창에

SpriteRenderer : 스프라이트를 보여주는 컴포넌트

기본적으로 제공되는 스프라이트를 한번 넣어보면

Scene에서는 다음과 같이 보여집니다

 

 

 

카메라(Main Camera)

실제 Game창에서도 한번 봐보면

(Scene옆에 Game 클릭)

 

줌 in/out

size = 5

아까 지정한 배경색과 넣은 sprite를 확인해 볼 수 있습니다

우측에 Camera 컴포넌트의 Size를 줄이면 줌인이 가능합니다

size = 0.5

(object에 camera를 선택하고

R를 누른뒤 네모난 점 4개를 잡고 움직여주시면 카메라 크기조절이 가능합니다.)

 

카메라 이동

object에 camera를 선택하고

W를 누른뒤 네모난 점 4개를 잡고 움직여주시면 카메라 이동이 가능합니다.

 

2D는 x,y축으로만 이동이 가능 (z는 존재하지만 움직여도 변화가 없음)

=>위측에 2D를 눌러주면 3D로 조절이 가능한데 (파란색이 z축)

움직여도 카메라 뷰에는 아무 영향이 없습니다

 

그 이유는 카메라가 정사영(Orthographic) 투시법을 사용해서 입니다

 

카메라를 Perspective로 변경해주면

z축으로 이동했을 때 원근감이 생겨납니다

하지만 2D는 거의 원근감이 없다고 가정하기 때문에 잘 사용하지 않습니다.

 

 

3. Sprite 오브젝트 겹침

 

다음과 같이 두개의 sprite가 있을 때 , 누가 더 앞쪽에 있어야하는지 정하는 법

 

z축 변경

더 앞쪽에 놓고싶은 sprite의 z축을 더 앞쪽으로 설정하면 됨

이렇게 설정하면 scene에서 여러개를 다 볼 수 있어서 좋음(직관적으로 볼 수 있음)

직관적으로 잘보임

 

 

Order in Layer

Sprite Renderer컴포넌트에 조냊하는 Order in Layer에 해당 값이 클수록 앞쪽에 위치

z축이 같아서 Scene에서 한번에 볼 수 있음 하지만 더 간단해서 많이 쓰임 

또한 Sorting Layer로 배경/등장인물 등으로 레이어에 이름을 붙여 정렬도 가능

 

 

 

 

 

 

4. 픽셀아트

 

픽셀아트

강의를 따라하기 위해 올려주신 자료를 다운받아서 사용했습니다.

https://blog.naver.com/gold_metal/221609252536

드래그해서 만들어둔 Sprites폴더에 넣어줍니다

 

자동으로 되어있을 태지만 타입이 Sprite여야 사용 가능합니다

 

오브젝트를 만들고

Sprite Renderer -> Sprite에 불러온 Sprite를 각각 드래그 하여 적용해줍니다.

 

대강 위치를 잡아주었습니다.

 

 

픽셀 아트 세팅 (중요)

그래픽보정 + 크기설정 

2D만드실 때 무턱대고 시작하면 저처럼 그림을 몇개 완성해 두었는데 사이즈가 맞지않아 대참사를 만나실 수 있으니 조심하세요 ㅎㅎ..

 

그런데 도트그림이 조금 번져보이는 느낌이 듭니다 그럴때는 

일단 Sprite에 가서 해당 도트를 클릭하면

이런 창이 뜨는데

Filter Mode -> Billinear을 Point(no filter)로 변경해주시면 깔끔하게 도트가 됩니다.

Compression : None 으로 변경 ( 압축되어 변한 색을 복원해줌 )

작은 그림일수록 중요해지는데 큰그림이면 별로 변경하지 않아도 됩니다

 

전부다 변경해준 모습입니다.

 

 

또한 Pixel Per Unit 을 도트의 크기(16*16)으로 변경해주면 // 도트 크기에 맞추면됩니다

Sprite들이 Grid 한칸에 맞춰들어가므로 좌표를 설정할때 더욱수월해 집니다

 

한 칸에 맞춰져 있으므로(크기도 1,1,1) x,y에 +- 1씩하면 정확히 맞아집니다.

 

두번째 바닥 블록을 0,0,0으로 하여 기준으로 

 

편 ㅡ안 

 

 

 

5. 물리적용

 

캐릭터에 간단하게 물리를 넣어봅시다

 

Box Collider 2D

모든 스프라이트 오브젝트에 Box Collider 2D컴포넌트를 추가합시다

 

 

경계사이즈(BoxCollider 2D -> SIZE)를 변경합시다 

도트를 찍다보면 위와같이 16*16 크기를 다 채우지 못하고 여백이 생기게 되는데

이를 경계로 설정하면 적과 닿지 않아도 대미지를 입거나 하는 판정 좆 망겜이네! 라는 말이 나올 수 있습니다

경계에 맞도록 size를 조절해주세요 물론 이미 딱맞는 사이즈라면 변경하실 필요 없습니다

 

저는 이정도로 조정했는데 딱맞았습니다.

 

 

RigidBody 2D

물리를 적용 시켜야 하므로 (중력을 받아야함)

캐릭터에 rigid body 2D를 추가합시다

 

추가한 후 캐릭터를 위로 들어올린 상태에서 시작을 해보면

 

중력을 받아 아래로 떨어지게됩니다

하지만 이 화면을 보시면 캐릭터와 밑바닥 사이의 아주 미세한 틈이 있는데 Collider size도 제대로 조절됐는데 이런 미세한 틈이 생깁니다

도트가 매우 작은 픽셀일 때 이런 현상이 발생한다고 합니다.

 

이는 Edit -> Progject Setting -> Physics 2D에 가셔서

Default Contact Offset을 0으로 바꿔주시면 0.0001이 최손가보네요 

 

 

틈이 사라진 것을 볼 수 있습니다.

 

 

여기까지가 기본 세팅이었습니다.

 

 

이제 아틀라스와 애니메이션에 대한 강의를 기반으로 작성합니다.

 

아틀라스란? 

텍스쳐를 모아놓은 커다란 텍스쳐입니다.

게임에서는 텍스쳐가 참 많이 필요한데 한 캐릭터만해도 

이동/공격/점프/스킬사용 등등 다양한 모션이 사용되고 한 모션당 여러개의 텍스쳐를 통해 애니메이션이 구현되므로

텍스쳐들을 개별적으로 사용하는 것은 관리면에서 비효율적입니다

그래서 텍스쳐를 모아 하나의 아틀라스로 만든다고 합니다. 

또한 아틀라스를 사용하면 여러개의 텍스쳐가 있는 것 보다 CPU가 적게 사용되므로 거의 필수입니다.(배치사이즈)

 

아래 섬네일의 예시가 아틀라스의 예라고 볼 수 있는데요 , 골드메탈님이 아틀라스를 무료로 올려주셨습니다.

https://blog.naver.com/gold_metal/221613270615

[유니티강좌] 아틀라스에 대해서

 

 

 

이런 아틀라스를 다운받은 경우 이걸 하나하나 잘라서 사용해야합니다 그 방법에 대해 알아보겠습니다.

1. 아틀라스 자르기

 

일단 다운받은 아틀라스를 Sprite에다 가져옵니다

 

 

Inspector에서 Sprite Mode를 single -> Mulitple로 변경해줍니다

single은 그 텍스쳐를 통으로 사용하겠다는 의미로 만약 아틀라스가 아닌 하나하나의 텍스쳐로 이루어졌다면 single을 사용하면 됩니다

 

역시 다른것도

Pixels Per Unit : 16

Filter Mode : Point

Compression : None 으로 변경해주세요

 

이제 본격적으로 잘라봅시다.

 

Sprite Editor을 눌러보면 새로운 창이 뜨게됩니다

위쪽에 보이는 Slice는 어떤방식으로 자를지 결정해주는 모드인데요 

 

Type에는 AutoMatic(자동) / Grid By Cell Size(셀크기에 따라) / Grid By Cell Count (셀 수에 따라)

3가지가 있습니다. 

 

자동으로 해보시고 잘 잘렸다 싶으면 그걸로 해도 되고요

Automatic으로 slice한 후 제대로 확인하고싶으면 Apply옆에있는 박스를 눌러보면 눈에 잘 보이게 알 수 있습니다.

 

일단 우리는 크기를 16*16으로 알고 있으므로 cell size로 잘라보도록 합시다 

Pixel size알고있는 대로 16*16을 입력

그리고 16*16짜리 텍스쳐들이 하나의 아틀라스에 들어갈때 여백이 있는 경우가 많으므로

여백에 따라 Padding을 부여하는데 여기서는 1*1로 주셧다고하니 이를 입력합니다

보통 애니메이션이 들어가면 패딩이 많이 사용되므로 주의하시길 바랍니다

 

 

 

이제 Apply를 누르면 하나하나 이미지를 잘라줍니다

 

이제 엑스를 누르시고 Sprite를 펼쳐보면 잘린모습을 볼 수 있습니다

 

이제 위쪽 강의처럼 하나하나의 텍스쳐라고 생각하고 사용하시면됩니다

 

게임을 위해 오브젝트들을 추가해봅시다 

 

Coin

2Dobject->sprite로 추가한 뒤 드래그해서 동전이미지를 넣습니다 

넣어주어야 할 물리효과를 생각해보면 일단 중력의 영향을 받아서는 안되므로 rigidbody는 사용하지 않을거고

동전을 먹을때 경계가 필요한데 동전은 동그라미니까 circle collider 2D를 사용합니다

 

Radius = 0.25정도가 적절하네요

 

Monster 

rigidbody 2D / Box Collider 2D

 

 

애니메이션

플레이어 이동(걷기)

걷기 애니메이션에 사용되는 이미지 4개를 전부 선택(드래그 or 컨트롤)

 

이를 그냥 그대로 캐릭터 오브젝트에 드래그해서 끌어가면

 

Asset안에다가 새로운 폴더 Animation을 만들어 Walk로 저장해주었습니다.

 

2개가 생겨났습니다. 

Animator(Animation controller) : 애니메이선을 관리하는 컴포넌트  // 오른쪽 마우스 클릭으로 만들 수 있음 

여기서는 Char에 해당하는 것

 

실행해보면 캐릭터가 제자리에서 걷는 모션을 볼 수 있습니다.

 

 

 

Window->Animation->Anmimation 을 누르면 이 창이 뜨는데

캐릭터 오브젝트를 클릭하면

Walk 애니메이션을 볼 수 있습니다. 

보이는 4개의 다이아 몬드는 Key Frame : 애니메이션 값을 가진 프레임 입니다 /하나하나가 sprite들 

시간간격을 조절 할 수 있습니다. 

시간간격을 늘려서 애니메이션을 조절 가능합니다 (간격좁게하면 달리기, 간격 넓게하면 걷기 등)

 

또한 반복을 원하지 않을 때는

 

해당 애니메이션을 누르고 Inspector에서 Loop Time 체크를 해제시켜주시면 됩니다

 

 

 

Animator

이제 여러가지 애니메이션을 추가해봅시다 

캐릭터의 걷기를 추가했으니 이번엔 가만히 서있을때 움직이는 모션을 Idle이라고 이름지어 추가했습니다

그리고 실행해보면, 우리는 가만히 있을때는 Walk가 아닌 Idle모션을 원하는데 

Walk모션을 수행중인 것을 볼 수 있습니다. 

이를 바꾸어봅시다

 

Window -> Animation->Animator 에 들어가면 (애니메이션 조절을 원하는 오브젝트를 클릭)

 

이 창에서 어떤 상황에서 어떤 애니메이션을 보낼지 정할 수 있습니다 

Entry : 맨 처음 시작할 때 어떤 애니메이션을 할지 

지금 우리는 Idle을 엔트리로 바꾸고싶으므로

오른쪽 마우스 Set as Layer default state로 해주시면 기본상태로 변경됩니다. 

 

 

또한 원하는 State를 누르면 Insepctor창에서 speed를 조절할 수 있습니다.

Animation에서 시간간격을 조절하는 방법과 유사한 효과를 낼 수 있습니다. (작아질수록 느려짐)

 

 

저는 왜 인지 시작만하면 자꾸 동전이 없어지네요 

 

 

 

 

<참고영상>

youtu.be/v_Y5FH_tCpc

 

youtu.be/IkvYstCzcoc