Cross-platform Game Development
QuangHDOGDC 2013, HCM
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?
Top Related