1. Cross-platform Game
DevelopmentQuangHD
OGDC 2013, HCM

2. Hello World!
Contact me: quanghd@cami.vn
Follow us: facebook.com/camistudio
He’s me exactly!

3. HTML5, WTF?
I mean…
What’s the fun?

4. HTML5, WTF?
• Media
• Web Socket
• Local Storage
• WebGL
• Canvas
New Javascript API
HTML5 = HTML + 5

5. HTML5, WTF?
What Canvas is

6. Showcase
To be
Continued
…

7. HTML5 – Why should?
HTML/JS is huge popular

8. HTML5 – Why should?
Easy to train or recruit employees
Hire me

9. HTML5 – Why should?
Cross-platform

10. HTML5 – Why should?
Friendly development environment

11. HTML5 – Why should?
Flexible UI system

12. HTML5 – Why not?
Performance

13. HTML5 – Why not?
Community is new and quiet

15. HTML5 – Why not?
3D is terrible

16. HTML5 – Why not?
Out-of-the-box

17. • Game Engine:
ImpactJS, Construct 2, CAAT… and 50 more
• Toolkit:
CocoonJS, appMobi SDK, PhoneGap…
• Server-side:
NodeJS, Socket.IO…
Powerful Toys

18. Powerful Toys
FPS - Benchmark Report

19. • Access Native APIs
– Location
– Notification
– Camera, blah blah…
• Services
– IAP (In-App-Purchase)
– Social Network Integration
– Ads Promotion, blah blah…
Powerful Toys

20. Turn-base mobile game on HTML5
A true story

21. ImpactJS CocoonJS Venturesoom
What did we choose?
99$ Free No way to
measure

22. • 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

23. Memory Consumption
Large images/spritesheets loaded
Resolution: 1024x768
Format: PNG-8
Size: 916 bytes
In-Memory: 3MB!!!
(1024x768x4 bytes)

24. Memory Consumption
Wasted pixels
Resolution: 800x600
Format: PNG-8
Size: 619 bytes
In-Memory: 3MB!!!
(1024x768x4 bytes)
Wasted: 1.17MB
WTF?

25. Memory Consumption
• Solution:
– Create Image atlas
– Reuse image anytime
– Do own Garbage Collector

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

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

28. • Working smooth in 60fps (avg).
• Running on all popular platforms:
Android & iOS & Chrome & Win Phone…
The Epic Victory

29. Advices
The world is
moving to HTML5
Our Biggest Mistake
Was Betting Too
Much On HTML5
VS

30. The end

31. The game’s beginning…
Any
question?