Enlargement of SOFTWARE

HTML5 게임 플랫폼 및 개발 방향

정창진 마상 소프트 CTO

한국 웹 20주년 국제 컨퍼런스

Convergence Game Global Company

INDEX

HTML5 Game Platforms

& Development

01 02 03 04

HTML5 게임 개요

HTML5 게임 개발의 이슈

HTML5 플랫폼 소개

HTML5 게임 서비스 및 개발 방향

한국

웹 2

0주년

기념

컨퍼런스

2D Canvas Game

2D 기반의 케주얼 게임류

다양한 GUI 엔진 출시

3D WebGl Game

브라우저 상에서 그래픽 가속을

위한 WebGL 기술 활용

3rd Party Engine

2D, 3D 기반 게임 제작을 위한

자바 스크립트 라이브러리 활용

HTML5 게임개요

HTML5 게임 ?

• HTML5 Tag 와 CSS, Javascript 를 활용한 웹기반 게임

• Node.js, Backborn.js 등의 다양한 클라이언트 - 서버 관련 기술이 추가 활용될 수 있음

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임개요

HTML5 게임 장점과 단점

• One Code Multi-platform.

• Fast Development

구분 장점 단점

HTML5 게임

별도의 게임 관리를 위한 액티브 액스 등의 플러그인 필

요 없음

하나의 코드로 다양한 플랫폼 대응이 가능

즉각적인 패치 및 사용자 PC 내의 스토리지 사용필요 없

음.

프레임워크 완성 후에는 추가 스테이지, 추가 월드 등의

개발 속도가 대단히 빠름

모바일 단말에서의 단말 특성에 따른 퍼포먼스 차이가

존재함.

다양한 3rd party 엔진 등의 관련 부가 기술이 부족함.

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임플랫폼 소개

HTML5 게임 엔진 및 라이브러리

• 가장 많이 활용되고 있는 게임 엔진은 Construct2

• Cocos2D 등의 기존 네이티브 게임 엔진들도 HTML5 로의 exporting 지원

• NaCL(Natvice Client), Asm.js 등의 툴을 활용한 컨버팅 기술 역시 지속적으로 개발중

구분 이름 설명 참고 사이트

게임엔진

Construct2 GUI 기반의 게임 저작 엔진 scirra.com/construct2

ImpactJS 라이브러리 기반의 게임 저작 엔진 impactjs.com

Goo Engine WebGL기반의 3D 게임 저작 엔진 gootechnologies.com

Phaser 라이브러리 기반의 게임 저작엔진 photonstorm.com/phaser

기타 플랫폼

Cocoon.js device 퍼포먼스 향상을 위한 라이브러리 엔진 ludei.com/cocoonjs

Pixi.js WebGL 렌더링을 위한 라이브러리 pixijs.com

Kiwi.js WebGL 렌더링을 위한 라이브러리 kiwijs.org

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임플랫폼 소개

HTML5 게임 엔진 – Contruct 2

• GUI 기반의 게임 제작 툴 – 간단한 게임은 스크립트도 없이 개발 가능

• 50 여개의 다양한 이벤트와 behavior 를 통해 손쉽게 게임 제작이 가능

• 즉각적인 프리뷰 지원 기능 및 비주얼 이펙트를 위한 WebGL 지원

Profitable 한 게임은 아직 출시된 바가 없음.

Client 기반의 게임만을 위한 툴

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임플랫폼 소개

HTML5 게임 엔진 – ImpactJS

• 라이브러리 기반의 게임 제작 툴

• Core, Class, System, Loader, Game, Entity, Input, Timer 등의 게임에 필요한 라이브러리 지원

• 비주얼 레벨 에디터 지원 및 퍼포먼스 테스트 툴킷 제공

Profitable 한 게임은 아직 출시된 바가 없음.

Client 기반의 게임만을 위한 툴

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임플랫폼 소개

HTML5 게임 엔진 – Goo Engine

• WebGL 기반의 3D 게임 및 애니메이션 크리에이터

• 엔진 Interface 자체도 HTML5 기반으로 제작되어 웹브라우저에서 바로 실행

• unity3D, Unreal 등 기존 네이티브 엔진에 근접하는 다양한 3D 기능 지원

