항해 플러스 코육대 1회 총알 피하기가 아니라 추석 음식 피하기! 회고

항해 플러스 코육대 1회 총알 피하기가 아니라 추석 음식 피하기! 회고

추석 연휴 맛있게 명절 음식을 먹으며 휴대폰을 보고 있었는데 구글 디스커버에 "항해 플러스 코육대"에 대한 게시글이 보였다. 내일배움캠프를 수료했기 때문에 항해라는 단어를 보고 '팀스파르타'에서 하는 것이라는 걸 바로 알아챌 수 있었다. 코육대의 취지는 이번 추석 연휴 간 코딩 개발을 통해 개발 근육을 깨우고 특별한 선물까지 받을 수 있다고 한다. 이까지만 보고는 크게 할 마음이 없었지만, 종목들을 보니 게임이었다. 게임을 만들어 본 적은 없어서 갑자기 하고 싶다는 생각이 들었다. 특히나 요즘 계속 사용하고 있는 자바스크립트를 통해서 게임을 만들고 이를 웹에 배포하면 설치하지 않아도 누구나 웹 사이트에 접속하여 게임을 할 수 있어 흥미로운 도전처럼 보였다.

 

종목 선정

종목은 '세뱃돈 계산기', '행맨 게임', '송편 터뜨리기', '테트리스', '총알 피하기', '자유 종목'의 6가지가 있었다. 세뱃돈 계산기를 제외한 4가지는 모두 게임이었다. 처음에는 계산기를 웹사이트로 만들고 계산 결과를 mbti 테스트 같은 것들 처럼 sns로 공유하면 꽤 재밌을 것 같다는 생각을 했다. 하지만 이번 연휴만큼은 재미있게 게임을 만들고 보고싶어서 '총알 피하기'를 선택했다. 어릴 때 닷지 게임이나 똥 피하기 게임을 재밌게 했던 기억이 있다.

 

기획

게임의 Scene 구성은 아래와 같다.

1. 게임 로딩 씬: 게임에 접속하면 나오는 첫 화면
2. 게임 씬: 게임을 실제 플레이 하는 화면
3. 게임 오버 씬: 게임에서 목숨이 0이 되어 종료되면 나오는 화면. 이름을 입력하여 점수를 등록
4. 리더 보드 씬: 게임의 점수 순위표를 보여주는 화면

 

총알 피하기의 예시 이미지를 보면 갤러그나 닷지 게임과 흡사했다. 동그란 원이 날아오고 그걸 계속 피하면서 생존 시간을 늘리는 게임이다. 단 움직이는 방향과, 총알이 날아오는 방향은 4방향이어도 되고 2방향이어도 된다.

추석이니 만큼 추석과 관련된 무언가를 만들고 싶다고 생각했다. 특히나 이런 부분에서 테트리스나 행맨 게임을 만들기 어렵다고 생각했다. 행맨 게임이 한글이었다면, 추석과 관련된 단어로 하면 되었지만, 한글이 된다는 말이 없어 포기했다. 테트리스도 추석을 녹여낼 구석이 보이지 않았다.총알 피하기는 날아오는 투사체를 내가 원하는 물체로 만들 수 있기 때문에 디자인에서 조금 더 자유롭다고 생각했다. 

추석하면 생각나는 것은 단연 추석 음식, 명절 음식일 것이다.  무턱대고 먹다보면 높은 칼로리 때문에 살이 찌고, 탈이 나기도 한다. 명절이 끝나고 나면 다이어트를 찾는 이유도 명절의 폭식의 영향이 있다. 그래서 이번 총알 피하기의 주제를 '추석의 음식 피하기'로 잡았다.

 

 

 

디자인

게임에서 가장 필요한 것 중 하나는 디자인 요소인 에셋이다.

해당 게임에서는 총 3가지의 오브젝트가 필요했다.

첫 번째, 배경이다. 배경은 추석과 어울리도록 밤이면서 달이 떠 있고, 화면을 너무 가리지 않는 배경을 선택했다.

