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

The future of games is written in React
By Opher Vishnia
The future of games is written in React
- 96