HTML5 버전 Cut The Rope 개발 후기

게임 Cut The Rope의 HTML5 버전이 공개됐다. IE를 비롯 Safari, Chrome, Firefox 등 PC 브라우저는 물론, iPhone, iPad, Android Phone, Android Tablet 등 모바일 기기의 브라우저에서도 실행된다. 
이 개발자들.. 멋지게도 귀중한 경험을 후기로 남겼다. 가치 높은 글이라 줄거리를 요약하여 옮겨온다.

게임:  http://www.cuttherope.ie/ 
원본:  http://www.cuttherope.ie/dev/ 

+ 'Cut The Rope' 게임의 Objective-C 코드를 html5 코드로 포팅하기로 결정

+ 쉽지 않은 도전

- 라이브러리를 제외하고 15,000 라인에 이르는 방대한 규모의 프로그램

- 물리엔진, 애니메이션엔진, 드로잉엔진이 타이트하게 결합되어 최적화되어 있는 상태

+ JavaScript에 희망을 검

- 초기의 JavaScript는 스크립트 실행을 위한 느린 언어

- 현재의 JavaScript는 JIT를 이용 native에 근접한 실행속도를 내는 언어

+ JavaScript 프로그래밍을 위해서는 컴파일 언어를 사용할 때와는 다른 mindset이 필요

+ JavaScript는 struct를 미지원

- JavaScript의 Object를 struct 대용으로 사용할 경우 여러가지 어려움을 겪게됨

- JavaScript에서 Object를 함수의 인자로 전달하면 call by reference됨.

- 따라서 callee함수에서 Object 인자를 수정하면 caller에 영향을 줌

- 그리고 JavaScript에서 Object 생성은 무척 비싼 연산

- 그래서 함수 호출시 Object 전체를 파라메터로 넘기는 대신 필요한 field만 넘기는 방법을 선택함

+ JavaScript의 OO(Object Oriented) 개념은 전통적인 OO 언어와 다름

- JavaScript는 prototype에 기반한 OO 개념을 제공하나 이는 Objective-C와 이질적

- 그래서 JavaScript에 class 기반 OO를 가능하게 하는John Ressing (of jQuery)의 공개 라이브러리를 이용하기로 함

+ Objective-C 코드 말고도 OpenGL을 HTML5 Canvas API로 포팅해야 했음

- 이 작업은 순조롭게 진행됐음

- HTML5 Canvas가 하드웨어 가속을 지원하는 브라우저 위에서 놀랄만큼 빠른 rendering 성능을 보였음

- 일부 기능 (예를 들어 anti-alias line 그리기 기능)의 경우, HTML5 Canvas가 OpenGL ES보다 훌륭했음 (성능/기능 측면에서)

+ 최종적으로 브라우저에서 실행되는 15,000라인 규모의 코드를 만들어냄

- 3주가 지난후, 기본적인 물리엔진, 드로잉엔진, 애니메이션을 위한 타이머를 개발함

- 4주가 지난후, 기본적인 마우스 처리가 구현되어 실제 게임을 실행할 수 있게됨

- 물리엔진은 intensive한 연산 덩어리, 하지만 JavaScript가 놀라운 실행성능을 보여줌. 이제 JavaScript가 느린 언어라는 선입견을 버려야함

+ 개발을 위해 사용한 도구

+ 코딩을 위해 Visual Web Developer 2010 (free version 제공됨) 사용

- JavaScript, css 구문에 대한 autocompletion 기능 제공

+ 실행 및 디버깅을 위해 ie9을 비롯한 firefox, chrome, safari 브라우저 사용

- 동일한 HTML5 코드로 모든 브라우저를 지원할 수 있음을 확인

+ ie9의 JavaScript profiler를 사용하여 실행성능을 최적화함

- 코드의 병목 지점을 찾아 개선함으로써 10배 이상 실행 성능을 향상시켰음

+ 산출물

+ resource loader

- 본 게임의 리소스 크기(6MB)는 일반 웹사이트의 리소스 크기(200~300KB)에 비해 매우 큼

- 큰 리소스들을 안정적으로 pre-loading하고 loading schedule을 조정할 수 있는 JavaScript 'resource loader' 라이브러리를 개발함, 그리고 이를 free open source로 공개함

(이상)