html5 devconf 2014 - intro to html5 mobile game development
DESCRIPTION
Workshop slides at the HTML5 DevConf in San Francisco held in October 2014. The workshop titled HTML5 Mobile Game Development for Beginners covers the basics of game development for people with JavaScript skills. Two game frameworks were covered: Quintus and Phaser. This module is about what HTML5 games are. Basically, they are games created with Open Web Technologies, namely, HTML, CSS and JavaScript. HTML5 game can be rendered using DOM, CANVAS, WebGL and SVG. Reach us for more info: Homepage: http://zenva.com Zenva Academy: https://academy.zenva.com GameDev Academy: http://gamedevacademy.org HTML5 Hive: http://html5hive.org De Idea A App: http://deideaaapp.orgTRANSCRIPT
![Page 1: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/1.jpg)
https://academy.zenva.com
HTML5 Mobile Game Development for Beginners
Pablo Farias [email protected]
ZENVA.com
![Page 2: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/2.jpg)
https://academy.zenva.com
HTML5 GameDev Basics
Development Process
Frameworks
Coding!
![Page 3: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/3.jpg)
https://academy.zenva.com
![Page 4: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/4.jpg)
https://academy.zenva.com
M1 – HTML5 GAMEDEV BASICS
![Page 5: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/5.jpg)
https://academy.zenva.com
![Page 6: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/6.jpg)
https://academy.zenva.com
HTML5 Games
New Technology
“XYZ”
People will hack games
with XYZ
XYZ Game Development
![Page 7: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/7.jpg)
https://academy.zenva.com
![Page 8: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/8.jpg)
https://academy.zenva.com
Running HTML5 Games
• Web browsers
• Web views
• Devices– Desktop– Mobile– Smart TV’s
![Page 9: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/9.jpg)
https://academy.zenva.com
Rendering a HTML5 Game
• DOM• CANVAS• WebGL• SVG
![Page 10: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/10.jpg)
https://academy.zenva.com
Document Object Model
• Object representation of a website in the web browser
• Tree-like structure
![Page 11: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/11.jpg)
https://academy.zenva.com
DOM Games
• HTML elements• CSS• CSS3 effects• JavaScript• jQuery, Angular why not!
• Examples:– DOM sprite demo– Counting beads– https://01.org/html5webapps/online/run-rabbit-run/ –
![Page 12: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/12.jpg)
https://academy.zenva.com
CANVAS
![Page 13: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/13.jpg)
https://academy.zenva.com
![Page 14: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/14.jpg)
https://academy.zenva.com
Simple canvas usage
• http://static.pablofarias.com/canvas-demo/basic.html
• http://static.pablofarias.com/canvas-demo/animation.html
![Page 15: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/15.jpg)
https://academy.zenva.com
Representing a rectangle
DOM
• Div container• CSS rules• Part of the DOM tree
CANVAS
• Pixels with color and transparency value
![Page 16: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/16.jpg)
https://academy.zenva.com
WebGL
• 2D and 3D images using GPU• Specification based on OpenGL• Not fully supported• Libraries:– Pixi.js– Babylon.js– Three.js
![Page 17: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/17.jpg)
https://academy.zenva.com
Some WebGL examples
• http://www.babylonjs.com/• http://threejs.org/examples/
![Page 18: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/18.jpg)
https://academy.zenva.com
SVG
• Scalable vector graphics• Shapes represented by metadata– Not pixels!
• Not fully supported• http://snapsvg.io/
![Page 19: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/19.jpg)
https://academy.zenva.com
Audio in HTML5
• Audio tag• Web Audio API
![Page 20: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/20.jpg)
https://academy.zenva.com
Audio tag
![Page 21: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/21.jpg)
https://academy.zenva.com
Web Audio API
Example: http://mdn.github.io/violent-theremin/
![Page 22: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/22.jpg)
https://academy.zenva.com
Storage
• LocalStorage• IndexedDB• Remote using AJAX• WebSQL to be removed!
![Page 23: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/23.jpg)
https://academy.zenva.com
LocalStoragerecommended < 5 MB
![Page 24: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/24.jpg)
https://academy.zenva.com
IndexedDB
• Android 4.4+, iOS 7• Transactional DB• Synchronous and asynchronous• Still not stable
![Page 25: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/25.jpg)
https://academy.zenva.com
Other API’s
• Web workers• Geolocation• Camera• Gamepad (experimental)
![Page 26: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/26.jpg)
https://academy.zenva.com
Web Workers
![Page 27: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/27.jpg)
https://academy.zenva.com
Geolocation
![Page 28: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/28.jpg)
https://academy.zenva.com
Quick summary
• What are HTML5 games• Rendering HTML5 games– DOM– Canvas– WebGL– SVG
• What HTML5 API’s make it possible
![Page 29: HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development](https://reader035.vdocuments.net/reader035/viewer/2022062300/557d5f34d8b42ae1438b4ef2/html5/thumbnails/29.jpg)
https://academy.zenva.com
Break time!
ZENVA.com