Winter Starry Moon Background Wallpaper Image For Free Download - Pngtree

두 번째, 캐릭터이다. 캐릭터는 추석과 연관된 토끼부터, 일반 게임 캐릭터, 사람형 캐릭터 중 고민했다. 음식을 피하는 게임이기 때문에 사람이 가장 적합하다고 생각했고, 너무 사람 같은 비율보다는 조금 귀여운 여자 캐릭터를 선택했다.

세 번째, 가장 중요한 총알이 될 음식이다. 처음에는 아래의 사진처럼 깔끔한 음식 사진을 찾을 수 있을 줄 알았다. 하지만 그런 생각은 오산이었다. 한글로 치면 당연하게도 유료 이미지만 나올 뿐, 무료 이미지는 거의 없다시피 하고, 영어로 korean food, Chuseok food, Oriental food, Mid-Autumn Festival food 등을 검색해 보았지만, 중국이나 일본의 음식은 꽤 뜨는 반면, 한국 음식 에셋을 찾기 어려웠다. 그리고 무턱대고 가져왔다가 혹시나 다른 나라 음식이면 논란의 여지가 생길 수도 있다고 생각했다. 마지막 방법으로 아이콘을 사용할 때 자주 사용하는 'flaticon'에서 아이콘으로 검색을 해보았는데, 생각보다 너무 좋은 아이콘들을 발견했다. 저작권 표시한다는 전제 하에 사용도 무료였고, 각 이미지마다 정확한 음식 이름까지 한글로 적혀있어 논란이 생길 일도 없었다. 아이콘임에도 최대 512px 사이즈까지 무료로 제공되었다. 게다가 총알에 사용하기 알맞도록 대부분의 이미지가 원형 접시 안에 있었다. 총알 이미지로 사용하기에 제격이었다.

flaticon

 

구현 방법

언어는 이번 프로젝트에서는 계속 사용하던 자바스크립트 언어를 사용했다.

게임엔진은 자바스크립트 기반의 게임 프레임워크로 유명한 Phaser3를 사용했다.

사실 phaser3에 대한 첫 인상은 좋지 못했다. 왜냐하면 웹사이트의 Learn 부분이 친절하지 못하다고 생각했기 때문이다. 

하지만 phaser3의 docs는 달랐다. 파라미터와 반환값 뿐만 아니라 설명과 사용법 예시까지 있어 입문하는데 많은 도움이 되었다. 

html - Phaser 3 API Documentation (beta)

 

또 유튜브에서 한국어로 된 '열혈강사'님의 Phaser3 강의를 찾을 수 있었다. 정말 쉽게 설명을 잘해주시고, 이해가 어려운 부분은 직접 그림까지 그려서 알려주신다. 

열혈강사

 

phaser3는 2018년에 출시하여 5년이나 된 오래된 버전이다. 그 덕분에 영어로 검색하면 자료를 많이 찾을 수 있었다.  그 중 에서도 스택오버플로우보다 phaser의 커뮤니티가 많은 도움이 되었다. 

Phaser

 

 

트러블 슈팅

Input 사용하기

리더보드 기능을 구현하기 위해서는 게임 안에서 사용자로부터 닉네임을 문자열로 입력 받아야 했다. 키 입력을 감지하여 한글자씩 가져오는 방법을 직접 구현하는 것 보다, html input을 사용하여 입력 받는 것이 낫다고 생각했다. 처음에는 phaser3가 사용중인 canvas 요소 밖의 다른 input에서 가져와야 생각했다. 그리고 이건 비효율 적이고, 외부에서 input 요소를 쉽게 제어할 수 있기 때문에 좋아 보이지 않았다. 찾아보니 phaser3에서는 dom 요소를 안으로 가져올 수 있는 add.dom() 메서드를 지원하고 있었다. 그리고 사용해 봤지만, 화면에 보이지 않았다.  element 변수를 콘솔로 확인해보면 dom 요소가 분명히 살아 있었지만, width와 height가 0이었다.

 

...
preload() {
  this.load.html('form',form)
}

