HTML5 게임 엔진
OK캐쉬백 게임이벤트 개발 사례
SK플래닛 김준기

HTML5

왜 HTML5 게임인가?
• 게임은 플랫폼 확보가 최우선
• PlayStation / XBOX / Nintendo…
• 웹 브라우저가 깔려있지 않은 기기는 더 이상 없다
• 자연스럽게 모바일로 확산
• One Source Multi Use
• N-screen
• 개발 생산성 향상

HTML5 Features for Game
• Graphics
• Canvas
• WebGL
• SVG
• Audio / Video
• <audio> / AudioContext
• <video>
• ETC
• FullScreen API
• Pointer Lock API

정말?
그냥 과시용이 아니고?

HTML5 게임의 한계
• 애초에 브라우저는 게임 플랫폼이 아니다.
• 입력장치
• 복잡한 연산에 특화되지 않은 환경
• 메모리 관리
• 사용자의 하드웨어의 사양에 무관한 게임?

그래도 합니다.
되는데 까지 해볼랍니다.

웹에 적합한 게임?
• 플레이타임 1~5분 이내
• 원버튼 캐주얼
• 특정 서비스, 제품 홍보를 위한 요소를 통합시킨
Branded 게임

https://github.com/cykod/AlienInvasion

• 코드
• ~450 LOC engine.js (12kb)
• ~300 LOC game.js (8kb)
• 이미지
• sprites.png (63kb)

HTML5 게임엔진의 필요기능
• 그래픽 제어
• Animation 재생
• Resource Loader
• BGM / 효과음 재생
• 사용자 입력 제어

HTML5 게임 엔진
• pㅔ

HTML5 게임 엔진
• pㅔ

cocos2d
• cocos2d for iphone
• http://www.cocos2d-iphone.org/
• cocos2d-x
• http://www.cocos2d-x.org/

cocos2d-html5
• cocos2d-html5 2.2.2 (2014. 1. 7)
• cocos2d-js 3.0a (2014. 3. 15)
• cocos2d-html5
• cocos2d-x javascript binding

cocos2d-html5
• cocos2d-html5 2.2.2 (2014. 1. 7)
• Cocos2d-html5-v2.2.2.min.js (1.2mb, minified)
• 웹 방식의 deploy 방식에는 부적합 (특히 모바일)

필요한 기능만
만들어 써보자!

HTML5 게임엔진의 필요기능
• 그래픽 제어
• Animation 재생
• Resource Loader
• BGM / 효과음 재생
• 사용자 입력 제어

HTML5 게임엔진의 필요기능
• 그래픽 제어 > Canvas 2D 그래픽
• Animation 재생 > Sprite Animation
• Resource Loader > <img> / <audio> / XHR
• BGM / 효과음 재생 > <audio> / AudioContext
• 사용자 입력 제어 > Touch event 처리

Canvas 제어
• Raster 이미지, Immediate mode
• 그려낼 객체의 관리가 핵심
• Canvas Drawing 성능이 웹 게임 성능의 키
• requestAnimationFrame을 이용한 Renderer 작성

Renderer

Renderer

Renderer

Scene / Board / Entity
• Entity
• 화면에 표시될 최소 단위 객체
• 주로 스프라이트 애니메이션이나 static 이미지, 혹은 canvas.context
로 그려냄
• Board
• Entity들을 리스트로 가지는 레이어
• Scene
• 게임내 장면전환을 위해 Board들의 단위로 장면을 구성

cocos2d의 장면/레이어 컨셉

Scene / Board / Entity

Sprite Animation
• Entity와 Sprite Animation의 맵핑
• 지정된 시간에 정의된 속성에 따라 애니메이션 재생

8 프레임
프레임당 24px x 22px

Static Object Pool
• JavaScript의 Garbage Collection중에 브라우저는
다른 어떤 동작도 할 수 없음
• Canvas에 그려낼 객체 중 반복해서 생성/삭제 되는
객체(Entity, Board)를 GC의 대상이 되지 않도록
Static Object Pool로 관리

Canvas Dimension
• 단말별 화면의 CSS 크기가 다름
• 게임 디자인 해상도와 화면 해상도간의 변환로직 필요
• canvas.width / height
• 화면의 크기에 맞게 canvas내부의 모든 entitiy의
width / height 좌표들을 조절
• canvas.style.width / height
• 단순하게 canvas.style 크기만 변경

