Download - HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례
![Page 1: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/1.jpg)
HTML5 게임 엔진OK캐쉬백 게임이벤트 개발 사례
SK플래닛 김준기
![Page 2: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/2.jpg)
HTML5
![Page 3: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/3.jpg)
왜 HTML5 게임인가?• 게임은 플랫폼 확보가 최우선
• PlayStation / XBOX / Nintendo…
• 웹 브라우저가 깔려있지 않은 기기는 더 이상 없다
• 자연스럽게 모바일로 확산
• One Source Multi Use
• N-screen
• 개발 생산성 향상
![Page 4: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/4.jpg)
HTML5 Features for Game• Graphics
• Canvas
• WebGL
• SVG
• Audio / Video
• <audio> / AudioContext
• <video>
• ETC
• FullScreen API
• Pointer Lock API
![Page 5: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/5.jpg)
정말? 그냥 과시용이 아니고?
![Page 6: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/6.jpg)
![Page 7: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/7.jpg)
HTML5 게임의 한계
• 애초에 브라우저는 게임 플랫폼이 아니다.
• 입력장치
• 복잡한 연산에 특화되지 않은 환경
• 메모리 관리
• 사용자의 하드웨어의 사양에 무관한 게임?
![Page 8: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/8.jpg)
그래도 합니다. 되는데 까지 해볼랍니다.
![Page 9: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/9.jpg)
![Page 10: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/10.jpg)
![Page 11: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/11.jpg)
웹에 적합한 게임?
• 플레이타임 1~5분 이내
• 원버튼 캐주얼
• 특정 서비스, 제품 홍보를 위한 요소를 통합시킨 Branded 게임
![Page 13: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/13.jpg)
• 코드
• ~450 LOC engine.js (12kb)
• ~300 LOC game.js (8kb)
• 이미지
• sprites.png (63kb)
![Page 14: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/14.jpg)
HTML5 게임엔진의 필요기능
• 그래픽 제어
• Animation 재생
• Resource Loader
• BGM / 효과음 재생
• 사용자 입력 제어
![Page 15: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/15.jpg)
HTML5 게임 엔진
• pㅔ
![Page 16: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/16.jpg)
HTML5 게임 엔진
• pㅔ
![Page 17: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/17.jpg)
cocos2d
• cocos2d for iphone
• http://www.cocos2d-iphone.org/
• cocos2d-x
• http://www.cocos2d-x.org/
![Page 18: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/18.jpg)
![Page 19: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/19.jpg)
![Page 20: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/20.jpg)
![Page 21: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/21.jpg)
![Page 22: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/22.jpg)
![Page 23: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/23.jpg)
cocos2d-html5
• cocos2d-html5 2.2.2 (2014. 1. 7)
• cocos2d-js 3.0a (2014. 3. 15)
• cocos2d-html5
• cocos2d-x javascript binding
![Page 24: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/24.jpg)
cocos2d-html5
• cocos2d-html5 2.2.2 (2014. 1. 7)
• Cocos2d-html5-v2.2.2.min.js (1.2mb, minified)
• 웹 방식의 deploy 방식에는 부적합 (특히 모바일)
![Page 25: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/25.jpg)
필요한 기능만 만들어 써보자!
![Page 26: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/26.jpg)
HTML5 게임엔진의 필요기능
• 그래픽 제어
• Animation 재생
• Resource Loader
• BGM / 효과음 재생
• 사용자 입력 제어
![Page 27: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/27.jpg)
HTML5 게임엔진의 필요기능
• 그래픽 제어 > Canvas 2D 그래픽
• Animation 재생 > Sprite Animation
• Resource Loader > <img> / <audio> / XHR
• BGM / 효과음 재생 > <audio> / AudioContext
• 사용자 입력 제어 > Touch event 처리
![Page 28: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/28.jpg)
Canvas 제어
• Raster 이미지, Immediate mode
• 그려낼 객체의 관리가 핵심
• Canvas Drawing 성능이 웹 게임 성능의 키
• requestAnimationFrame을 이용한 Renderer 작성
![Page 29: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/29.jpg)
Renderer
![Page 30: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/30.jpg)
Renderer
![Page 31: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/31.jpg)
Renderer
![Page 32: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/32.jpg)
Scene / Board / Entity• Entity
• 화면에 표시될 최소 단위 객체
• 주로 스프라이트 애니메이션이나 static 이미지, 혹은 canvas.context로 그려냄
• Board
• Entity들을 리스트로 가지는 레이어
• Scene
• 게임내 장면전환을 위해 Board들의 단위로 장면을 구성
![Page 33: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/33.jpg)
cocos2d의 장면/레이어 컨셉
![Page 34: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/34.jpg)
Scene / Board / Entity
![Page 35: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/35.jpg)
Sprite Animation
• Entity와 Sprite Animation의 맵핑
• 지정된 시간에 정의된 속성에 따라 애니메이션 재생
![Page 36: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/36.jpg)
8 프레임 프레임당 24px x 22px
![Page 37: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/37.jpg)
Static Object Pool
• JavaScript의 Garbage Collection중에 브라우저는 다른 어떤 동작도 할 수 없음
• Canvas에 그려낼 객체 중 반복해서 생성/삭제 되는 객체(Entity, Board)를 GC의 대상이 되지 않도록 Static Object Pool로 관리
![Page 38: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/38.jpg)
Canvas Dimension• 단말별 화면의 CSS 크기가 다름
• 게임 디자인 해상도와 화면 해상도간의 변환로직 필요
• canvas.width / height
• 화면의 크기에 맞게 canvas내부의 모든 entitiy의 width / height 좌표들을 조절
• canvas.style.width / height
• 단순하게 canvas.style 크기만 변경
![Page 39: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/39.jpg)
canvas.width320 px
![Page 40: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/40.jpg)
!360 px!
320 px
![Page 41: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/41.jpg)
canvas.width 360 pxcanvas.width
320 px
![Page 42: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/42.jpg)
canvas.width 360 pxcanvas.width
320 px
Entity의 위치, 크기를 배율 1.125(360/320)로 변환해야함
![Page 43: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/43.jpg)
canvas.style.width 360 pxcanvas.style.width
320 px
![Page 44: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/44.jpg)
canvas.style.width 360 pxcanvas.style.width
320 px
Entity의 위치, 크기 변환 필요 없음
![Page 45: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/45.jpg)
충돌 감지 방법• 바운딩 박스 (collision box)
• 하나의 바운딩 박스로만 감지
• 여러개의 박스로 맵을 만들어 순회하여 감지
• 다각형 (Polygon 내부의 점)
• 미리 다각형의 맵을 작성해두고 폴리곤 내부의 점인지 판단가능
• Pixel Perfect Collision Detection
• 화면에 보이지 않는 canvas에 두 객체를 그려보고 달라진 픽셀이 있는지 순회하여 검사 (성능 이슈)
![Page 46: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/46.jpg)
Frame Skip
• 60 FPS를 그려내지 못하는 단말에서는 16~7ms 내에 renderer loop가 돌아오지 않음.
• Frame Skip or Slow Animation?
![Page 47: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/47.jpg)
Frame Skip시 문제점
• 저사양 단말에서 비행기가 총알을 뚫고 지나가는 현상
• Interpolation 혹은 다른 보정 로직 필요
![Page 48: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/48.jpg)
HiDPI 지원
• 일명 레티나 디스플레이
• CSS 해상도와 물리적인 해상도가 상이
• devicePixelRatio
• canvas.context.backingStorePixelRatio
![Page 49: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/49.jpg)
320 px 320 px
CSS 크기
![Page 50: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/50.jpg)
640 px 480 px
실제 단말 해상도 css 해상도 * devicePixelRatio(backingStoreRatio)
devicePixelRatio
2devicePixelRatio
1.5
![Page 51: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/51.jpg)
!canvas.width
640 px!!
canvas.style.width 320 px
적용할 canvas와 canvas.style의 크기
!canvas.width
480 px !!
canvas.style.width 320 px
![Page 52: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/52.jpg)
!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 기준으로 제작한 이미지를 사용해야 효과
![Page 53: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/53.jpg)
디자인 해상도 설정 문제• 지원할 최고 해상도로 게임을 디자인
• 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)
![Page 54: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/54.jpg)
객체의 크기가 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)
![Page 55: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/55.jpg)
객체의 크기가 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)
![Page 56: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/56.jpg)
디자인 해상도 Best Practice• 지원할 최고 해상도로 게임을 디자인
• 가로기준 720px 설정
• 이미지는 360px, 720px 기준 총 2벌 구성
• 가로기준 1080px 설정
• 이미지는 360px, 720px, 1080px 기준 총 3벌 구성
• 360px 배수인 이유는 국내 안드로이드 단말 이용자수가 가장 많기 때문
![Page 57: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/57.jpg)
![Page 58: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/58.jpg)
갤노트류 400px갤S2이상, 옵G 및 기타 360px
CSS 가로너비
![Page 59: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/59.jpg)
아이폰 320px (갤S 320px)
CSS 가로너비
![Page 60: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/60.jpg)
viewport 설정
• stretch to fit (종횡비 변경)
• 가로기준 늘이기 (상하 손실가능)
• 세로기준 늘이기 (상하 손실가능)
![Page 61: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/61.jpg)
?
![Page 62: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/62.jpg)
![Page 63: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/63.jpg)
터치 좌표 계산
• 개발시 지정한 디자인 해상도를 기준으로 Canvas 크기조정값, viewport 설정값등을 토대로 계산
• 터치 좌표에 가상의 1x1 박스를 만들고 충돌하는 Entity를 탐색
![Page 64: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/64.jpg)
Resource Loader• 게임중 끊김현상을 방지하려면 필요한 리소스들을 미리 로딩해두어야함
• image
• <img> 태그 이용
• <img> 태그의 src지정. onload 이벤트 사용
• sound
• <audio> 태그 이용 (주로 배경음악)
• <audio> 태그의 src지정. oncanplay / oncanplaythough 이벤트 사용
• AudioContext 이용 (주로 효과음)
• XHR을 이용
![Page 65: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/65.jpg)
Sound 재생• <audio>
• 리소스 로딩이 완료되지 않아도 바로 재생가능
• 동시에 2개의 <audio> 재생불가
• AudioContext
• XHR arraybuffer 타입으로 로딩
• 로딩 완료후에 재생가능
• 여러 효과음 동시재생 가능
• 지원 커버리지가 넓지 않음 (현재 iOS 6+만 제대로 지원)
![Page 66: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/66.jpg)
iOS의 audio 재생 정책
• 사용자의 액션(터치나 클릭) 없이는 어떤 소리도 재생되지 않음
• 심지어 <audio>는 src를 지정해도 로딩조차 하지 않음.
![Page 67: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/67.jpg)
iOS의 audio 재생 정책
• 사용자의 액션(터치나 클릭) 없이는 어떤 소리도 재생되지 않음
• 심지어 <audio>는 src를 지정해도 로딩조차 하지 않음.
시작버튼을 만들어 lock을 해제시켜주어야함
![Page 68: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/68.jpg)
iOS의 audio 재생 정책
• 사용자의 액션(터치나 클릭) 없이는 어떤 소리도 재생되지 않음
• 심지어 <audio>는 src를 지정해도 로딩조차 하지 않음.
시작버튼을 만들어 lock을 해제시켜주어야함
iOS에서는 AudioContext만 사용해서 preloading
![Page 69: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/69.jpg)
디폴트 브라우저 문제
• 단말별 디폴트 브라우저의 특수기능
• iOS 좌우 스와이핑시 네비게이션 이동
• 멀티 터치시 확대/축소
![Page 70: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/70.jpg)
디폴트 브라우저 문제
• 단말별 디폴트 브라우저의 특수기능
• iOS 좌우 스와이핑시 네비게이션 이동
• 멀티 터치시 확대/축소
WebView나 <iframe>으로 Wrapping 해야만 해결 가능
![Page 71: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/71.jpg)
스펙 커버리지 문제• HTML5 스펙 지원범위 차이
• Feature Detection 불가
• 예: 특정단말 브라우저에서 webkitAudioContext가 정의되어있으나 스펙이 제대로 구현되어있지 않음
![Page 72: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/72.jpg)
스펙 커버리지 문제• HTML5 스펙 지원범위 차이
• Feature Detection 불가
• 예: 특정단말 브라우저에서 webkitAudioContext가 정의되어있으나 스펙이 제대로 구현되어있지 않음 결국 User Agent Sniffing 해야함.
![Page 73: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/73.jpg)
Canvas Drawing 성능문제• 안드로이드 2.x
• Custom Webview의 지원사격 필요
• ex) PhoneGap FastCanvas
• OK캐쉬팡에는 planet.webview 사내 라이브러리지원으로 canvas 성능향상 + 안드로이드 sound적용
![Page 74: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/74.jpg)
Canvas Drawing 성능문제
• 안드로이드 4.4 kitkat webview
• 단순히 drawRect만 해도 30fps 이하의 성능
![Page 75: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/75.jpg)
Canvas Drawing 성능문제
• 안드로이드 4.4 kitkat webview
• 단순히 drawRect만 해도 30fps 이하의 성능
어떻하죠… ㅠㅠ
![Page 76: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/76.jpg)
![Page 78: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/78.jpg)
앞으로의 계획• Canvas Drawing을 최적화
• 현재는 이전프레임과 비교하여 변경사항이 있을때만 drawing
• 영역별로 비교하여 dirty area만 다시 그리도록 개선
• 다양한 게임에 적용하여 엔진 개선
• 오픈소스화 (시기 미정)
![Page 79: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/79.jpg)
참고자료• 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/)
![Page 80: HTML5 게임 엔진 - OK캐쉬백 게임이벤트 개발 사례](https://reader031.vdocuments.net/reader031/viewer/2022012310/547bdeb95906b59f798b4650/html5/thumbnails/80.jpg)
고맙습니다 :)