HTML5 Gamesfor web and mobile!

@casarock

It’s me, Carsten!

Head of Development @ //mediaman

Ex-Zynga

Loves everything about Web and open standards!

Twitter: @casarock

HTML5 Games?

HTML5 Canvas

https://www.flickr.com/photos/helico/416249293/

Short history

• Invented by Apple for their own WebKit component in OS X (~2004)

• adopted by Mozilla (2005), Opera (2006)

• standardized by the WHATWG

• now standardized by W3C!

HTML5 Canvas

https://www.flickr.com/photos/deepcaves/14567139834/

• Drawing Lines, Pixel, Rects • Bézier curves, Arcs • Gradients • scaling, positioning, rotating,

cropping of images • render text • moving, rotating, scaling of objects

and object groups

Ok, but Games?

Request Animation Frame! function step() {

// Do serious painting stuff! window.requestAnimationFrame(step); }

window.requestAnimationFrame(step);

• Tell browser you want to call a method (for animation)

• usually being called every 16,67ms (60FPS)

Simple animationLIVE DEMOS!

Hardware accelerated

• most Browsers have hardware acceleration turned on by default

3D with WebGL

Writing an own Engine?

Phaser

http://phaser.io

WebGL & Canvas, Preloader, Physics, Sprites, Groups, Animation, Particles,

Camera, Input, Sound, Tilemaps, Device Scaling, Plugin System

PhaserLIVE DEMOS!

Canvas on Desktop seems to be ready for Games!

And mobile?

HTML5 Canvas on mobile…

https://www.flickr.com/photos/elycefeliz/5000964458/

Why?• Memory limits • App Stores… :( • …

–Carsten Sandtner

„HTML5 Games für Web and Mobile"

But there is hope!

http://impactjs.com/ejecta

https://crosswalk-project.org/

Intel® XDKhttps://software.intel.com/de-de/intel-xdk

http://cocoon.io/

Example

Summary (so far)…

Summary

• Desktop Games ✓

• Mobile Games ✓

• „native“ ✓

• Cross Platform?

• Monetization?

Challenges

Screen Sizes

320x480

Phone

640x960

Phone

768x1024

Tablet

800x1280

Tablet

800x1280

Desktop

Android

Deal with resolutions

• dedicated assets

• logo_320.png vs. logo_640png

• Scaling

• Problem: aspect ratio.

• Problem: up scaling.

• Combination of both!Example: Landscape vs. Portrait

Scaling assets

down

up

Assets: Kenney! http://www.kenney.nl

There is more than screen sizes!

Performance

https://www.flickr.com/photos/chatterstone/16321128021/

Monetization• App Stores!

• IAP

• Cordova and CocoonJS have plugins for: Google Play, iTunes, …

• Advertisement

• CocoonJS has Plugins

• Add your own implementation

Some Examples!

http://playcanv.as/p/JtL2iqIH

http://www.freeriderhd.com/

Links, engines etc.

http://phaser.io

http://gamemechanicexplorer.com/

http://www.html5gamedevs.com/

http://html5gameengine.com/

http://opengameart.org/

http://orteil.dashnet.org/gamegen

http://gamedevjsweekly.com/

http://gameprogrammingpatterns.com/contents.html

http://cocoon.io/

Twitter: @casarockhttp://casarock.github.io