canvas.width
320 px

!
360 px
!
320 px

canvas.width
360 px
canvas.width
320 px

canvas.width
360 px
canvas.width
320 px
Entity의 위치, 크기를
배율 1.125(360/320)로 변환해야함

canvas.style.width
360 px
canvas.style.width
320 px

canvas.style.width
360 px
canvas.style.width
320 px
Entity의 위치, 크기 변환 필요 없음

충돌 감지 방법
• 바운딩 박스 (collision box)
• 하나의 바운딩 박스로만 감지
• 여러개의 박스로 맵을 만들어 순회하여 감지
• 다각형 (Polygon 내부의 점)
• 미리 다각형의 맵을 작성해두고 폴리곤 내부의 점인지 판단가능
• Pixel Perfect Collision Detection
• 화면에 보이지 않는 canvas에 두 객체를 그려보고
달라진 픽셀이 있는지 순회하여 검사 (성능 이슈)

Frame Skip
• 60 FPS를 그려내지 못하는 단말에서는 16~7ms 내에
renderer loop가 돌아오지 않음.
• Frame Skip or Slow Animation?

Frame Skip시 문제점
• 저사양 단말에서 비행기가 총알을 뚫고 지나가는 현상
• Interpolation 혹은 다른 보정 로직 필요

HiDPI 지원
• 일명 레티나 디스플레이
• CSS 해상도와 물리적인 해상도가 상이
• devicePixelRatio
• canvas.context.backingStorePixelRatio

320 px
320 px
CSS 크기

640 px
480 px
실제 단말 해상도
css 해상도 * devicePixelRatio(backingStoreRatio)
devicePixelRatio
2
devicePixelRatio
1.5

!
canvas.width
640 px!
!
canvas.style.width
320 px
적용할 canvas와 canvas.style의 크기
!
canvas.width
480 px !
!
canvas.style.width
320 px

!
canvas.width
640 px!
!
canvas.style.width
320 px
적용할 canvas와 canvas.style의 크기
!
canvas.width
480 px !
!
canvas.style.width
320 px
(320 * 1.5이상) px 기준으로 제작한 이미지를 사용해야 효과

디자인 해상도 설정 문제
• 지원할 최고 해상도로 게임을 디자인
• 1080 x 1350
• 720 x 900 (x 2/3)
• 360 x 450 (x 1/3)
• 지원할 최저 해상도로 게임을 디자인
• 360 x 450
• 720 x 900 (x 2)
• 1080 x 1350 (x 3)

객체의 크기가 45 x 45 인 경우
(최고 해상도 기준)
• 지원할 최고 해상도로 게임을 디자인
• 45 x 45
• 30 x 30 (x 2/3)
• 15 x 15 (x 1/3)
• 지원할 최저 해상도로 게임을 디자인
• 15 x 15
• 30 x 30 (x 2)
• 45 x 45 (x 3)

객체의 크기가 50 x 50 인 경우
(최고 해상도 기준)
• 지원할 최고 해상도로 게임을 디자인
• 50 x 50
• 33 x 33 (x 2/3)
• 17 x 17 (x 1/3)
• 지원할 최저 해상도로 게임을 디자인
• 17 x 17
• 34 x 34 (x 2)
• 51 x 51 (x 3)

디자인 해상도 Best Practice
• 지원할 최고 해상도로 게임을 디자인
• 가로기준 720px 설정
• 이미지는 360px, 720px 기준 총 2벌 구성
• 가로기준 1080px 설정
• 이미지는 360px, 720px, 1080px 기준 총 3벌 구성
• 360px 배수인 이유는 국내 안드로이드 단말 이용자수가
가장 많기 때문

갤노트류 400px
갤S2이상, 옵G 및 기타 360px
CSS 가로너비

아이폰 320px
(갤S 320px)
CSS 가로너비

viewport 설정
• stretch to fit (종횡비 변경)
• 가로기준 늘이기 (상하 손실가능)
• 세로기준 늘이기 (상하 손실가능)

?

터치 좌표 계산
• 개발시 지정한 디자인 해상도를 기준으로
Canvas 크기조정값, viewport 설정값등을 토대로 계산
• 터치 좌표에 가상의 1x1 박스를 만들고
충돌하는 Entity를 탐색