모바일 단말에서의 퍼포먼스 이슈가 여전히 존재 – 일부 단말에서는 실행속도 대단히 느림

Client 기반의 게임만을 위한 툴

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임플랫폼 소개

HTML5 게임 퍼포먼스 향상 엔진 – cocoon.js

• 모바일 단말기 상에서의 퍼포먼스 문제 해결을 위해 개발된 플랫폼

• Webkit 등의 기존 툴킷을 사용하는 것이 아니라 게임에 최적화된 별도의 브라우저 엔진 사용

• IAP, SNS, ranking 등의 기본 서버 활용 시스템 지원

Contsruct2, ImpactJS 등의 기존 HTML5 게임 엔진과의 협력

최종 생성된 소스를 수정할 수 없으므로 추가적인 커스터마이징이 불가.

Canvas 객체만 지원 -> 순수 DOM 기반의 게임은 지원 불가

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 개발의 이슈

Security Concern

• 모바일 게임의 경우, 모든 소스가 단말기 내에 HTML5 파일 형태로 탑재

• 모바일 단말기와 서버 통신시의 크로스 도메인 이슈 및 게임 로직 노출

• JSONP 가 유일한 대안이었으나, 치명적 결점에 따라 대안 필요

Application Server

Send (Application start) Application Start

Save Cookie in DB with deviceID & User ID.

Set Cookie

Posting Action http://www.xxxxxx.com/posting

Request Posting by JSONP

Hacker Server Request by direct URL With his User ID

Server can not know whether the access is from normal user

or not

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 개발의 이슈

Performance Concern

• White – blink 등의 문제는 있을 수 있지만 PC에서의 퍼포먼스는 큰 차이가 없음

• 1280 픽셀 이상의 해상도의 지원은 대체적으로 게임 실행 자체가 어려움

• Pixi.js, cocoon.js 등의 3rd Party 엔진을 활용해도 문제는 여전히 존재함

• iPhone, Android 등의 플랫폼 뿐 만 아니라 각각의 단말 특성에 따른 퍼포먼스 차이도 상당함

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 서비스 및 개발 방향

iOS Android

iPad

iPhone4

iPhone3gs

Galaxy S

Nexus One

Galaxy Tab

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 서비스 및 개발 방향

네이티브 게임 VS HTML5 게임

• 당분간 네이티브 수준의 퍼포먼스를 기대하기는 어려움

• IAP, Security, Server Development 등의 전체적인 부분에 대한 고려가 필요함

• 자신이 원하는 게임의 특성과 사용자층을 고려한 개발 계획이 반드시 필요함.

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 서비스 및 개발 방향

HTML5 게임 개발 장점

• HTML5 게임은 기본 프레임 개발 완료 및 단말별 테스트 이후에는 큰 이슈는 없음

• 빠른 개발 속도 및 단말별 대응 속도 유지 보수가 쉬움

• 시장 반응을 위한 테스트 베드로도 활용이 가능

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 서비스 및 개발 방향

HTML5 Security 보완

• 게임 내의 기본 클라이언트 – 서버 통신은 WebSocket 을 활용한 기본 보안 설계(JSONP 사용금지)

• 게임내의 로직에 따라 발생한 아이템 등의 취득은 서버내에서 반드시 검증 단계 필요

한국

웹 2

0주년

기념

컨퍼런스

HTML5 게임 서비스 및 개발 방향

HTML5 게임 서비스 개발 방향

• 3D 기반의 RPG 등의 미들급 이상 게임은 가급적 기획단계에서 배제

• 빠른 개발 속도가 장점이 되거나 사용자 경험을 해치지 않는 범위 내에서의 가능한 게임으로 선별

• IAP 를 위한 SNS 연동, 경쟁 시스템 등을 위한 서버 기반 웹 개발 고려

• 화면 해상도는 가급적 800 픽셀 이하로 진행(모바일 단말내의 퍼포먼스 고려)

HTML5 현재 기술에 적합한 장르 선정

개발 플랫폼 및 엔진 선정

수익성 확보를 위한 IAP, SNS 연동 고려

화면 해상도는 800*600 이하 권장

Server

Client