ogdc 2013 cross platform game development for mobile web
TRANSCRIPT
![Page 1: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/1.jpg)
Cross-platform Game Development for Mobile & Web
CODY NGUYEN
Mobile Game DeveloperVinova Pte Ltd
![Page 2: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/2.jpg)
cross-platformwrite once, run on multiple platforms
![Page 3: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/3.jpg)
Benefits of
cross-platform game development
![Page 4: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/4.jpg)
Less skills required
• Native game development for different devices requires different skill sets.
• Less skills means more focused & efficient
![Page 5: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/5.jpg)
More gaming devices, less code
• Gaming devices are more and more diverse
• More devices means more audience
![Page 6: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/6.jpg)
Fast development & maintenance
• Game requirements change every day
• One effort covers all platforms
![Page 7: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/7.jpg)
An overview of
video gaming platforms
![Page 8: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/8.jpg)
Video gaming platforms
• PlayStation• XBOX• Wii
• Native game clients
• iOS• Android• Windows
Phone
• Flash• Native Client
(Chrome Only)
• HTML5
Web Mobile
Console
Desktop
![Page 9: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/9.jpg)
Video gaming platforms
• Flash• Native Client
(Chrome Only)• HTML5
• iOS• Android• Windows
Phone
• PlayStation• XBOX• Wii
• Native game clients
Web Mobile
ConsoleDesktop
![Page 10: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/10.jpg)
Why
WEB & MOBILE ?
![Page 11: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/11.jpg)
Web & Mobileis
ONE
![Page 12: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/12.jpg)
cross-platform game
approaches
![Page 13: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/13.jpg)
HTML5
• Run on PC & mobile browsers
• Run as wrapper apps on mobile
Native Mobile
• Write in C/C++ for mobile, compile to JS to run on browsers
• Write JS bindings for mobile and browsers
![Page 14: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/14.jpg)
Browsers are improving
• 2D & 3D rendering• WebSocket• Web workers• Audio
![Page 15: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/15.jpg)
JavaScript is improving
• Race among JS engines (V8, SpiderMonkey, Nitro) is good for JS performance
• JS runs large code faster
![Page 16: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/16.jpg)
JavaScript meets C/C++
• Compile C/C++ to JS with Emscripten• Compiled code is faster than
handwritten code
![Page 17: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/17.jpg)
Even faster with asm.js
• Strict subset of JS, optimized for compiled code
• Without asm.js, 10x slower than native C/C++
• With asm.js, half as fast (comparable to Java, C#)
• Will get even faster
![Page 18: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/18.jpg)
Even faster with asm.js
Source: http://kripken.github.io/mloc_emscripten_talk/#/28
![Page 19: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/19.jpg)
![Page 20: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/20.jpg)
HTML5 is an
observable trend
![Page 21: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/21.jpg)
Everybody is shifting to HTML5
• Google, Microsoft, Apple & Mozilla are pushing for HTML5
• Game pioneers (Epic & Unity3D) too
![Page 22: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/22.jpg)
Native mobile
![Page 23: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/23.jpg)
Cross-platform game engines
and more
![Page 24: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/24.jpg)
Why 2D?
• Target mobile devices• 3D camera is not effective on small
screens• Reduced development effort & time.
![Page 25: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/25.jpg)
The Cocos2D Ecosystem
![Page 26: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/26.jpg)
Cocos2D
• 2D game ecosystem• Open source (MIT lisence)• Great community
![Page 27: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/27.jpg)
What’s in there
![Page 28: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/28.jpg)
What’s in there
![Page 29: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/29.jpg)
Who’s in there
![Page 30: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/30.jpg)
![Page 31: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/31.jpg)
Why is Cocos2D good for cross-platform game
development?
![Page 32: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/32.jpg)
Cocos2D-x / -iphone• C++ / ObjC API• JavaScript bindings• Runs on iOS &
Android
Cocos2D-html5• JavaScript API• Runs on WebGL-
enabled browsers
JavaScript = common language
![Page 33: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/33.jpg)
The 2 approaches
![Page 34: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/34.jpg)
1. Start with Cocos2D-html5
• Write JS code, for browsers• Re-use JS code as JS bindings, for mobile
Re-use as JS bindings for C/C++ API
JS code access Cocos2D-html5 API
![Page 35: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/35.jpg)
2. Start with Cocos2D-x
• Write C/C++ code, for mobile• Compile to JS, for browsers
C/C++ code for mobile first
Compile to JS via Emscripten & asm.js
![Page 36: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/36.jpg)
Emscripten in Cocos2D-x is new
• Audio is not supported yet• Cocos2D-x lib is not yet validated with
asm.js• Screen resolution need to be hardcoded
for now
![Page 37: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/37.jpg)
It’s getting better everyday
• The Cocos2D-x team are improving Emscripten support
• Mozilla, Unity3D are working on asm.js & Emscripten improvement
![Page 38: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/38.jpg)
To sum up
![Page 39: Ogdc 2013 cross platform game development for mobile web](https://reader036.vdocuments.site/reader036/viewer/2022062513/554d26b6b4c905ca208b4f23/html5/thumbnails/39.jpg)
Thank you