Resource Loader
• 게임중 끊김현상을 방지하려면 필요한 리소스들을 미리 로딩해두어야함
• image
• <img> 태그 이용
• <img> 태그의 src지정. onload 이벤트 사용
• sound
• <audio> 태그 이용 (주로 배경음악)
• <audio> 태그의 src지정. oncanplay / oncanplaythough 이벤트 사용
• AudioContext 이용 (주로 효과음)
• XHR을 이용

Sound 재생
• <audio>
• 리소스 로딩이 완료되지 않아도 바로 재생가능
• 동시에 2개의 <audio> 재생불가
• AudioContext
• XHR arraybuffer 타입으로 로딩
• 로딩 완료후에 재생가능
• 여러 효과음 동시재생 가능
• 지원 커버리지가 넓지 않음 (현재 iOS 6+만 제대로 지원)

iOS의 audio 재생 정책
• 사용자의 액션(터치나 클릭) 없이는
어떤 소리도 재생되지 않음
• 심지어 <audio>는 src를 지정해도 로딩조차 하지 않음.

iOS의 audio 재생 정책
• 사용자의 액션(터치나 클릭) 없이는
어떤 소리도 재생되지 않음
• 심지어 <audio>는 src를 지정해도 로딩조차 하지 않음.
시작버튼을 만들어 lock을 해제시켜주어야함

iOS의 audio 재생 정책
• 사용자의 액션(터치나 클릭) 없이는
어떤 소리도 재생되지 않음
• 심지어 <audio>는 src를 지정해도 로딩조차 하지 않음.
시작버튼을 만들어 lock을 해제시켜주어야함
iOS에서는 AudioContext만 사용해서 preloading

디폴트 브라우저 문제
• 단말별 디폴트 브라우저의 특수기능
• iOS 좌우 스와이핑시 네비게이션 이동
• 멀티 터치시 확대/축소

디폴트 브라우저 문제
• 단말별 디폴트 브라우저의 특수기능
• iOS 좌우 스와이핑시 네비게이션 이동
• 멀티 터치시 확대/축소
WebView나 <iframe>으로 Wrapping 해야만 해결 가능

스펙 커버리지 문제
• HTML5 스펙 지원범위 차이
• Feature Detection 불가
• 예: 특정단말 브라우저에서 webkitAudioContext가
정의되어있으나 스펙이 제대로 구현되어있지 않음

스펙 커버리지 문제
• HTML5 스펙 지원범위 차이
• Feature Detection 불가
• 예: 특정단말 브라우저에서 webkitAudioContext가
정의되어있으나 스펙이 제대로 구현되어있지 않음
결국 User Agent Sniffing 해야함.

Canvas Drawing 성능문제
• 안드로이드 2.x
• Custom Webview의 지원사격 필요
• ex) PhoneGap FastCanvas
• OK캐쉬팡에는 planet.webview 사내 라이브러리
지원으로 canvas 성능향상 + 안드로이드 sound
적용

Canvas Drawing 성능문제
• 안드로이드 4.4 kitkat webview
• 단순히 drawRect만 해도 30fps 이하의 성능

Canvas Drawing 성능문제
• 안드로이드 4.4 kitkat webview
• 단순히 drawRect만 해도 30fps 이하의 성능
어떻하죠… ㅠㅠ

http://skpla.net/cashpang2

앞으로의 계획
• Canvas Drawing을 최적화
• 현재는 이전프레임과 비교하여 변경사항이 있을때만
drawing
• 영역별로 비교하여 dirty area만 다시 그리도록 개선
• 다양한 게임에 적용하여 엔진 개선
• 오픈소스화 (시기 미정)

참고자료
• OK캐쉬백 앱용 HTML5 게임 개발기 (https://readme.skplanet.com/?p=7243)
• http://html5gameengine.com/
• cocos2d Basic Concepts (http://www.cocos2d-iphone.org/wiki/doku.php/
prog_guide:basic_concepts)
• Static Memory Javascript with Object Pools (http://www.html5rocks.com/ko/tutorials/speed/
static-mem-pools/)
• High DPI Canvas (http://www.html5rocks.com/en/tutorials/canvas/hidpi/?
redirect_from_locale=ko)
• Playing Sounds with the Web Audio API (https://developer.apple.com/library/safari/
documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/
PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html#//apple_ref/doc/uid/
TP40009523-CH6-SW1)
• Improving HTML5 Canvas Performance (http://www.html5rocks.com/en/tutorials/canvas/
performance/)

고맙습니다 :)