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

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

  • 271