만들면서 배우는 HTML5 게임 프로그래밍 - PC와 스마트폰을 한 번에 잡는 멀티 플랫폼 게임 프로그래밍

괜찮다고 말하지만 괜찮지 않은 너와 나, 우리가 안고 사는 우울. 그리고 그 감정이 가져온 마음의 병 우울증. 화제의 채널



HTML5와 자바스크립트로 PC와 스마트폰용 멀티 플랫폼 게임을 한 번에 개발하는 방법



나도 윈드러너 같은 달리기 게임을 만들고 싶다!

윈드러너 같은 달리기 게임을 제작하는 방법을 설명한다. HTML5를 모르고, 자바스크립트를 몰라도 차근차근 따라 하기만 하면 누구나 달리기 게임은 제작할 수 있게 했다. HTML5를 설명할 생각도, 자바스크립트를 설명할 생각도 없다. 딱 게임 제작에 필요한 HTML5와 자바스크립트만 설명하고, 나머지는 게임 제작에만 투자했다. 화면을 움직이는 방법, 캐릭터가 움직이는 방법, 캐릭터가 점프하는 방법, 장애물을 처리하는 방법, 코인 아이템을 습득하는 방법 등을 단계별 제작을 통해 설명하고 구현하면서 완성했다.



최초로 공개하는 대전 게임 제작의 원리

서버가 필요한 게임 제작이나 대전 게임을 제작하려면 C++ 언어로 개발한 서버가 필요하다는 생각이 지배적이다. 여기서는 자바스크립트와 Node.js를 사용해 서버를 구현하고, 두 사람이 즐길 수 있는 대전 게임을 직접 구현하면서 게임 서버와 대전 게임 제작의 원리를 설명했다.



멀티 플랫폼 게임 개발을 최초로 보여준다

HTML5는 플랫폼이다. 운영체제에 종속된 API에 기반한 프로그래밍을 벗어나 HTML5 플랫폼에 기반한 개발의 시대로 전환하고 있다. HTML5 플랫폼에서 개발하면 PC, 태블릿, 스마트폰 어디서나 동작할 수 있다. 게임 화면을 디바이스의 크기에 따라 조절하는 방식을 보여주고, 마우스 클릭과 터치 이벤트를 동시에 처리하는 입력 처리 시스템을 어떻게 개발하는지 설명했다.



HTML5와 자바스크립트로 배우는 멀티 플랫폼 게임 프로그래밍

- 게임 프레임워크 제작으로 배우는 기초 원리

어떤 게임을 제작하더라도 게임이라면 갖춰야 할 요소를 프레임워크로 정리했다. 게임 루프 생성, 키보드와 마우스를 위한 입력 처리 시스템, 스마트폰 환경을 위한 터치 입력 시스템, 사운드 시스템, 게임 상태 전환, 그래픽 객체와 애니메이션 관리자, 리소스 프리로더, 프레임 스키퍼, 디버깅 시스템을 단계별로 완성하며 게임의 기초 원리를 완벽하게 학습한다.



- 단계별 완성으로 배우는 게임 프로그래밍

자바스크립트 기초 문법부터 시작해서 총알 피하기 게임 제작, 게임 만들기의 기반이 되는 게임 프레임워크 개발하기, 게임 프레임워크에 기반한 러너 게임을 단계별로 완성해본다. 러너 게임을 완성한 이후에는 Node.js를 이용해 네트워크 대전 게임을 제작한다.




웹 브라우저에서 실행한 모습



- 실시간 네트워크 대전 게임 제작

자바스크립트로 서버 프로그래밍을 할 수 있는 Node.js를 활용해 실시간 대전 게임을 구현해본다. Node.js와 기본 사용법과 Socket.IO를 살펴보고 이를 게임 프레임워크에 통합하는 과정도 설명한다. 이를 토대로 러너 게임을 네트워크 대전 게임으로 발전시켜보게 했다.




Node.js를 이용해 대전 게임으로 만든 모습



- 멀티 플랫폼으로 배포하기

HTML5와 자바스크립트를 지원하는 웹 브라우저만 있으면 어디서나 게임을 실행할 수 있다는 이점을 활용해 다양한 플랫폼으로 게임을 배포할 수 있다. 아이폰, 안드로이드, 윈도폰용 앱으로 변환하는 과정을 설명하고, PC 환경을 위해서는 페이스북과 크롬 웹 스토어에 배포하는 과정을 설명한다.




안드로이드폰에서 실행한 모습




크롬 웹 스토어로 배포해서 웹 앱으로 내려받은 모습