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
