HTML5로의 이행 - 2부

작성자: 데이비드 갈레아노, 던컨 텝스(David Galeano, Duncan Tebbs)
작성일: 2013년 2월 21일

이 글은 3 부작 중 제 2 부로 전직 크리테리온의 노련한 콘솔 개발자들이 HTML5 개발로의 이동 과정과 관련하여 타이머와 그래픽 등 본질적인 요소들에 대해 설명하고 있다. 1 부는 참조 링크(here1)에서 아볼 수 있다.

이 시리즈의 1 부2에서는 고급 게임 개발을 위한 HTML5 를 소개하고 개발자들이 다른 플랫폼에서 HTML5 로 이동할 때 예상되는 현상들에 대해 살펴보았다. 2 부에서는 HTML5 에서 제공하는 기능성(functionality)과 관련 기술의 특화된 영역에 대해 게임 중심으로 자세히 알아보겠다.

서브시스템(subsystem)에 복수의(multiple) 인터페이스들이 존재하는 경우도 있는데, 이때 각각의 인터페이스는 고유의 특성과 가용성을 갖는다. 여기서는 이 인터페이스들이 어떻게 다양한 브라우저와 플랫폼에 걸쳐 고성능 게임 경험을 제공하는 데 사용되는지 알아보고, 터뷸렌즈의 게임 플랫폼에 적용했을 때 도입했던 전략들을 소개하고자 한다.

최신 브라우저 API 들을 사용하여 최적화된 코드로 구현가능한 퀄리티의 사례는 Turbulenz Engine at WebGL Camp Europe3 발표에서도 소개된 적이 있다.

핵심 기능성

자바스크립트 런타임 환경에는 항상 디폴트 글로벌 객체들이 있으며, 이들은 대부분 브라우저들에서 표준화되어 있다. 이중에서도 특히 게임과 관련이 있는 부분을 설명하고자 한다. w3schools 4 는 자바스크립트의 문서화를 상세히 볼 수 있는 실용적인 웹사이트로 인기가 높다. 그러나 Mozilla Developer Network5가 더 정확하고 우수 사례도 많다고 생각한다.

윈도우(Window)

윈도우 객체는 코드가 수행 중인 페이지를 나타낸다. 또한 브라우저들은 이 객체를 자바스크립트 컨텍스트를 위한 글로벌 객체로 정의하기도 하는데, 함수를 직접 호출할 때는 내장된다.

이 글로벌 윈도우 객체는 모든 다른 글로벌 객체를 포함하는데, 이는 다음 두 변수 선언이 동일하게 작동한다는 의미다.

    var r = window.Math.sqrt(4); // explicit
    var r = Math.sqrt(4); // implicit

글로벌 객체의 존재를 점검할 때는 윈도우를 명시적으로 사용할 것을 권장한다.

윈도우 객체는 다음과 같은 기본적인 기능성을 어플리케이션에 제공한다.

    ● 타이머(Timers)와 인터벌(intervals).
        o setTimeout/clearTimeout 과 setInterval/clearInterval.
        o 인터벌은 브라우저에서 콜백(callback) 함수를 발동하도록 요청하여
            (예를 들어 16 밀리세컨드마다) 메인 게임 루프를 실행하는 데 사용될 수 있음.

        o 이 둘 다 밀리세컨드 단위 인테거(integar) 값으로 작동하기 때문에 API 만 사용하면 초당 60 프레임을 안정적으로 얻을 수

           없음.
    ● 경보(Alerts)와 승인(confirmations).
        o alert, confirm, prompt 가 있음.
        o 유저에게 정보를 주거나 승인을 하기 위해 모달 팝업(modal popup)을 띄움.
        o 중요한 공지사항이 필요할 때 외에는 자주 사용하는 것을 추천하지 않음.
    ● 스크린 정보
        o screen 객체를 통해 일어남.
        o 데스크톱과 그 치수, 컬러컬러 깊이에 대한 최소 정보.
    ● 브라우저 정보
        o navigator 객체 사용.
        o 브라우저 자체에 대한 정보, 브라우저 이름, 버전 넘버, 서버와 대화할 때 사용하는 OS 플랫폼과 유저 에이전트 스트링

           관련 정보.
    ● 이벤트
        o addEventListener 와 removeEventListener.
        o 특히 키보드와 마우스 이벤트에 대한 것들.
    ● HTML DOM
        o document 객체가 페이지 내 모든 HTML 요소에 접근을 제공함.
        o 게임이 HTML 요소로 렌더링되며, 위치, 크기와 행위를 통제하는 것은 일부 HTML 요소의 오퍼레이션을 요구할 수도 있음.

            jQuery 6와 같은 라이브러리가 다양한 이슈 및 브라우저들 간의 비호환성 문제를 해결하며, 요소들을 수동으로 조종하는

            대신 자주 이 기능을 사용하기도 함.
    ● 로깅(Logging)
        o 콘솔(console) 객체가 로깅 기능을 제공함. 초기에는 이 기능이 제공되지 않았으나 요즘은 브라우저에 디폴트로 존재

           하거나 비슷한 기능이 확대되었음.(예를 들어 Firebug7 에는 Firefox 를 위한 실행이 포함되어 있음).

수학(Math)

수학(Math) 객체는 스칼러(scalar) 수학적 오퍼레이션과 상수(constants)를 제공한다. Math 는 브라우저 내에서 가장 믿을 만한 요소로 여겨진다..

모든 수학적 오퍼레이션과 상수는 배정밀도(double precision)의 부동소수점값(floating point values)을 제공한다. 더하기 같은 기본 수학 오퍼레이션도 논증이 32 비트 부호 붙임 정수형(signed integer)에 들어맞지 않을 경우에는 배정밀도로 계산된다.

자바스크립트에서는 SIMD 를 지원하지 않으며, 어떤 종류의 벡터나 매트릭스 라이브러리도 제공하지 않는다. 터뷸렌즈는 자체적으로 벡터 수학 라이브러리를 보유하고 있는데, 이 라이브러리는 각 오퍼레이션의 목적지 파라미터(destination parameter)를 지원하고 타입 어레이(typed array)를 사용하여 객체 배치와 메모리 사용을 줄일 수 있도록 최적화되어 있다. 당사의 SDK samples 8 에 포함된 physics demos9를 보면 최적화된 자바스크립트에서 구현할 수 있는 성능이 어느 정도 수준인지 알 수 있을 것이다.

※ 자세한 내용은 첨부(PDF)화일을 참고하시기 바랍니다.