- HTML5 Canvas allows for drawing and animation capabilities for building games directly in browsers - It has been standardized and is supported across browsers, enabling cross-platform games - While desktop games work well with HTML5 Canvas, mobile games face challenges like lower memory limits, different screen sizes and resolutions, and performance issues - Frameworks like Phaser, Impact and libraries like CocoonJS aim to address these challenges and allow building games using HTML5 that run cross-platform on desktop and mobile browsers

1. HTML5 Games
for web and mobile!
@casarock

2. It’s me, Carsten!
Head of Development @ //mediaman
Ex-Zynga
Loves everything about Web and open
standards!
Twitter: @casarock

3. HTML5 Games?

4. HTML5 Canvas
https://www.flickr.com/photos/helico/416249293/

5. 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!

6. 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

7. Ok, but Games?

8. 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)

9. Simple animation
LIVE DEMOS!

11. Hardware
accelerated
• most Browsers have hardware
acceleration turned on by default
3D with WebGL

13. Writing an own Engine?

17. Phaser
http://phaser.io
WebGL & Canvas, Preloader, Physics,
Sprites, Groups, Animation, Particles,
Camera, Input, Sound, Tilemaps,
Device Scaling, Plugin System

18. Phaser
LIVE DEMOS!

19. Canvas on Desktop seems to be
ready for Games!

20. And mobile?

21. HTML5 Canvas on
mobile…
https://www.flickr.com/photos/elycefeliz/5000964458/

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

23. –Carsten Sandtner
„HTML5 Games für Web and Mobile"

24. But there is hope!

26. http://impactjs.com/ejecta

27. https://crosswalk-project.org/

28. Intel® XDK
https://software.intel.com/de-de/intel-xdk

29. http://cocoon.io/

32. Example

33. Summary (so far)…

34. Summary
• Desktop Games ✓
• Mobile Games ✓
• „native“ ✓
• Cross Platform?
• Monetization?

35. Challenges

36. Screen Sizes

37. 320x480
Phone

38. 640x960
Phone

39. 768x1024
Tablet

40. 800x1280
Tablet

41. 800x1280
Desktop

42. Android

43. 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

44. Scaling assets
down
up
Assets: Kenney! http://www.kenney.nl

45. There is more than screen sizes!

47. Performance

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

49. Monetization
• App Stores!
• IAP
• Cordova and CocoonJS have
plugins for: Google Play, iTunes, …
• Advertisement
• CocoonJS has Plugins
• Add your own implementation

50. Some Examples!

55. Links, engines etc.

56. http://phaser.io

57. http://gamemechanicexplorer.com/

58. http://www.html5gamedevs.com/

59. http://html5gameengine.com/
http://opengameart.org/
http://orteil.dashnet.org/gamegen
http://gamedevjsweekly.com/
http://gameprogrammingpatterns.com/contents.html
http://cocoon.io/

60. Twitter: @casarock
http://casarock.github.io