Throw away your Xbox

The future of games

is written in JS

 

@OpherV

 

NDC London

Jan 23

Don't

 

Throw away

your xbox

 

Can we do better?

Web Games are amazing!


I'm Opher

Senior Developer

Hi!

Playing video games for way longer

Programming for 23+ years

Playing guitar for 20+ years

I DId all of this because I was 

 

LAZY

@opherv

"Some day I'll make my own game."

- YOU,

 

Random person sitting in the audience

Make Web
GAMES

*

TODAY!

The web wasn't made for

GAMES

...but neither was it made for

  • email

  • social networks

  • video

  • banking

Title Text

ESPORTS

GAMES ARE

BIG

What are web games?

 

1998:

  • New medium for self expression
  • Bypass established publishing process
  • Expose your work to millions
  • Neatly packaged tech

The golden age of flash games

2007: iPhone 

RIP FLASH

2005  -  Canvas

2010  -  Web Workers

2011  -  WebGL

2012  -  Web Audio

2013  -  Gamepad API

    ?     -  WebGPU

web games:

 

PLAYABLE IN THE BROWSER

IMPLEMENTED WITH STANDARDISED WEB TECH

Novel InteractiVITY

Why web games:

Google Racer

Tech

Canvas

Paper.JS

Web Audio API

Google Cloud Platform

Websockets

Rapid

PROTOTYPING

Why web games:

Summer Afternoon / Vicente Lucendo

Slow Roads / Anslo

EASIER TO MAKE

ACCESSIBLE

Why web games:

  • Semantic DOM
  • Alternative input methods
  • Assistive tech

The web Supports A11y:

If you follow a11y best practices, by default you're on your way to make your game accessible

It has "web"

In the name

Why web games:

JS runtime

TAB SPACE

Browser

OS

HARDWARE

Js is not

the obvious choice

  • SCRIPTING LANGUAGE uncompiled

  • Single Threaded

  • No direct MEMOry Access

  • NO HW/OS accesS

  • Browser implementation dependent

they run *EXPLETIVE*

everywhere

Why web games?

Released 1989 for the Apple II

The Modern BROWSER is X271 more powerful and capabale than the APPLE II

Prince.JS / Ultrabolido & Oliver Klemenz

Ninja vs Evilcorp / Rémi Vansteelandt

Q13J / Dominic Szablewski

HEXGL / Thibaut Despoulain

PERFORMANCE

Web Workers

Networking

Sockets / WebRTC / ~WebTransport

RENDERING

Canvas / WebGL / WebGPU

PERSISTENCY

Web Storage API / IndexedDB

Input

Gamepad API

Offline

Service Workers

"You can use a lot of different technologies to create something that doesn't really have a lot of value"

- Shigeru Miyamoto,

  producer, "1080° Snowboarding"

What's a game?

"A game is a series of interesting choices"

- Sid Meier

  Designer, Floyd of the Jungle

Input

Game Loop

OUtput

(Keyboard, mouse, gamepad, motion)

(Video / Audio)

Renderers

Rendering Engines

HTML + CSS

Candy Box 2/ Andrei Kvapil

Pure CSS Stack / Bence Szabo

The Mine / Jamie Coulter

Lighthouse / Ben Evans

2D Rendering Engines

3D Rendering Engines

THREEJS

ThREE-js-FIBER

THRELTE

Framework Bindings

Input

Game Loop

OUtput

(Video / Audio)

Game Engine

Game EnGINes

Game Engines

Phaser demo: Evolb / Opher Vishnia

Vampire Survivors / Luca Galante

Game Engines

Issue #1

Technology

  • Performance
  • Rendering
  • Networking

Are these web games? 🤔

 

Networking

13,759 km

299,792,458 m / s

Speed of Light

46 milliseconds

Tel Aviv - Melbourne

Round Trip Time (RTT) > 100ms

Tel Aviv

Melbourne

Request - 46ms

Reply - 46ms

TCP

Slower,

reliable transfers

 

UDP

Fast, non-guaranteed transfer ("best effort")

 

WebTransport

Now what?

I made a web game!

Issue #2 Distribution

but...

Can I make money with my game?

option 1:

Ads

option 2:

Donations

option 3:

Micropayments

Where TO

START?

webgamedev.com

webgamedev.com

"You might not think that programmers are artists, but programming is an extremely creative profession"

- John Romero , programmer

   HOW TO WEIGH AN ELEPHANT

START WITH 2D

NOT 3d

 

MY TIP:

Web Games are amazing!

GO MAKE THEM

Thanks!

@OpherV

 

Made with Slides.com