[게임메이커] 처음 만나는 GMS2 // 6. 슈팅게임 제작 1

 앞서 우리는 GML의 사용법을 알아보았습니다. 그렇다면 이제 본격적으로 게임을 하나 만들어보며 여태까지 사용해보았던 코드가 어떻게 활용되는것인지 직접 눈으로 보는 시간을 갖도록 하겠습니다. 오늘은 뜻 깊은 날이 될 것입니다. 최초로 직접 게임을 만들기 시작하는 시간이 될테니까요! 






 우리가 만들어볼 게임은 탑뷰 슈팅게임입니다. 키보드로 캐릭터를 움직이고, 마우스로 총을 조준하여 플레이어에게 다가오는 적을 쏘는 형태의 게임이 될 것입니다. 제가 탑뷰 슈팅게임을 선택한 이유는 이 게임을 만들면서 키보드 입력과 마우스 입력을 모두 사용하게 되며, 간단한 UI 및 메뉴까지 만들게 되기 때문입니다. 그러므로 이런 게임을 하나 만들어본다면 이 때 알게 된 사용방법을 다른 게임을 만들 때에도 써먹을 수 있을 것입니다. 



본격적인 시작에 앞서 게임에 사용할 리소스를 업로드하겠습니다. 아래의 링크를 통해 다운받으실 수 있습니다.

spriteset.zip

https://drive.google.com/file/d/0B4vrCYBpU3XPUXFOaEZ0S2FleG8/view?usp=sharing

메인 메뉴에서 New를 클릭​하여 새 프로젝트를 생성해봅니다.

앞서 우리는 GML을 사용해보았으므로 지금 만들 게임도 역시 GameMaker Language를 사용하여 만들 것입니다. GameMaker Language를 클릭해줍니다.

새 프로젝트가 생성되었습니다.

그럼 본격적으로 게임을 만들기 전에, 게임 설정을 수정할 것입니다.

부드러운 게임화면을 연출하기 위해 게임 프레임을 60프레임으로 만들겠습니다.

게임 설정 화면이 나오면, Game Frames Per Second에 60을 입력합니다.

이제 새로운 스프라이트를 만들어보겠습니다. 왼쪽 메뉴의 Sprite에 마우스 오른쪽 버튼 클릭 후 Create를 클릭하면 새로 생성하실 수 있습니다. 

아름답고 예쁜 스프라이트 에디터가 나옵니다. 물론 직접 그림을 그리실 수도 있지만, 제가 미리 준비한 스프라이트가 있으니 이걸 써보도록 하겠습니다. Import를 클릭하시면 스프라이트를 불러오실 수 있습니다. 미리 준비된 Player 스프라이트 12장을 모두 불러오기 합니다.

- 업로드한 spriteset.zip을 다운받으셔서 압축을 해제하세요! 

12장의 스프라이트가 모두 불러와진 것을 확인하실 수 있습니다. 

스프라이트의 중심점을 가운데로 설정할 것입니다. 
이 스프라이트의 사이즈는 48 * 48 이므로, Origin의 값은 24 x 24로 입력합니다. 

그리고 스프라이트에 이름을 정해줄 것입니다. 작업할 때 리소스를 쉽게 구분하기 위해 좋은 이름을 짓는 것이 좋습니다. 수많은 좋은 이름이 있겠지만, 이번에는 스프라이트의 이름을 sprPlayer로 입력하도록 합니다.

다음으로 오브젝트(Object)를 만들어보겠습니다. 이미 우리는 우리가 조종할 캐릭터의 이미지를 스프라이트 메뉴에서 불러왔지만, 그것만으로는 게임을 만들어낼 수 없습니다. 오브젝트는 여러 상황에 따라 특정한 작업을 수행하는 명령어를 담는 하나의 객체입니다. 스프라이트가 옷의 역할이라면, 오브젝트는 몸통이라고 보면 이해가 편할 것입니다. 왼쪽 메뉴의 Object를 마우스 오른쪽 버튼으로 클릭한 후 Create를 클릭해줍니다. 

오브젝트 설정창이 등장하였습니다. 우리는 방금 만든 스프라이트를 오브젝트에 적용해볼 것입니다. 스프라이트 선택 영역을 클릭한 후 Select Sprite 창이 나오면 sprPlayer 스프라이트를 클릭합니다. 우리는 이 오브젝트의 이름을 objPlayer로 정할 것입니다. 

다음에는 Event(이벤트를) 추가할 것입니다. 이벤트란 초기값, 특정 버튼을 눌렀을 때, 다른 오브젝트와 부딪혔을 때 등의 특정한 상황을 의미합니다. 오브젝트 창의 하단 버튼 중 오른쪽에 깃발 아이콘이 붙어있는 버튼을 클릭하면 이렇게 이벤트 창이 나옵니다. 이제 Add Event 버튼을 클릭한 후 Step->Step을 순서대로 클릭합니다. 

