HTML5 Games for Web & Mobile
0 likes1,736 views
- 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
HTML5 Games for Web & Mobile
- 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?
- 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
- 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)
- 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
- 19. Canvas on Desktop seems to be ready for Games!
- 20. And mobile?
- 22. Why? • Memory limits • App Stores… :( • …
- 23. –Carsten Sandtner „HTML5 Games für Web and Mobile"
- 24. But there is hope!
- 32. Example
- 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
- 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!