Throw away your Xbox
The future of games
is written in rEACT
@OpherV
ReactNext
June 2023
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 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
-
CAT VIDEOS
-
RICKROLLING
-
CHATGPT ABUSE and more!
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
2023 - 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:
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
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
PERFORMANCE
Web Workers
Networking
Sockets / WebRTC / ~WebTransport
RENDERING
Canvas / WebGL / WebGPU
PERSISTENCY
Web Storage API / IndexedDB
Input
Gamepad API
Offline
Service Workers
LOgic & UPDATES
React / Svelte/ Qwik
"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"
they run #!@$^
everywhere
Why web games?
Released 1989 for the Apple II
Groundbreaking TECH
BRILLIANT GAME. EVEN TODAY
CRINGEY BOX ART
Playable in the browser
Prince.JS / Ultrabolido & Oliver Klemenz
Q1K3 / Dominic Szablewski
Are these web games? 🤔
Isn't this a TALK ABOUT REACT?
Wait, uh -
What's a game?
Input
Game Loop
OUtput
(Keyboard, mouse, gamepad, motion)
(Video / Audio)
(logic, state, score, physics, collisions)
INPUT LOGIC OUTPUT!
React is brilliant at
Audio with useSound
import useSound from 'use-sound';
import boopSfx from '../../sounds/boop.mp3';
const BoopButton = () => {
const [play] = useSound(boopSfx);
return <button onClick={play}>Boop!</button>;
};https://github.com/joshwcomeau/use-sound
Renderers
A Common Renderer:
HTML + CSS
Athena Crisis / Christoph Nakazawa
How NOT to build a video game - Reactathon 2023 / Christoph Nakazawa
But react isn't limited to dom rendering..
import { React } from "react";
import { createRoot } from "react-dom/client";2D Rendering Engine
3D Rendering Engines
Option 2
HTML + CSS for UI
2D/3D Renderer for game
Summoners.io / Stephen Haney
Summoners.io / Stephen Haney
THREEJS
React-three-fiber
+
=
Racing Game / Paul Henschel & co
Ecosystem
R3f as an extensive
COMPONENT LIBS
DREI
POSTPROCESSING
GLTFJSX
TRIPLEX
Postprocessing Effects / PMND.rs
SHOE CONFIGURATOR / PMND.rs
Triplex
Input
Game Loop
OUtput
(Video / Audio)
Game Engine
Game EnGINes
WEB Game Engines
Phaser demo: Evolb / Opher Vishnia
Vampire Survivors / Luca Galante
WEB Game Engines
Issue #1
Technology
- Performance
- Rendering
- Networking
Now what?
I made a web game!
Issue #2 Distribution
Where TO
START?
webgamedev.com
webgamedev.com
22 - 28 January 2024
Sept 29th -Oct 2nd 2023
22 - 28 January 2024
START WITH 2D
NOT 3d
MY TIP:
Web Games are amazing!
GO MAKE THEM
Thanks!
@OpherV