2015.09.17 14:14

IT분야 프로그래머를 목표로 하는 청소년이 있습니다.

그 목표를 향해 한발 한발 다가서는 모습을 블로거 활동으로 공유합니다.



안녕하세요.

게임프로그래머를 꿈꾸는 학생, 닉네임 Kimba라고 합니다!

미래에 게임프로그래머라는 직업을 가지기 위해 티백(닉네임) 선생님께 매주 토요일마다 교육을 받고 있습니다.

얼마 전까지는 '피니엔진'이라는 프로그램을 공부했는데 이번 주부터는 '유니티'를 시작하기로 했습니다.

그렇게 시작된 프로젝트가 '인생런닝게임'입니다!

프로그래민 언어를 제대로 공부한 적이 없어서 매우 힘든 여정이 될 것으로 예상되지만 열심히 하겠습니다.



제일 먼저 유니티를 설치하는 것부터 시작했는데요.

유니티라는 사이트에 들어가 설치를 손쉽게 했습니다!

'인생러닝게임'은 2D 횡스트롤 게임으로 제작할 예정인데 최근 유니티가 2d를 적극적으로 지원해줘서 참 편합니다!


유니티를 공부하려면 이제 스크립트(내부적으로 게임이 실행되게 해주는 코드)를 어떤 언어로 구성할지 선택해야 하는데 전 다들 보편적으로 사용하시는 C#을 선택했습니다.

C#에 대한 지식이 매우 얕고 또한 유니티라는 엔진조차 이번에 처음 다뤄보기 때문에 매우 힘들었지만 인터냇을 검색하면서 참고가 됬던 블로그나 사이트를 먼저 소개하려고 합니다.


유니티 2D게임만들기

순순디자인(마녀이야기 게임 만들기)

스프라이트, 애니메이션, 애니메이터 예제

를 참고하면서 진행했습니다.


전 아직 초보라는 타이틀 조차 못 땐 학생이라 복습하는 겸 일기장 식으로 작성하겠습니다.

먼저, (1)번은 씬그래프라고 부르는 목록입니다. 

이곳에는 현재 씬에 존재하는 모든 오브젝트들이 나타납니다.

(2)번은 작업공간으로 오브젝트를 배치할 수 있는 곳입니다.

(3)번은 일종의 탐색기입니다. 윈도우에 있는 내 문서를 생각하시면 이해가 쉽습니다.

마지막으로 (4)번은 세부속성으로, 선택된 오브젝트의 속성이 표시됩니다. 

지금은 아무것도 선택하지 않아 아무것도 나타나지 않았습니다.


다음으로 넘어가기 전에 (2)번에 대해 보충을 하자면 원래는 이미지처럼 화면이 2개로 갈린 것이 아닌, 씬(Seen), 작업상 보이는 화면만 보이는데 작업할 때 편하기 위해 게임화면을 끌어와 옆에다가 붙였습니다.


그 다음 이미지를 스프라이트로 작성해야 하는데,

스프라이트란 무엇인가? 그건 저도 잘 모르겠습니다....

하하하하하...

제 예상으론 이미지 파일을 유니티 엔진 안에서 사용할 수 있게 하는 변환작업 같은데...

스프라이트를 만드는 방법은 


먼저 1번, 탐색기(편의상 탐색기라고 부르겠습니다.)에 이미지 파일을 넣은 뒤,

좌측에 있는 2번 속성창(편의상 속성창이라고 부르겠습니다.)을 잘 보시면 네모 박스가 있습니다.

그 위에 텍스쳐 타입을 클릭하면, 여러가지 뜨는데

2D 스프라이트를 제작하기 위해 위와 같이 설정을 해준 뒤 빨간 네모 박스 안에 있는 버튼을 클릭해주시면,



위와 같은 창이 뜹니다.

여기서 확실한 것은 아니지만,

제가 사용하는 소스는 한 이미지 안에 여러 캐릭터가 들어가 있는 것이 아니라

자동으로 스프라이트로 변환되는 것 같습니다.

만약 한 이미지 안에 여러 캐릭터가 있다면,

위에 주소 중 유니티 2D게임 만들기에 자세하게 나와 있으니 참고하시면 큰 도움이 될 것 같습니다!

스프라이트로 변환하는 작업이 자동으로 되었으니 창을 끄시고 유니티 프로그램으로 돌아와 사전 준비를 끝맞췄습니다.


그런 다음 고양이가 움직이는 애니메이션을 만들었는데요.



먼저 오브젝트를 만들기 위해 대표적으로 사용할 캐릭터 이미지를 (1)번(편의상 오브젝트 목록 혹은 목록이라고 부르겠습니다.)

목록에 끌어다 놔주시면 해당 이름으로 오브젝트가 생성됩니다.

생성한 뒤, 클릭하시고 탐색기 상당에 보시면 애니메이션이 있습니다.



