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
https://academy.zenva.com
HTML5 Mobile Game Development for Beginners
Pablo Farias [email protected]
ZENVA.com
https://academy.zenva.com
HTML5 GameDev Basics
Development Process
Frameworks
Coding!
https://academy.zenva.com
https://academy.zenva.com
M1 – HTML5 GAMEDEV BASICS
https://academy.zenva.com
https://academy.zenva.com
HTML5 Games
New Technology
“XYZ”
People will hack games
with XYZ
XYZ Game Development
https://academy.zenva.com
https://academy.zenva.com
Running HTML5 Games
• Web browsers
• Web views
• Devices– Desktop– Mobile– Smart TV’s
https://academy.zenva.com
Rendering a HTML5 Game
• DOM• CANVAS• WebGL• SVG
https://academy.zenva.com
Document Object Model
• Object representation of a website in the web browser
• Tree-like structure
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/ –
https://academy.zenva.com
CANVAS
https://academy.zenva.com
https://academy.zenva.com
Simple canvas usage
• http://static.pablofarias.com/canvas-demo/basic.html
• http://static.pablofarias.com/canvas-demo/animation.html
https://academy.zenva.com
Representing a rectangle
DOM
• Div container• CSS rules• Part of the DOM tree
CANVAS
• Pixels with color and transparency value
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
https://academy.zenva.com
Some WebGL examples
• http://www.babylonjs.com/• http://threejs.org/examples/
https://academy.zenva.com
SVG
• Scalable vector graphics• Shapes represented by metadata– Not pixels!
• Not fully supported• http://snapsvg.io/
https://academy.zenva.com
Audio in HTML5
• Audio tag• Web Audio API
https://academy.zenva.com
Audio tag
https://academy.zenva.com
Web Audio API
Example: http://mdn.github.io/violent-theremin/
https://academy.zenva.com
Storage
• LocalStorage• IndexedDB• Remote using AJAX• WebSQL to be removed!
https://academy.zenva.com
LocalStoragerecommended < 5 MB
https://academy.zenva.com
IndexedDB
• Android 4.4+, iOS 7• Transactional DB• Synchronous and asynchronous• Still not stable
https://academy.zenva.com
Other API’s
• Web workers• Geolocation• Camera• Gamepad (experimental)
https://academy.zenva.com
Web Workers
https://academy.zenva.com
Geolocation
https://academy.zenva.com
Quick summary
• What are HTML5 games• Rendering HTML5 games– DOM– Canvas– WebGL– SVG
• What HTML5 API’s make it possible
https://academy.zenva.com
Break time!
ZENVA.com