[2D 하향식 게임 프로젝트] 5탄. 캐릭터 애니메이션과 오브젝트 상호작용

4탄이 궁금하다면,

[개발일지/무작정 게임 만들기] - [2D 하양식 게임 프로젝트] 4탄. 캐릭터를 따라다니는 카메라, 카메라 영역 설정

[2D 하양식 게임 프로젝트] 4탄. 캐릭터를 따라다니는 카메라, 카메라 영역 설정

 

고민끝에 캐릭터 에셋을 스토어에서 질렀다!

캐릭터만 33달러... 과연 이게임이 세상 밖으로 출시가 되었을때,

이만한 값어치를 할 수 있을까? ㅋㅋㅋㅋㅋ

​

캐릭터에 대해서 정말 많은 고민을 했는데

자꾸 생각나는 애가 있어서 결국 그놈으로 가지고 왔다

​

​

일단 임포트 고고~

내 프로젝트에 다운로드해주고 임포트 해주자

​

그래서 오늘은 지금까지 했던 기획의 네번째, 오브젝트와 상호작용하기를 구현해 볼껀데

그전에 플레이어가 되줄 캐릭터에게 생명을 불어넣어줄것이다

​

​

귀염 뽀짝한 고양이

내 게임의 플레이어 캐릭터가 되어줄 고양이다

이 캐릭터 말고도 진짜 귀염 뽀짝한 고양이들이 많이 있다

여러방면으로 활용할 수 있을것 같아서 33달러를 주고 샀는데

후회없는 선택이 되길.

​

​

​

이 캐릭터는 친절하게도 idle 이라는 폴더에 스프라이트가 나눠져 있었다

고로 나는 이 스프라이트들을 쭉 땡겨서 하나의 애니메이션 idle을 만들어주기만 하면 된다

​

​

​

그전에 헷갈리지 않도록

하이어라키창에 있는

이녀석과

프리팹으로 만든 이녀석을 삭제해주자

​

​

...

​

생각이 짧았다

스프라이트를 교체해주었으면 될 것을 괜히 삭제했다

​

뭐 삭제해버렸으니 새로 놓아준 고양이에게

이전과 똑같은 컴포넌트를 붙여준다

​

그리고 테스트를 해보면,

고양이가 잘 움직인다

그러나 고양이가 한쪽만 바라보고 얼어있으니 움직임이 어색하다

이런 게임도 본적이 없을것이다

​

그래서 이 고양이에게 애니메이션을 붙여서 생기를 불어넣을거다

위에서 언급했듯이 친절하게도 애니메이션을 만들 스프라이트들이 제공되어 있기 때문에

쉽게 만들 수 있다

​

​

​

Idle 애니메이션으로 만들어줄 스프라이트들을 한번에 잡고

하이어라키창에 있는 고양이 캐릭터에게 드래그앤드롭해준다

​

그러면 이렇게 애니메이션을 저장하는 창이 뜨는데,

나는 에셋 폴더에서 Animations 라는 폴더를 만들어서 파일을 따로 저장해주었다

​

파일 이름은 나중에 추가해줄 NPC들과 헷갈리지 않도록 하기 위해

Player__Idle 이라는 이름으로 저장했다

​

​

​

프로젝트 창을 보면

방금 만든 애니메이션 폴더 안에 Player 라는 이름의 애니메이터와

Player__Idle 이라는 이름의 클립이 생성된 것을 확인할 수 있다

​

애니메이터는 애니메이션을 실행해주는 일종의 라디오라고 이해하면 쉽고,

애니메이션 클립은 라이오 테이프라고 생각하면 이해가 쉽다^^

​

라디오에 테이프가 있어야 음악이 재생되듯이

애니메이션도 애니메이터에 클립이 있어야 애니메이션이 재생된다

​

여기 까지 해주고 하이어라키 창에 Player 오브젝트를 클릭한 뒤

인스펙터 창을 보면

애니메이터 컴포넌트가 자동으로 추가되어 있고

컨트롤러가 Player로 되어 있는것을 확인할 수 있다

​

실행해보면,

Idle 애니메이션이 잘 실행되는것을 볼 수 있다

​

속도가 너무 빠른것 같다면,

클립을 열어서 속도를 셋팅해줄 수 있지만 나는 괜찮은것 같아서 지금은 넘어가겠다

​

가만히 있을때 숨쉬는 동작을 넣어줬으니

이번에는 움직일때 이동하는 애니메이션을 추가해주자

​

방법은 동일하다

나는 이번에도 친절하게

Walk 라는 스프라이트가 있어서 이전에 했던 방법과 동일하게

만들어 주었다

​

그렇게 되면 하나의 애니메이터와 두개의 클립이 생기게 된다

​

Player 애니메이터를 더블클릭해서 열면,

Player의 애니메이터가 열리는데

기본 상태가 Idle로 되어 있다

​

이제 나는 움직임을 입력받았을때, Idle에서 Walk로 애니메이션이 전환되도록 해줄것이다

그러기 위해서는

흰색 화살표(트랜지션)을 Idle에서 Walk로,

Walk에서 Idle로 전환되게 만들어준다

​

파라미터에서 bool 형 변수를 하나 만들어주고

이름은 isWalk로 지어줬다

​

Idle에서 Wakl로 가는 트랜지션을 클릭하고 인스펙터 창에서

컨디션을 방금 만든 isWalking 변수로 설정해 true로 해준다

즉, 걷고 있을때 Walk 애니메이션을 실행하라는 말이다

​

셋팅에서 Has Exit Time의 체크박스를 비활성화 했다

