Cross-platform Game
DevelopmentQuangHD
OGDC 2013, HCM
Hello World!
Contact me: quanghd@cami.vn
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
Showcase
To be
Continued
…
HTML5 – Why should?
HTML/JS is huge popular
HTML5 – Why should?
Easy to train or recruit employees
Hire me
HTML5 – Why should?
Cross-platform
HTML5 – Why should?
Friendly development environment
HTML5 – Why should?
Flexible UI system
HTML5 – Why not?
Performance
HTML5 – Why not?
Community is new and quiet
HTML5 – Why not?
3D is terrible
HTML5 – Why not?
Out-of-the-box
• Game Engine:
ImpactJS, Construct 2, CAAT… and 50 more
• Toolkit:
CocoonJS, appMobi SDK, PhoneGap…
• Server-side:
NodeJS,...
Powerful Toys
FPS - Benchmark Report
• Access Native APIs
– Location
– Notification
– Camera, blah blah…
• Services
– IAP (In-App-Purchase)
– Social Network In...
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 Consu...
Memory Consumption
Large images/spritesheets loaded
Resolution: 1024x768
Format: PNG-8
Size: 916 bytes
In-Memory: 3MB!!!
(...
Memory Consumption
Wasted pixels
Resolution: 800x600
Format: PNG-8
Size: 619 bytes
In-Memory: 3MB!!!
(1024x768x4 bytes)
Wa...
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...
• 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?
OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang
Upcoming SlideShare
Loading in...5
×

OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang

1,901

Published on

Presentation in OGDC 2013 organized by VNG Corp.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,901
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
74
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OGDC2013_ Cross platform game development with html5_ Mr Hoang Dinh Quang

  1. 1. Cross-platform Game DevelopmentQuangHD OGDC 2013, HCM
  2. 2. Hello World! Contact me: quanghd@cami.vn Follow us: facebook.com/camistudio He’s me exactly!
  3. 3. HTML5, WTF? I mean… What’s the fun?
  4. 4. HTML5, WTF? • Media • Web Socket • Local Storage • WebGL • Canvas New Javascript API HTML5 = HTML + 5
  5. 5. HTML5, WTF? What Canvas is
  6. 6. Showcase To be Continued …
  7. 7. HTML5 – Why should? HTML/JS is huge popular
  8. 8. HTML5 – Why should? Easy to train or recruit employees Hire me
  9. 9. HTML5 – Why should? Cross-platform
  10. 10. HTML5 – Why should? Friendly development environment
  11. 11. HTML5 – Why should? Flexible UI system
  12. 12. HTML5 – Why not? Performance
  13. 13. HTML5 – Why not? Community is new and quiet
  14. 14. HTML5 – Why not? 3D is terrible
  15. 15. HTML5 – Why not? Out-of-the-box
  16. 16. • Game Engine: ImpactJS, Construct 2, CAAT… and 50 more • Toolkit: CocoonJS, appMobi SDK, PhoneGap… • Server-side: NodeJS, Socket.IO… Powerful Toys
  17. 17. Powerful Toys FPS - Benchmark Report
  18. 18. • Access Native APIs – Location – Notification – Camera, blah blah… • Services – IAP (In-App-Purchase) – Social Network Integration – Ads Promotion, blah blah… Powerful Toys
  19. 19. Turn-base mobile game on HTML5 A true story
  20. 20. ImpactJS CocoonJS Venturesoom What did we choose? 99$ Free No way to measure
  21. 21. • 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
  22. 22. Memory Consumption Large images/spritesheets loaded Resolution: 1024x768 Format: PNG-8 Size: 916 bytes In-Memory: 3MB!!! (1024x768x4 bytes)
  23. 23. Memory Consumption Wasted pixels Resolution: 800x600 Format: PNG-8 Size: 619 bytes In-Memory: 3MB!!! (1024x768x4 bytes) Wasted: 1.17MB WTF?
  24. 24. Memory Consumption • Solution: – Create Image atlas – Reuse image anytime – Do own Garbage Collector
  25. 25. • CocoonJS Cloud System Compiling – 1 minute action – Android & iOS & Tizen… – Ready to publish to App Store Time to build
  26. 26. • Intel XDK Cloud System Compiling – 1 minute action – Android & iOS & Chrome & Win Phone… – Ready to publish to App Store Time to build
  27. 27. • Working smooth in 60fps (avg). • Running on all popular platforms: Android & iOS & Chrome & Win Phone… The Epic Victory
  28. 28. Advices The world is moving to HTML5 Our Biggest Mistake Was Betting Too Much On HTML5 VS
  29. 29. The end
  30. 30. The game’s beginning… Any question?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×