인터넷떠돌이의 과학상자

안녕하세요?

이번 포스팅에서는 드디어 [실전! 유니티5로 소셜 네트워크 게임 만들기]라는 책에서 챕터4까지 드디어 공부하고 실습해 보는데 성공하였고, 그 내용을 포스팅 하고자 합니다.

먼저 시작할 것은 Build Settings라는 항목을 File항목에서 골라서 실행을 시킵니다. 여기서는 빌드라고 해서, 이 유니티5에서 게임을 만들어서, 어떤 플랫폼으로 실행을 시킬 것인가를 정할 수 있다고 합니다.

여기서는 Android라는 플랫폼을 선택합니다. 그런데 모듈이 전혀 설치되어 있지 않기 때문에, 먼저 다운로드를 받아서, 인스톨하는 과정을 거쳐야 합니다. 물론 모듈의 내용을 다 사용하기 위해서는 인스톨만 해서는 안되고, 유니티5를 종료시키고 다시 실행해야 합니다.

일단 위 스크린샷은 먼저 Android 전용 모듈을 다운로드 받고나서 그냥 붉은색 동그라미 친 부분을 눌러서 Switch Platform을 눌러서 안드로이드용 게임이 되도록 만들어 줍니다.

다음으로는 Scene뷰로 되어 있는 것을 Game부로 바꾸고, 다음에는 해상도를 선택하도록 합니다. 제 경우에는 스마트폰에 맞추어서 800 X 400 픽셀로 합니다. 

그렇게 해상도를 맞추자 게임뷰의 화면이 위 스크린샷처럼 바뀌는 것을 볼 수 있었습니다. 이렇게 해상도를 설정하는 작업을 하였고, 이번에는 화면 해상도에 맞도록 배경화면과 캐릭터인 드레곤 라이더의 사이즈를 맞추는 방법을 실습해 보도록 하겠습니다.

Pixels Per Unit이라는 것은 한번에 움직일 때 몇 픽셀을 기준으로 해서 움직일 것이냐를 결정하는 단위입니다. 책에서 언급하기로는 2D 게임은 보통 픽셀 단위로 이동을 한다고 합니다. 여기서는 실습을 위해서 위 스크린샷에서 붉은 동그라미를 친 부분을 100에서 1로 고치도록 합니다.

그 다음에는 유니티5의 Hierarchy란에 메인 카메라를 선택한 다음, 위 스크린샷에 붉은 동그라미가 쳐진 부분-Inspector 윈도우에 있는 Size항목에서 5라고 되어 있는 것을, Game뷰의 높이인 400픽셀의 절반에 해당하는 240을 입력해서 제대로 맞추도록 실습해 봅니다.

책에서 나와있는 대로 240을 입력하였습니다만, 기대와는 달리 엄청나게 축소가 되어서 전혀 게임화면이 보이지 않습니다. 그래서 이러저러한 시도를 한참이나 했습니다.

왜 그런가 알아봤더니, 배경화면 이미지의 Pixels Per Unit이 1로 지정이 되어 있어야 했습니다. 그런데 아직 플레이어 캐릭터가 될 드레곤 라이더는 어디에도 보이지 않습니다.

이 역시 Pixels Per Unit이 100으로 되어 있어서, 1로 고쳐야 했습니다. 즉 정리하자면, 스마트폰용 화면-제가 다른 플랫폼으로 유니티5로 했을 때는 실행하지 않아서 확실하지 않습니다. 아무튼 스마트폰용 플랫폼으로 만드는 게임에서, 스마트폰용 화면 해상도를 지정했을 때! 모든 이미지의 Pixels Per Unit이 1로 되어 있고, Main Camera의 size가 높이 픽셀의 절반일 때! 화면이 전체 해상도에 맞도록 자동으로 조절이 된다.

다음은 플레이어 캐릭터가 될 드레곤라이더(가제)의 애니메이션을 만드는 실습에 들어가 보도록 합니다. 그러기 위해서 Hierarchy 윈도우에서 드레곤 라이더의 게임 오브젝트를 선택하고, Add Component를 눌러서 Miscellaneous 항목에 있는 Animator항목을 선택하도록 합니다. 책에서 언급하기를 이 Animator 컴포넌트는 2D나 3D 모두 만족한다고 합니다.