이유는 딜레이 없이 즉각적으로 반응을 해주기 위해서

그리고 혹시몰라 Transition Duration을 0으로 해주었다

​

반대로 Walk에서 Idle로 가는 트랜지션을 선택에

isWalking 값을 false로 해주고 Has Exit Time 체크박스를 비활성화 해주자

​

​

여기 까지 한것을 테스트 해보면,

짤 화질이 이상한데 어떻게 해결하는건지 모르겠음 ㅜㅜ

기본 상태일땐 Idle이 실행되고,

불값을 체크하면 true가 되어 Walk 애니메이션이 실행 됬다가

체크를 해제하면 false가 되어 다시 Idle로 돌아가는것을 확인할 수 있다

​

​

이제 이것을 스크립트로 작성하여

키보드 입력을 받았을때 애니메이션이 전환되게 해주자

그리고 현재 내 캐릭터는 한 방향만 바라보고 있는데

키보드 좌우 입력을 받으면 플립을 시켜주도록 하자

 

[개발일지/코드 기록] - 유니티2D 캐릭터 좌우 플립과 이동 애니메이션

유니티2D 캐릭터 좌우 플립과 이동 애니메이션

 

테스트

키입력이 없을때는 Idle 상태,

키보드 입력이 받아지면 Walk 상태로 애니메이션이 잘 전환되는 것이 확인된다

그리고 좌우 반전도 잘 되는것을 볼 수 있다

​

한가지 아쉬운게 위 아래로 이동할ㄸㅐ도 이미지가 없어서

저렇게 밖에 안된다는 점 ㅠㅠ

​

​

이제 오늘의 목적이었던

오브젝트와 상호작용을 구현해보자!

​

오브젝트와 상호작용 했을때 필요한 애니메이션을 만들어준다

방법은 위와 똑같으니 생략--

​

​

bool형 파라미터를 하나 더 만들어준다

이름은 isMining으로 했다

그런 다음 Any State에서 방금 추가해준 Mining 클립으로 연결해주고

트랜지션의 컨디션은 isMining true로 설정 해줬다

그리고 Mining 클립에서 Idle로 가는 트랜지션은 반대로 false로 설정해줬다

​

이제 상호작용이 어떨때 발생하고,

어떤 작용을 하게 될건지를 만들어보자

​

​

상호작용이 가능한 오브젝트들에게 새로운 콜라이더를 각각 추가해줄거다

이 맵에서 상호작용이 가능한 오브젝트들은

Rock, Tree(6), Mushroom(2) 다

​

세개의 오브젝트들에게 각각 써클 콜라이더 2d를 추가해주었다

그리고

인스펙터 창에서 써클 콜라이더 2d 컴포넌트를 찾아 is Trigger 항목을 체크해주자

이는 캐릭터의 콜라이더와 오브젝트의 써클콜라이더가 충돌이 되지 않도록 막아주는 기능이다

따라서 콜라이더끼리 부딪혀도 통과가 되게 해준다

​

이걸 만든 이유는 트리거 영역을 표현하기 위해^^

오브젝트의 트리거 영역에 캐릭터가 들어가게 되면 이를 감지해 상호작용이 가능하게끔 해줄것이다

​

​

플레이어 액션 스크립트에 마우스 좌측 버튼을 클릭했을때,

채집하는 애니메이션이 실행되도록 코드를 추가했다

​

그리고 상호작용이 가능한 오브젝트에게 추가해줄 스크립트를 하나 생성하고

1) 트리거 영역에 들어왔을때 2) 마우스 좌클릭을 하면 애니메이션 실행 3) 트리거 영역에서 나가면

4) 애니메이션이 실행되지 않도록

코드를 작성했다^^

​

이제 실행해 보면,

트리거 영역에 들어오면 애니메이션이 실행하고

그렇지 않으면 아무리 마우스를 클릭해도 실행되지 않는다

확인을 위해 콘솔창에 로그를 출력해보았다

​

동작이 잘 되는것을 확인했으니

만들어둔 상호작용 스크립트를 오브젝트들에게 추가해주자

​

​

​

테스트 해보면 이렇다

이팩트가 없어서 뭔가 심심하다

​

고양이에게 무기를 하나 쥐어주고,

이동속도도 너무 빠른것 같으니 적절하게 조정해주자

​

트리거 영역은 콜라이더의 크기를 조절해서 적절하게 느낌을 부여해주면 된다

​

​

여러가지 무기 스프라이트가 있는데

나는 그중에서 도끼로 정했다

​

​

첫번째 스프라이트를 플레이어의 하위 오브젝트로 끌어다 놓고

이름을 변경해주고 트랜스폼을 리셋해줘 위치를 맞췄다

​

​

이제 캐릭터의 애니메이션에 따라 도끼의 움직임도 적절하게 바뀔수 있도록

도끼 애니메이션을 적용시켜주자

​

방법은 캐릭터와 다르지 않으므로 생략한다

플레이어의 하위 오브젝트로 넣은 상태에서 애니메이션을 만드니

플레이어 애니메이터의 클립으로 생성이 되서

단일 오브젝트로 빼두어 애니메이션을 만들었다

​

그럼 이렇게 플레이어 애니메이터와 도끼 애니메이터

그리고 그들의 클립들을 확인 할 수 있다

​

보기 좋게 폴더를 분류하여 정리했다

​

​

내용이 너무 길어져서

일지를 나눠서 써야겠다!! 오늘은 너무 오래 잡고 있었더니

집중력이 저하되서 머리가 돌아가지 않게되버렸따

​

​

그런 고로 나머지는 6탄에서 마무리 해야겠다