HTML5 DevConf 2014 - Intro to HTML5 Mobile Game Development

https://academy.zenva.com

HTML5 Mobile Game Development for Beginners

Pablo Farias Navarropablofarias@zenva.com

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