HTML5 게임 만들기 - 2048
- 2015 October 11 게임을 만들어보자.아마 대부분의 컴쟁이들이 컴퓨터에 빠져드는 관문인 게임. 그리고 프로그래밍을 하면서 누구나 한번쯤 생각해보는 게임 만들기. 이번에 Google에서 U-dacity 스터디를 지원하는 프로그램이 있어, 이 기회를 빌미 삼아 게임 한번 만들어 보기로! U-dacity를 진행해보면서 게임 개발의 자세한 내용들이 다뤄지지는 않아서 결국 다시 공부를 해야하지만 심플한 게임 개발을 위해 고려해야할 것들에 대해서는 어느 정도 파악하게 되었다.
이것 이외에도 HTML5 게임내 자원 관리등의 것도 있었지만 특별히 따로 알게된 것이 아니니 ㅋ. 많은 사람들이 처음 시도해보는 테트리스 말고 2048 게임을 만들어 보기로 했다. 2048 만들기일단 그럼 Repository를 만들고 시작해보자. 기존의 2048은 Javascript/CSS를 이용한 것이지만 나는 이번 U-dacity 스터디에서 배운것 활용을 위해서 만들고 있는 게임은 여기에서 해볼 수 있다. 2048을 만들기 위해 고려해야할 기능들을 생각해보자
각 기능들의 구현을 위해 어떤 것들을 해야할지 생각해보자.
이제 코드를 짜면서 하나씩 문제들을 뽀개보자. 효과음을 넣어보자.기본적으로는 WebAudio를 사용할 것이기 때문에 특별히 문제는 없지만 언제나 그렇듯 HTML5 tag 미지원하는 브라우저들이 문제다. 그래도 이것은 아직 토이프로젝트이기 때문에 해당 문제는 무시하고 그냥 WebAudio를 사용한다. 사용방법은 HTML5Rocks에서 사용된 예제를 참고했다. 문제는 여기서 참고하는 BufferLoader란 것이 기본 제공되는 WebAudio API가 아니기 때문에 따로 만들어줘야한다. 역시 구글링을 해보니 만들어져있는 것이 있다. 업어오자. 또 한가지 문제가 있다. 음원!! 내가 음감이 뛰어나서 음악툴로 만들면 좋겠지만 그렇지 못하니 무료 음원 사이트들을 다니며 배경음과 효과음을 찾아보자.
위 사이트를 통해서 음원을 확보했다. 배경음을 넣어보자.효과음과 달리 배경음(BGM aka 브금)은 액션이 발생할 때 재생되는 것이 아니라 게임이 시작될때 부터 재생되면 무한 반복되어야한다. 여기서 루프플레이 처리를 해줘야한다. 어려운 것은 아니고 간단하게 audioContext로 부터 만들어진 bufferSource의 loop attribute를 |