Evolution of
HTML5 games

Gamedev.js

Andrzej Mazur • @end3r • Enclave Games
Gamedev.js Warsaw #15, Poland, February 11th 2020

2010 vs 2020

2011: onGameStart, Warsaw

2012: Is HTML5 ready for gaming?

Poor Canvas performance

Poor performance

Way worse than native.

Crappy (or missing) audio

No audio

Play/sync issues, too many formats.

(Not) working offline

Offline

Web Storage, AppCache, IndexedDB, Web SQL.

Drafts of Web APIs

Web APIs

Gamepad, Pointer Lock, Fullscreen, etc...

Development tools

Dev environment

Borrowed from front-end.

No monetization

No monetization

Go native or go home.

2020: It works!

Good news

Performance improved

Audio working correctly

Audio

Offline with PWA

Offline with Service Workers

Web APIs support

Can I Use Gamepad

Lots of new tools

Phaser Editor

Lots of new tools

PlayCanvas Editor

Thousands of great games

js13kGames 2019: Bounce Back, [Swagshot], xx142-b2.exe

Technology is sufficient

But...

Discoverability

Monetization

Change of focus

  1. Licensing games
  2. Subscriptions
  3. Advert revenue share

Theft

  1. Protecting the assets
  2. Being cloned

Bright future

Technology • Discoverability • Monetization

2019: W3C workshop, Redmond

Improving technology

PWA

Counter

The death of PWAs

...wait, what?

RWD

Responsive Web Design

WebXR: MoonRider

Moon Rider

WebAssembly: Fluids

Fluids

WebGPU: Cubes

WebGPU

Everything

is a remix

Hungry Fridge on mobile

Hungry Fridge mobile

Hungry Fridge with gamepad

Hungry Fridge gamepad

2D casual mobile game...

...offline PWA...

...in VR...

...with WebGPU...

...and WebAssembly...

...streaming from the cloud.

Improving discoverability

Revolutionzing monetization

Enclave Games ❤️
Web Monetization

Tweet

Cool, but how?

Monetized website


							<!DOCTYPE HTML>
							<html>
							<head>
							  <meta charset="utf-8">
							  <title>Flood Escape</title>
							  <meta name="monetization" content="your_payment_pointer">
							  // ...
							</head>

Real-time money transfer

Detecting active subscribers

Checking the state


							if(document.monetization && document.monetization.state === 'started') {
							  // do something
							}

Listening for an event


							function startEventHandler(event) {
							  // do something
							}
							document.monetization.addEventListener('monetizationstart', startEventHandler);

Extra content

Levels, points, coins, weapons, bonuses, etc...

No advertisements

  • Privacy issues
  • Spying on users
  • Selling data

Go Web or go home.

Full control

  "Classic" publisher Web Monetization
Implementation: Complicated, changing code 1 line of HTML + 2 lines of JS
Income: Waiting months for reports Instant, streamed in real time

Summary

  1. Technology is sufficient → can be improved
  2. Discoverability problems → indexing tools
  3. Monetization issues → Web Monetization API

Go out and

build the future

of the Web!

Thank you! Questions?

end3r.com/slides/gamedevjswaw15-evolution

Andrzej Mazur • @end3r • Enclave Games

Ender Efka @end3r