HTML5 game development

Why html5 games?!

  • Write Once, Deploy Anywhere
  • Share instantly using just a link
  • An open platform matched with W3C Specifications

3 approaches to html5 GAME development

  1. Treat it as a Web Platform
    - Developing in JS, deploy to Web: Phaser, Impact.js, Three.js
  2. Treat it as a Target Platform
    - Use a Game IDE or other language: Construct 2, Goo etc.
  3. Treat it as a Development Language
    - Develop in JS, deploy to Native: Ejecta, Ludei(CocoonJS)

Can you make money with html5 games?

  • Subscription Services
  • Multiplayer and Social
  • Native app wrapper for target platforms

Graphics

SVG

  • SVG objects are DOM objects
  • Interactive: easy to hang listeners on events 
  • Vector graphics: resolution independent scaling
  • Import/Export(Adobe AI etc.): its a graphics file format

CAnvas 2d & Webgl

  • WebGL based on OpenGL ES 2.0
  • WebGL is not for 3D only, 2D supported
  • Canvas 2D vs WebGL context APIs:
    • The 2D context provides a high level graphics api: primitives as circles, rectangles, lines etc.
    • The WebGL context is a low level graphics api: program level code + GPU shader code
  • Working in WebGL from scratch in project is challenging

Web workers

what can i use it for...

  • Load assets
  • Compute intensive processes
  • Keep game UI responsive
  • Increase app performance via Parallel Processing
  • Use adventage of multi-core processors

Web workers performance

  • Create a First Web Worker: depends on File size ~100ms
  • Create a Second Web Worker(same file): ~ < 1ms
  • Send Average sized Message: ~ < 1ms
  • Send Large sized Message: ~10ms

Multiplayer

Web sockets

  • Uses Web Socket protocol instead of HTTP
  • Full-duplex communication channel over TCP
  • Each message has only 2 bytes of overhead
  • No polling overhead

Offline storage

Local storage

  • Unstructured data with no transactions, indexing or searching
  • Poor performance on large datasets
  • Wide support on desktop and mobile browsers including IE8+
  • Size-limited — standard sizes are 5 or 10 MB per domain

websql

Deprecated by W3C
  • Relational DB on client -- SQLite syntax
  • Converting JS object to relational schema 
  • Supported in Safari, Chrome and Opera

indexeddb

  • W3C Standard
  • NoSQL
  • Fast indexing and search objects
  • Asynchronous API
  • Supported in IE10+, Chrome, FireFox and Opera
  • localForage — localStorage-backed fallback store for browsers with no IndexedDB or WebSQL support 

Web audio api

Why web audio api?

  • Flexible handling of channels in an audio stream, allowing them to be split and merged
  • Audio visualization
  • 3D spatialization
  • Filters and Effects
  • Integration with WebRTC

Device features

DEMOS


HTML5 Game Development

By creative4art

Made with Slides.com

HTML5 Game Development

  • 1,418

More from creative4art