OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang

Cross-platform Game Development

QuangHDOGDC 2013, HCM

Hello World!

Contact me: [email protected]

Follow us: facebook.com/camistudio

He’s me exactly!

HTML5, WTF?

I mean… What’s the fun?

HTML5, WTF?

• Media• Web Socket• Local Storage• WebGL• Canvas

New Javascript API

HTML5 = HTML + 5

HTML5, WTF?

What Canvas is

It’s my amazing game

Showcase

To beContinued

…

HTML5 – Why should?

HTML/JS is huge popular

I’m working on my 1000 th website

HTML5 – Why should?

Easy to train or recruit employees

I can do itMe too

Hire meNo

problemIt fits me

HTML5 – Why should?

Cross-platform

Checked! Checked!Checked! Checked!

Checked!

HTML5 – Why should?

Friendly development environment

I’m coding on my Text Editor

HTML5 – Why should?

Flexible UI system

May I join?

We work together!

HTML5 – Why not?

Performance

Catch me if you can!

HTML5 – Why not?

Community is new and quiet

Anybody here?

We’re here!

HTML5 – Why not?

3D is terrible

Unity!HTML5!

HTML5 – Why not?

Out-of-the-box

I’m waiting for the box update

• Game Engine:

ImpactJS, Construct 2, CAAT… and 50 more• Toolkit:

CocoonJS, appMobi SDK, PhoneGap…• Server-side:

NodeJS, Socket.IO…

Powerful Toys

Powerful Toys

FPS - Benchmark Report

• Access Native APIs– Location – Notification– Camera, blah blah…

• Services– IAP (In-App-Purchase)– Social Network Integration– Ads Promotion, blah blah…

Powerful Toys

Turn-base mobile game on HTML5

A true story

ImpactJS CocoonJS Venturesoom

What did we choose?

99$ Free No way to measure

• Text, effects… Write more plugins• Screen Resolution Dev on middle ratio• Limited Engine Do more on canvas• RAM Consumption OMG (Oh My God!)

Problem/Solution

Memory Consumption

Large images/spritesheets loaded

Resolution: 1024x768

Format: PNG-8

Size: 916 bytes

In-Memory: 3MB!!!

(1024x768x4 bytes)

Memory Consumption

Wasted pixels

Resolution: 800x600

Format: PNG-8

Size: 619 bytes

In-Memory: 3MB!!!

(1024x768x4 bytes)

Wasted: 1.17MB

WTF?

Memory Consumption

• Solution:– Create Image atlas– Reuse image anytime– Do own Garbage Collector

• CocoonJS Cloud System Compiling– 1 minute action– Android & iOS & Tizen…– Ready to publish to App Store

Time to build

• Intel XDK Cloud System Compiling– 1 minute action– Android & iOS & Chrome & Win Phone…– Ready to publish to App Store

Time to build

• Working smooth in 60fps (avg).• Running on all popular platforms:

Android & iOS & Chrome & Win Phone…

The Epic Victory

Advices

The world is moving to HTML5

Our Biggest Mistake Was Betting Too Much On HTML5

VS

The end

The game’s beginning…

Any question?