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