검색

Super Mario Bros. (Master Copy)

전체화면 게임 링크 (소리 있음, 키보드 & 마우스)


컨트롤


A / D : 좌우 이동

U / I : Select / Start

J / K : 대시 / 점프

Space : 치트 코드 (파워업)


개요


  • 게임명 : Super Mario Bros. (Master Copy)

  • 게임 장르 : 2D 플랫포머 어드벤쳐 게임

  • 과목명 / 교수 : GAM100 / David Ly

  • 언어 / 프레임워크 / 개발도구 : Javascript / p5.js / Visual Studio Code

  • 소스 컨트롤 솔루션 / 클라이언트 : Bitbucket / Sourcetree

  • 팀 규모 / 개발 기간 : 3인 / 4주


이번에 소개할 프로젝트는 제가 대학교에 다니면서 개발한 첫 팀 게임 프로젝트입니다.


1학년 2학기의 게임 프로젝트 과목인 GAM100의 첫 팀 프로젝트의 주제로써 마스터 카피라는 주제가 나왔는데, 이는 말 그대로 하나의 게임을 픽셀 단위로 완벽하게 베끼는 것을 말합니다.


한달이라는 기간 내에 게임의 첫 레벨에 대한 영문 역기획서를 작성, 필요한 모든 스프라이트 및 오디오 에셋들을 확보, 그리고 물리엔진을 포함한 필요한 모든 코드를 전부 직접 작성하는 (렌더링 엔진 제외) 과정을 총 세 명의 팀원이 역할을 분담하여 진행하게 되었습니다.


역할 분담


Player Behavior 데모 (치트 코드 사용)

제 역할은 기본적으로는 마리오의 움직임에 관한 모든 것을 담당하여 픽셀, 그리고 프레임 단위로 마리오의 움직임이 원본과 똑같아 보이도록 플레이어블 캐릭터의 코드 구조 자체를 고증하는 것이였고, 그 외의 각종 헬퍼 함수, 메인 카메라, 플레이어 인풋, 그리고 씬 스위치 메커니즘 (메인 메뉴, 게임오버, 오버월드 토관 등) 등을 메인으로 코드를 작성하였습니다.


또, 역기획서의 게임 플로우 파트를 집중 담당하여 전부 직접 작성, 그리고 역기획서 문서 전체를 돌면서 다른 팀원들이 작성한 파트에 대하여 계속하여 문법, 표현 및 어휘의 쓰임에 대한 전체적인 검수를 진행하였고, 게임 플로우 파트를 제외하면 High Concept, Game Environment, Game Controls, Visual Design, Audio Design, Multiplayer Design, Interface Flow 등의 항목을 직접 작성, 그리고 그 외의 항목은 팀원들과 함께 작성하는 식으로 역기획서 작성을 주도적으로 이끌었습니다.


역기획서를 작성하는 내내 게임에 대한 상세한 고증값들은 계속해서 다른 유능한 팀원 하나가 찾아와서 다큐먼트에 추가해주었고, 저는 고증값 대신 첫 레벨의 각종 요소의 디자인적 의의에 대하여 분석하고 기록하는 쪽으로 역할이 나눠진 덕에 저는 이 고전 명작의 게임 디자인에 대해서 제대로 집중하며 공부할 기회를 얻을 수 있었습니다. 마지막 팀원에게는 저희가 다큐먼트를 작성하는 동안 맵 에디터 / 로더, 그리고 충돌 처리 메카니즘을 계속해서 개발하도록 지시하였고, 이러한 효율적인 역할분담 덕에 게임을 제 시간 내에 완성시킬 수 있었습니다.


협업 방식


팀원 모두가 같은 수업을 듣는 학생들이였던 만큼 서로 자주 붙어있었는데, 그만큼 의사소통의 빈도와 속도가 매우 빨랐습니다. 모르는 것이 있으면 서로에게 직접 곧바로 물어보았고, 병합 충돌이 생겨도 빠른 시간 내로 해결이 가능했습니다.


고정된 TODO 리스트

