Throw away your Xbox
The future of games
is written in JS
@OpherV
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681880/shutterstock_2137892767.jpg)
TEQNation 2023
May 23
Don't
Throw away
your xbox
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10156948/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155374/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155423/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155404/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589235/steambuy.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3961234/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/3589244/steam_update.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155389/bandicam_2023-01-20_17-43-51-730.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155397/bandicam_2023-01-20_17-46-44-617.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155863/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10155860/pasted-from-clipboard.png)
Can we do better?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681619/shutterstock_2139341659.jpg)
Web Games are amazing!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681671/shutterstock_2137410783.jpg)
I'm Opher
Senior Developer
Hi!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9184506/opher_tillian_music_video.jpg)
Playing video games for way longer
Programming for 23+ years
Playing guitar for 20+ years
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681840/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681843/a48d226a-1921-11e7-88b5-ab5c3741f097.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681846/ffc2d282-d6c4-11e6-97f0-0ada12c4fab7.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10150487/wsd.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681838/pasted-from-clipboard.png)
I DId all of this because I was
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681117/shutterstock_1929275258.jpg)
LAZY
@opherv
"Some day I'll make my own game."
- YOU,
Random person in the audience
Make Web
GAMES
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681619/shutterstock_2139341659.jpg)
*
TODAY!
The web wasn't made for
GAMES
...but neither was it made for
-
email
-
social networks
-
video
-
banking
-
CAT VIDEOS
-
RICKROLLING
-
CHATGPT ABUSE and more!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681117/shutterstock_1929275258.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9672025/pasted-from-clipboard.png)
Title Text
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9672004/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9672004/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9672052/https___d6c748xw2pzm8.cloudfront.net_prod_da46fbb0-7abf-11ec-8af8-99a3fc955139-standard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9685667/pasted-from-clipboard.png)
ESPORTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9685664/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9677998/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9677996/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10469754/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9677984/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10156946/IBM_Model_M.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10153539/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10156952/pasted-from-clipboard.png)
GAMES ARE
BIG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681619/shutterstock_2139341659.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9672021/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10469579/pasted-from-clipboard.png)
What are web games?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682686/shutterstock_2124596183.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9678016/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682620/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682621/pasted-from-clipboard.png)
1998:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10469632/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682617/flash.png)
- New medium for self expression
- Bypass established publishing process
- Expose your work to millions
- Neatly packaged tech
The golden age of flash games
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9685655/iphone.jpg)
2007: iPhone
RIP FLASH
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10161458/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
2005 - Canvas
2010 - Web Workers
2011 - WebGL
2012 - Web Audio
2013 - Gamepad API
2023 - WebGPU
web games:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682686/shutterstock_2124596183.jpg)
PLAYABLE IN THE BROWSER
IMPLEMENTED WITH STANDARDISED WEB TECH
Novel InteractiVITY
Why web games:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681579/shutterstock_2139341659.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9676935/pasted-from-clipboard.png)
Google Racer
Tech
Canvas
Paper.JS
Web Audio API
Google Cloud Platform
Websockets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681117/shutterstock_1929275258.jpg)
Rapid
PROTOTYPING
Why web games:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681579/shutterstock_2139341659.jpg)
Summer Afternoon / Vicente Lucendo
Slow Roads / Anslo
EASIER TO MAKE
ACCESSIBLE
Why web games:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681579/shutterstock_2139341659.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
- 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:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681579/shutterstock_2139341659.jpg)
JS runtime
TAB SPACE
Browser
OS
HARDWARE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
Js is not
the obvious choice
-
SCRIPTING LANGUAGE uncompiled
-
Single Threaded
-
No direct MEMOry Access
-
NO HW/OS accesS
-
Browser implementation dependent
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681117/shutterstock_1929275258.jpg)
they run #!@$^
everywhere
Why web games?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681579/shutterstock_2139341659.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10144115/pasted-from-clipboard.png)
Released 1989 for the Apple II
The Modern BROWSER is X271 more powerful and capabale than the APPLE II
Prince.JS / Ultrabolido & Oliver Klemenz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9680708/plaything.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681244/pasted-from-clipboard.png)
Ninja vs Evilcorp / Rémi Vansteelandt
Q13J / Dominic Szablewski
HEXGL / Thibaut Despoulain
PERFORMANCE
Web Workers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
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,
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10150009/003-removebg-preview.png)
producer, "1080° Snowboarding"
What's a game?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682686/shutterstock_2124596183.jpg)
"A game is a series of interesting choices"
- Sid Meier
Designer, Floyd of the Jungle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10150019/Sid-Meier-Civilization-removebg-preview.png)
Input
Game Loop
OUtput
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
(Keyboard, mouse, gamepad, motion)
(Video / Audio)
Renderers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681671/shutterstock_2137410783.jpg)
Rendering Engines
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
HTML + CSS
Candy Box 2/ Andrei Kvapil
Pure CSS Stack / Bence Szabo
The Mine / Jamie Coulter
Lighthouse / Ben Evans
2D Rendering Engines
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
3D Rendering Engines
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9678036/three-js-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
THREEJS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10149634/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9677143/1200px-WebGL_Logo.svg_1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681117/shutterstock_1929275258.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681335/pasted-from-clipboard.png)
ThREE-js-FIBER
THRELTE
Framework Bindings
Input
Game Loop
OUtput
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
(Video / Audio)
Game Engine
Game EnGINes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681671/shutterstock_2137410783.jpg)
WEB Game Engines
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9673249/img.png)
Phaser demo: Evolb / Opher Vishnia
Vampire Survivors / Luca Galante
WEB Game Engines
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681127/shutterstock_2137410779.jpg)
Issue #1
Technology
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681099/shutterstock_1997795690.jpg)
- Performance
- Rendering
- Networking
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682676/1200px-UE_Logo_Black_Centered.svg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682677/Unity-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9676959/pasted-from-clipboard.png)
Are these web games? 🤔
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682686/shutterstock_2124596183.jpg)
Now what?
I made a web game!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681579/shutterstock_2139341659.jpg)
Issue #2 Distribution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681099/shutterstock_1997795690.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681716/New_Steam_Logo_with_name.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681720/app-store-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681724/png-transparent-google-play-logo-google-play-android-app-store-play-now-button-text-label-logo-300x300.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681466/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681738/pasted-from-clipboard.png)
but...
Can I make money with my game?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681099/shutterstock_1997795690.jpg)
option 1:
Ads
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681747/shutterstock_2171003819.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9679612/pasted-from-clipboard.png)
option 2:
Donations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681747/shutterstock_2171003819.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9685975/pasted-from-clipboard.png)
option 3:
Micropayments
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681747/shutterstock_2171003819.jpg)
Where TO
START?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681671/shutterstock_2137410783.jpg)
webgamedev.com
webgamedev.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10153393/GlobalGameJamLogo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10153397/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682715/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9682719/pasted-from-clipboard.png)
"You might not think that programmers are artists, but programming is an extremely creative profession"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/10150043/john_romero-removebg-preview.png)
- John Romero , programmer
HOW TO WEIGH AN ELEPHANT
START WITH 2D
NOT 3d
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681099/shutterstock_1997795690.jpg)
MY TIP:
Web Games are amazing!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681671/shutterstock_2137410783.jpg)
GO MAKE THEM
Thanks!
@OpherV
![](https://s3.amazonaws.com/media-p.slid.es/uploads/452773/images/9681880/shutterstock_2137892767.jpg)
The future of games is written in JS
By Opher Vishnia
The future of games is written in JS
- 254