그러면 이렇게 코드 에디터 화면이 등장합니다.  위 2줄에는 주석이 적혀져있습니다.

주석은 코드에 설명을 넣는 것으로, 게임의 실행에는 큰 영향을 미치지 않습니다. 

코드의 내용이 많아지면 읽기에 복잡해질 수 있으므로 나중을 위해 주석을 이용해 코드에 대한 설명을 적어놓는 것이 좋습니다.

맨 첫째줄은 /// 슬래시가 3개인데, 이 곳에 코드에 대한 설명을 입력하면 이벤트 목록에 해당 코드에 대한 설명이 출력됩니다. 

우리는 캐릭터를 움직이게 만들 것입니다. 코드 에디터에 이런 코드를 입력해보도록 하겠습니다.

 keyboard_check(키) 함수는 키보드의 어떤 키를 누르고 있는지 확인하는 함수입니다. 괄호 안에 들어가있는 키가 입력되어있을 경우 1 (true)을, 그렇지 않은 경우에는 0 (false)을 리턴합니다. vk_left, vk_right, vk_up, vk_down은 각각 키보드의 왼쪽, 오른쪽, 위쪽, 아래쪽 화살표를 의미하는 상수입니다.

if (keyboard_check(vk_left)) x -= 2;

조건이 만족되면 x의 값이 2 감소합니다.

여기서 x는 좌표를 나타냅니다. x는 수평 좌표이고, y는 수직 좌표입니다. 수학시간에 함수를 배우셨다면, 바로 그것이 맞습니다. 단, 수학시간에 배운 함수의 y와 게임메이커의 y의 값은 반대입니다. y가 양수이면 아래 방향이고, y가 음수이면 위 방향이 되지요. 

대략 이런 식입니다. 

나머지 코드는 앞서 설명하였던 왼쪽 키 입력과 같은 원리라는 것을 똑똑하신 여러분들은 눈치채셨겠지요!

모든 코드의 작성이 끝났다면, x 를 클릭하여 코드 창을 닫습니다. 여기서 게임메이커 스튜디오 2의 기능. 마우스 스크롤 버튼을 누르고 있는 상태에서 마우스를 움직이면 여태까지 편집하기 위해 열어놓은 리소스들을 둘러보실 수 있습니다. 지금 당장은 스프라이트 1개와 오브젝트 1개를 만든 것에 불과하지만...

나중에는 이렇게 많은 양의 창들을 보실 수 있을 것입니다. 이렇게 한 눈에 열려진 창들을 보기 위해서는 화면 상단의 돋보기 버튼을 클릭하시면 됩니다. 

다음에는 아까 만든 오브젝트를 룸에 직접 삽입해보도록 하겠습니다. 

왼쪽 메뉴의 room 항목의 room0을 클릭합니다. 

현재 룸은 아무것도 보이지 않는 검은 화면입니다. 아시다시피 오브젝트를 배치하는 방법은 간단합니다. 룸의 빈 공간 중 원하는 위치에 왼쪽 메뉴의 오브젝트를 끌어다 놓으시면 됩니다. 

이제 F5를 눌러 게임을 실행해보도록 합시다. 상하좌우로 캐릭터를 움직여보도록 합니다. 그런데 뭔가 몹시 부자연스럽습니다. 캐릭터가 계속 똑같은 곳만 바라보며 멈추지 않고 다리를 휘젓고 있습니다. 

아무래도 수정이 많이 필요해보입니다. 일단 캐릭터는 마우스를 바라보도록 하고, 키보드로 움직이지 않을 때에는 애니메이션이 멈추도록 만들것입니다. 또한 화살표키가 아닌 W,A,S,D를 이용한 조종을 하도록 만들고, 현재 캐릭터가 화면 밖으로 나가는 문제를 고쳐보도록 하겠습니다. 

if (keyboard_check(ord("A")) && x > 0)      x -= 2; if (keyboard_check(ord("D")) && x < room_width)      x += 2; if (keyboard_check(ord("W")) && y > 0)      y -= 2; if (keyboard_check(ord("S")) && y < room_height)      y += 2; image_angle = point_direction(x,y,mouse_x,mouse_y); if(!keyboard_check(ord("A")) && !keyboard_check(ord("S")) &&      !keyboard_check(ord("D")) && !keyboard_check(ord("W")))      image_speed = 0; else     image_speed = 1;

objPlayer 오브젝트의 step 이벤트의 코드를 위와 같은 형태로 수정해보도록 하겠습니다. 