서로가 같이 볼 수 있는 문서나 엑셀 차트에 대한 링크들, 그리고 중요한 공지사항 등은 디스코드 서버를 만들어 관리하였고, 개발 중에는 여러 사람이 함께 작업한 만큼 병합 충돌과 같은 여러 문제들이 생겼는데, 이러한 문제들을 해결하기 위해 브랜치 생성, 머지, 충돌 해결, 리버트, 스태싱 등의 여러 소스 컨트롤 기능들을 적극적으로 연구해보고 활용해보게 되면서 이들을 공부함과 함께 게임의 소스 파일들을 안전하게 관리할 수 있었습니다.



또, 개인 프로젝트와는 달리 헤더 커멘트에 각자가 작성한 파트와 분량에 대한 정보 또한 추가하게 되었으며, 자주 쓰이는 함수들에는 서로가 알아볼 수 있게 하기 위해 함수 위에 커멘트를 자주 남기도록 서로를 독려하며 개발을 진행하였습니다.


역기획서 (영문)


gam100_bs-dos320_gbdd
.pdf
Download PDF • 1.34MB


소스 코드


소스 코드는 개발자 도구 (f12) 를 활용하면 볼 수 있습니다.



개발 환경


바로 전 학기에 사용하던 에디터인 Sublime Text을 활용하며 다소 불편한 점들을 느껴 대체재를 찾던 중, 마침 팀원이 사용하던 Visual Studio Code가 눈에 들어왔습니다. 활용해 보니 프로그램 자체가 정말로 가벼우면서 깔끔했고, 기본으로 선택적 병합 해결 기능도 들어있던데다가 파이어폭스나 크롬으로 자바스크립트를 곧바로 연결해주는 플러그인까지 있는 것을 확인하고, 프로젝트 시작 이후 얼마 되지 않아 사용하는 에디터를 변경하여 개발을 계속했습니다.



개발과정 내내 Bitbucket과 Sourcetree를 활용하여 소스 파일들을 관리하였고, bitbucket.io의 무료 호스팅 서비스를 활용하여 게임을 인터넷상에 게시하였습니다. 서포트 페이지 링크


프레젠테이션 자료


BS-DOS 320 Master Copy PPT
.pdf
Download PDF • 367KB

슬라이드 제작에 투자 가능한 시간 자체가 매우 짧았기에, 필요한 내용만 추려서 간결하게 슬라이드를 구성하였습니다.


원작의 개발 배경부터 시작하여 각 팀원의 맡은 역할을 소개하였고, 팀원이 게임플레이 데모를 시연하는 중 제가 옆에서 각 요소에 대한 설명을 하였습니다.


데모가 끝나고, 각자가 느낀 점을 말한 뒤 질문을 받았고, 이후 교수님으로부터의 피드백 세션이 진행으로써 발표가 끝났습니다.


코스 사이트에 제출된 아카이브용 문서


gam100_seunggeon.kim_mc_report
.pdf
Download PDF • 72KB

마스터 카피 프로젝트에 투자한 개인적인 노력, 그리고 팀원에 대한 크레딧이 들어간 보고서.


개발 후기


실력에 자신을 가진 사람들이 모여서 제대로 된 환경 아래에서 협업을 하면 어느 정도의 효율이 나오는지에 대해 제대로 느낄 수 있었던 좋은 경험이였습니다. 예전까지는 혼자서 개발하는 게임에 대한 큰 환상이 있었는데, 협업의 소중함을 깨달은 지금은 적어도 서너명을 모아서 함께 팀을 이루어 게임을 개발하는 편이 더 재미있고 효율적이지 않을까라는 생각을 하게 되었습니다.


또, 직접 역기획서를 작성해보고 나서 원본 게임의 기획자인 미야모토 시게루의 인터뷰를 찾아보니 더 많은 것들이 보이는 듯 했습니다. 간단해 보이는 게임이나 레벨, 그리고 플레이어의 자잘한 움직임조차도 사실은 두꺼운 기획서와 많은 사람들의 노력이 있어야 비로소 탄생한다는 당연한 사실을 다시금 깨달을 수 있었던 좋은 경험이 되었다고 생각합니다.