저런 모습이 보이실텐데, 전 이미 애니메이션을 만들었기 때문에 좀 다를 것 같네요.

아마 왼쪽이 아닌 오른쪽에 Add Property가 있으실텐데 그 버튼을 눌러서 원하는 프레임에 이미지를 끌어다 놓으시면 애니메이션은 완성입니다!


애니메이션도 완성했으니 캐릭터를 배치해야 하는데 마우스로 손쉽게 배치할 수 있으니 정말 편했습니다.

배경도 비슷하게 배치해놨는데 이제 런닝게임이니 캐릭터가 움직이던가 해야 하는데 전 캐릭터 맡고 배경을 움직이는 방향으로 코딩을 했습니다.



탐색기에서 마우스 오른쪽 클릭하셔서 크리에이티 >C# 스크립트를 클릭하셔서 생성된 스크립트를 더블 클릭하면,



이제 코딩이나 프로그래밍 언어에 대해 잘 모르시는 분이라면 이쯤되서 멘붕이 오실텐데, 바로 제가 그랬습니다!

C#이라고는 책 조금 읽은게 전부라서 코드해석능력이 조금 있고 아직 작성은 못하기 때문에 이곳 저곳 돌아다니며 이미지를 움직이는 코드를 찾았습니다.

위에 있는 순순블로그 주소로 들어가시면 발견하실 수 있는데 저 블로그에서 사용하는 코드는 제가 만들려는 기능과 조금 다르기 때문에 아주 조~금 손봤습니다.




코드를 해석하기에 앞서 일단은 1, 2번째 줄과 public ~ 라던가, void ~ 어쩌구 라던가는 무시하시길 바랍니다.

객체지향언어에서 사용되는 클래스와 메서드라는 개념으로 사용되는 것인데 이것에 관해서는 향후 자세히 다루겠습니다.

그럼 코드를 해석하자면, 

6번째 줄에 저희가 스피드라는 변수를 사용하기 위해 _SPEED라는 이름으로 변수를 선언하였고,

그 다음 15번째 줄에는 유니티에서 지원하는 함수를 사용하여 _SPEED와 Time.delta Time,0,0을 곱한 속도로 배경을 움직이라고 했습니다.

여기서 Time.deltaTime은 이전 프레임에서 다음 프레임까지 오는 시간을 뜻합니다.

여기서 말하는 프레임은 애니메이션에서 사용되는 각각의 이미지입니다.

그리고 이 게임은 마지막 배경에 도착하면 끝나야 하기 때문에 그에 따른 좌표값을 구해서.

16번째 줄 = if 만약 X의 값이 -4400보다 작거나 같으면 Time.deltaTime값을 0으로 바꿔라라고 선언했습니다.

Time.deltaTime은 이전 프레임에서 다음 프레임이 나타나는 시간을 뜻한다고 했는데 

그 시간이 0이 된다는 건 다음 에니메이션으로 넘어가지 않는다라고 하는 것과 마찬가지라고 해석하고 있습니다.

이게 아니라면 아마 이전 프레임에서 다음 프레임으로 가는 시간이 0이므로 저희의 눈으로는 볼 수 없을 정도의 아주 빠른 속도로 애니메이션이 계속 반복되고 있는 것일수도 있겠네요~

이렇게 코드를 작성하시고 컨트롤+S를 누르시면 스크립트가 저장됩니다. 아! 저장은 많이하면 할수록 좋습니다~

유니티 프로젝트 또한 컨트롤+S로 저장할 수 있습니다.

그렇게 저장한 뒤 창을 닫고 다시 메인화면으로 돌아가 목록에서 캐릭터 오브젝트를 누르시면 옆에 속성창에 세부사항이 나타날텐데 그곳에 스크립터를 끌어다 놓으면 자동으로 적용됩니다.



속성창에 보면 적용된 것을 확인하실 수 있습니다.

이제 여기서 Speed라고 선언했던 변수의 값을 조절해서 캐릭터가 움직이는 값을 바로 수정할 수 있습니다. 속도를 수정하기 위해 매번 스크립트를 실행하는 번거로움이 없어서 굉장히 편합니다!


마지막으로 맨 위쪽에 보면 > 이렇게 생긴 버튼이 있는데, 아마 눈치채셨을 것 같습니다.

플레이 버튼입니다. 누르시면 게임을 모의 실행해 볼 수 있습니다.


이렇게 선생님이 내주신 1차과제인 캐릭터를 걷게하기를 끝맞췄습니다! 짝짝짝!!

다른분들이  이 글을 도움을 받으셨으면 좋겠지만, 글을 작성하는 제가 실력이 너무 부족해 설명이 부실해 도움이 될 수 있을진 모르겠습니다...


그럼 다음 주에 다시 오겠습니다~

안녕히~


글쓴이 : Kimba

 



















Posted by 달그락달그락 달그락지기