OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
31
Cross-platform Game Development QuangHD OGDC 2013, HCM
-
Upload
ogdc -
Category
Technology
-
view
1.845 -
download
0
description
Presentation in OGDC 2013 organized by VNG Corp.
Transcript of OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
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?