위 스크린샷은 애니메이터(Animator) 컴포넌트를 추가시켰을 때 Inspector윈도우의 화면입니다. 붉은색 사각형이 쳐진 곳이 바로 Animator가 추가된 화면입니다. 물론 아직 이 Animator만 추가했다고 해서, 애니메이션이 뽕하고 만들어 지지 않습니다. 이제부터가 본격적인 작업의 시작입니다.

Project 윈도우에서 Create메뉴를 누르면, 위 스크린샷에서 보이는 Animator Controller라는 항목이 생기게 됩니다. 이 항목을 누르기 전에 먼저 아래의 스크린샷에 나오는 작업을 먼저 해야 합니다.

Assets항목에 Animations라는 폴더를 새로 만들어서 작업을 하도록 했습니다. 그 이유를 책에서 언급하기를 앞으로 생성해야 할 파일의 양이 많아서라고 합니다.

먼저 Project 윈도우에서 Create 메뉴를 눌러 생성시킨 Animation Controller 를 생성하고 나서, 이름을 Player Controller라고 지정을 하였습니다. 그리고 나서 Project 윈도우에 있는 Player Controller를 드래그해서 Inspector 윈도우의 Animator 컴포넌트 안에 있는 Controller항목에다가 붙어넣습니다. 

다음 단계로는 위 메뉴에서 보이는 것 처럼, Window메뉴에 Animation이라는 메뉴가 있는데, 이제 이 메뉴를 클릭하도록 합니다.

위 스크린샷에 보이는 Animation이라는 메뉴가 뜨는데, 여기서는 붉은 동그라미를 친 Create라는 항목을 눌러서 본격적으로 애니메이션을 만드는 작업에 들어가 보도록 합니다.

먼저 애니메니션을 어떤 이름으로 저장할 것인지 정하는 폴더가 나오는데, 앞으로 많은 애니메이션이 생길 것으로 예상이 되기 때문에 이렇게 미리 Animation이라는 폴더를 만든 것으로 생각이 됩니다. 일단 여기서는 플레이어 캐릭터인 드레곤 라이더가 그냥 가만히 있을 때를 가정한 애니메이션을 만들 것이기 때문에, PlayerIdle이라고 이름을 지정하였습니다.

먼저 Project윈도우에 있는 6개의 그림을 모두 선택한 다음, Animation윈도우에 드래그 & 드롭으로 추가하도록 합니다. 그리고 나서 Animation에 있는 플레이 버튼을 누르자 너무 빨리 재생이 되는 것을 볼 수 있었습니다. 이유는 각각의 그림들이 0.01초 단위로 재생이 되기 때문입니다.

위 스크린샷처럼 붉은색 동그라미를 친 Samples라는 항목이 있는데, 여기서 있는 60이라는 이야기는 바로 60프레임을 뜻합니다. 그리고 60프레임은 1/60이라는 의미로 0.01초 간격이라는 의미가 됩니다. 이 Samples항목을 10으로 바꾸어서 1/10으로 수정을 한다면 0,1초 간격으로 바뀌게 됩니다.

작업 결과물을 녹화해서 올렸습니다. 비록 제가 만든 것은 아니지만, 뭐랄까? 생애 최초로 움직이는 애니메이션을 만들었다는 성취감이 들었습니다. 여기서 위 동영상에 나와있지만, Animation윈도우에서 재생한다고 해서 바로 적용되는 것이 아니라, 유니티5의 플레이 버튼을 눌러서 Game화면에서 움직여야 제대로 적용이 되었다고 볼 수 있습니다.

이것으로 책의 챕터4가 끝났습니다. 다음 포스팅에서는 챕터5를 들어가는데, 여기서도 빠르고 정확하게 독학이 가능했으면 좋겠습니다.

ps:제가 처음으로 동영상을 올려봤는데, 티스토리 자체에 그냥 동영상을 올리는 것을 하다보니 너무 블로그의 로딩이 오래 걸려서 부득이하게 유투브에 올린 다음 링크로 대체했습니다.