create() {
  const element = this.add.dom(width / 2, height / 2).createFromCache('form')
}
...

 

 

 그리고 이 아래의 방식이 잘못되었나 싶어 'createFromCache' 대신 'createFromHTML'를 사용해보기도 하고, load.html가 잘못되었다 싶어 찾아보기도 했지만, 별다른 성과가 없었다. 그리고 마지막에 도달한 곳은 phaser3의 플러그인들을 제공하는 rex 라이브러리였다.

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/inputtext/#import-plugin사용법에 따라 phaser3의 config에 플러그인만 추가했을 뿐인데, 다른 부분을 건들이지 않고도 input이 정상적으로 표시되었다. 공식 예제를 그대로 따라 했을 때도 안되었는데, 플러그인으로 바로 해결되었다는 것이 신기한 경험이었다

...
import FirebasePlugin from 'phaser3-rex-plugins/plugins/firebase-plugin.js'
import InputTextPlugin from 'phaser3-rex-plugins/plugins/inputtext-plugin.js'


const config = {
...
  plugins: {
    global: [
      {
        key: 'rexFirebase',
        plugin: FirebasePlugin,
        start: true,
      },
      {
        key: 'rexInputTextPlugin',
        plugin: InputTextPlugin,
        start: true,
      },
    ],
  },
...
}

 

시연 및 기능 구현 설명

메인 씬

• 게임 제목
• 게임 설명
• 게임 시작 버튼
• 리더 보드 버튼

 

게임 씬

• 처음 생명력은 100으로 시작. 화면 우측 상단에 표시
• 살찜: 음식에 닿으면 음식의 칼로리에 따라 잡채(-15), 송편(-20), 밥(-25), 파전(-30), 불고기(-35)의 생명력 감소
• 다이어트: 플레이어가 움직인 거리/1000에 해당하는 생명력 회복
• 밀리초 단위로 생존 시간을 화면 우측 상단에 표시

• 캐릭터는 3가지 상태(가만히 서 있는 상태, 뛰는 상태, 충돌 상태)에 따라 애니메이션 변경

게임 오버 씬

• 생존 시간을 밀리초 단위로 스코어로 표시 (9000점->9초 생존)
• 사용자로부터 이름을 입력받아 저장을 누르면 스코어를 파이어베이스 서버에 저장

 

리더 보드

• 파이어베이스 서버를 통해 순위표 정보를 1등부터 5등까지 가져와서 표시

 

소감

벌써 10월 3일이 끝나간다. 연휴가 시작하기 전에는 정말 길어보였던 6일이었는데, 벌써 그 끝에 있다는 게 놀랍다. 코육대라는 이번 개발의 동기부여를 통해 이제껏 놀기만 했던 연휴보다 훨씬 알차게 보냈던 것 같다. 게임을 좋아하는 사람이라면 누구나 스스로 게임을 만들어보고 싶은 소망이 있을 것 같다.내일배움캠프에서 웹서비스만 만들다가 게임엔진을 통해 작지만 나만의 게임을 만드는 경험은 신선한 경험이었다. 우리가 흔히 하는 유니티나 언리얼 엔진 게임에 비하면 턱없이 부족한 게임이지만, 너무 뿌듯한 경험이었다. 이번 추석 연휴는 길기도 길고, 아시안 게임까지 겹쳐 있어 정말 놀기 좋은 연휴였지만, 코육대 덕분에 개발의 경험을 놓지 않았다. 코육대가 이번이 제 1회라고 하는데, 어떻게 구글은 이걸 또 딱 알려준 건지 신기한 알고리즘이다. 다음에는 또 어떤 주제로 우리의 개발 근육을 깨워줄지 기대가 된다.

 

🎮Game: https://qaws7791.github.io/avoid-chuseok-food/

⭐Github: https://github.com/qaws7791/avoid-chuseok-food

 

 

 

제1회 코육대에 대한 정보는 아래에서 찾을 수 있습니다.

https://hanghaeplus-coyukdae.oopy.io/

항해 플러스: 제1회 코육대