if (keyboard_check(ord("A")) && x > 0 ) x -= 2;

우선 키보드의 입력을 받는 부분이 바뀌어있음을 확인하실 수 있습니다. 

keyboard_check의 괄호 안에 들어있는 ord("키")는 키보드의 글자 키를 뜻합니다. 위의 코드는 키보드 A를 누르고 있을 경우라는 조건이 되겠지요. 그리고 &&이라는 것이 들어가있는 것을 확인할 수 있겠는데, 이것은 and 를 의미합니다. 이런 식으로 if에 조건 여러개를 넣으실 수가 있습니다. 즉 이 조건문은 키보드 A키가 눌려있으면서 x 좌표 값이 0보다 큰 경우를 의미합니다. 왜 이런 조건을 붙였을까요. 플레이어의 좌표가 x보다 작은 경우라면 룸 상에서는 왼쪽 구석 바깥으로 나간 상태가 되기 때문입니다! 이렇게 캐릭터가 밖으로 나가는 것을 방지할 수 있습니다.

if (keyboard_check(ord("D")) && x < room_width ) x -= 2;

그리고 그 아래의 조건문을 보겠습니다. 이 조건문에서 우리는 또 다른 새로운 것을 발견하였습니다. room_width가 뭐죠? 이것은 룸의 수평크기를 나타내는 내장변수입니다. 그러니까 if(x < room_width) 는 룸의 수평 크기 이내에 플레이어가 있을 경우 라는 조건이 되겠지요. 만약 플레이어의 x 좌표값이 room_width보다 크다면 플레이어는 룸의 오른쪽 바깥으로 나간 상태가 됩니다. 그렇다면 혹시 룸의 수직 크기는 어떻게 나타낼까요? 그건 바로 'room_height' 입니다! 

이렇게, W,A,S,D로 이동을 하게 수정하고, 룸의 바깥으로 나가지 못하게하는 기능까지도 넣었습니다.

여기까지는 위에서 적었던 코드에 약간의 변화를 거친 것 뿐입니다. 

그런데그 아래로는 뭔가 새로운 게 보이는군요? 이번엔 이 코드를 한번 살펴보겠습니다.

image_angle = point_direction(x,y,mouse_x,mouse_y);

image_angle은 스프라이트의 각도를 의미합니다. 아까 언급하였듯이 우리는 캐릭터가 마우스 커서를 바라보도록 만들고자 합니다. 문제는 마우스의 위치를 어떻게 알아내냐는 것이지요. 정확하게는 현재 이 오브젝트의 위치에서 현재 마우스의 위치를 바라볼때의 각도를 알아내야 하는 것입니다. 이것은 point_direction을 통해 알 수 있습니다.

point_direction(x1,y1,x2,y2)는 x1,y1의 위치에서 x2,y2를 바라볼 때의 각도를 출력해주는 함수입니다. 

우리는 x1,y1,x2,y2에 각각 x,y,mouse_x,mouse_y를 입력하였는데, 여기서 mouse_x와 mouse_y는 마우스의 x위치, 마우스의 y위치를 나타냅니다. 

이렇게 우리는 캐릭터의 이미지가 마우스를 향한 쪽의 각도로 회전하도록 만들었습니다. 

마지막으로 이 것은 무엇인지 확인해보도록 하죠.

if (!keyboard_check(ord("A")) && !keyboard_check(ord("S")) && !keyboard_check(ord("D")) && !keyboard_check(ord("W"))) image_speed=0; else image_speed=1;

 조건문 안에 들어있는 저건 분명히 키보드의 입력을 체크하는 함수인 것은 틀림없는데, 어째서 함수 앞에 느낌표가 붙어있는 걸까요? 이것은 NOT, 바로 '아닐경우'를 나타냅니다. 그러니까 이 조건문은 A도 S도 D도 W도 누르지 않은 상태인 경우가 되겠지요. 이 조건이 충족되면 image_speed가 0이 됩니다. image_speed는 이름에서부터 짐작하실 수 있듯이 움직이는 이미지의 속도를 의미하는 내장 변수입니다. 그러면 다음 줄의 else는 대체 뭘까요? 이것은 if 조건문에 만족하지 못한 경우를 뜻합니다. 지금 작성된 이 조건문 대로라면 else는 바로 A,S,D,W 중 하나의 키를 누르고 있는 경우가 됩니다. 이 경우에는 image_speed가 1이 됩니다. 

 

모든 것이 완료되었다면, 다시 한번 테스트해보도록 합니다. 정상적으로 코드가 입력되었다면 캐릭터는 상하좌우로 움직일 때만 다리를 움직이며, 마우스가 있는 쪽으로 캐릭터의 이미지는 자동으로 회전하게 됩니다.