게임을 만들어보자.

아마 대부분의 컴쟁이들이 컴퓨터에 빠져드는 관문인 게임. 그리고 프로그래밍을 하면서 누구나 한번쯤 생각해보는 게임 만들기. 이번에 Google에서 U-dacity 스터디를 지원하는 프로그램이 있어, 이 기회를 빌미 삼아 게임 한번 만들어 보기로!

U-dacity를 진행해보면서 게임 개발의 자세한 내용들이 다뤄지지는 않아서 결국 다시 공부를 해야하지만 심플한 게임 개발을 위해 고려해야할 것들에 대해서는 어느 정도 파악하게 되었다.

• 게임 객체
• 레이어
• 사운드
• 물리엔진
• 사용자 입력

이것 이외에도 HTML5 게임내 자원 관리등의 것도 있었지만 특별히 따로 알게된 것이 아니니 ㅋ. 많은 사람들이 처음 시도해보는 테트리스 말고 2048 게임을 만들어 보기로 했다.

2048 만들기

일단 그럼 Repository를 만들고 시작해보자.

기존의 2048은 Javascript/CSS를 이용한 것이지만 나는 이번 U-dacity 스터디에서 배운것 활용을 위해서 WebGL을 사용할 예정이다.

만들고 있는 게임은 여기에서 해볼 수 있다.

2048을 만들기 위해 고려해야할 기능들을 생각해보자

• 각 블럭들은 숫자/배경색상/위치값 을 가진다.
• 게임판의 Grid 값은 동적으로 되도록. default는 4.
• 효과음을 넣어보자.
• 배경음악을 넣어보자.
• 블럭이 합쳐질 때 효과를 넣어보자.
• 2048이 되었을 때 게임이 종료되도록 한다.
• 랭킹을 위해 점수를 넣자.
• 그리고 2048 완성 Time attack이 가능하도록 시간을 측정하자.

각 기능들의 구현을 위해 어떤 것들을 해야할지 생각해보자.

• javascript로 구현될 것인데 Object에 대한 이해를 하도록하자. 난 Java맨이기 때문에 간단히 bean을 생각하는데 javascript에도 bean과 같은 효과를 내려면 어떻게해야할지 알아보자.
• WebGL을 사용해서 Canvas에 모든 것을 그릴거다. 이것도 공부해보자.
• 음원처리를 위한 방법은 결국 Web Audio에 대한 이해를 해야한다. 공부해보자.
• 위 상황만 봐도 HTML5 지원이 좋은 Chrome 기준으로 개발해보자. 어디다 돈주고 팔 것은 아니니 일단 Chrome기준으로 만들어보고 시간이되면 다른 브라우저들과의 호환성에 대해서도 공부해보자.

이제 코드를 짜면서 하나씩 문제들을 뽀개보자.

효과음을 넣어보자.

기본적으로는 WebAudio를 사용할 것이기 때문에 특별히 문제는 없지만 언제나 그렇듯 HTML5 tag 미지원하는 브라우저들이 문제다. 그래도 이것은 아직 토이프로젝트이기 때문에 해당 문제는 무시하고 그냥 WebAudio를 사용한다. 사용방법은 HTML5Rocks에서 사용된 예제를 참고했다. 문제는 여기서 참고하는 BufferLoader란 것이 기본 제공되는 WebAudio API가 아니기 때문에 따로 만들어줘야한다. 역시 구글링을 해보니 만들어져있는 것이 있다. 업어오자.

또 한가지 문제가 있다. 음원!! 내가 음감이 뛰어나서 음악툴로 만들면 좋겠지만 그렇지 못하니 무료 음원 사이트들을 다니며 배경음과 효과음을 찾아보자.

• 효과음 : http://www.freesfx.co.uk
• 배경음 : https://www.freesound.org/search/?q=game&page=2#sound

위 사이트를 통해서 음원을 확보했다.

배경음을 넣어보자.

효과음과 달리 배경음(BGM aka 브금)은 액션이 발생할 때 재생되는 것이 아니라 게임이 시작될때 부터 재생되면 무한 반복되어야한다. 여기서 루프플레이 처리를 해줘야한다. 어려운 것은 아니고 간단하게 audioContext로 부터 만들어진 bufferSource의 loop attribute를 true로 설정하면 끝난다 ㅋ