Log in
React Conferences
React Day Berlin 2023React Day Berlin 2023
Talk Videos
EN

Video: Multiplayer Games with React Three Fiber and WebSockets

Maya Nedeljković Batić
Maya Nedeljković Batić
Linear
Rate this content
Bookmark
Slides
Read FAQ and transcription
game developmentreact websocketsreact games
Video Summary and Transcription
The video explores the creation of a multiplayer game using React and WebSockets, focusing on the game development process. It highlights the use of React Three Fiber, which facilitates the integration of 3D graphics in web applications, making it a suitable choice for developers familiar with React. The game, React Battleship, uses a monorepo structure with Node.js and Fastify for the server side, and WebSockets for real-time communication. This setup ensures seamless interaction between players, with the server handling game logic and state. Mobile compatibility is emphasized, allowing players to engage without authentication. The video also touches on the use of Blender for 3D models and the importance of animation techniques, such as floating ships and cannonball firing, to enhance the user experience. React context is used for state management, syncing player actions across different screens. The speaker shares insights on using generative AI tools for design and mentions resources like Sketchfab and BlendSwap for acquiring 3D models. The talk also covers the challenges of latency and the importance of reliable message delivery in multiplayer games. The development phases are outlined, from initial design to final production, ensuring the game is both functional and appealing.

This talk has been presented at React Day Berlin 2023, check out the latest edition of this React Conference.

Available in Español: Juegos multijugador con React Three Fiber y WebSockets

FAQ

The main topic of the talk is making multiplayer games for the browser using WebSockets and React.

Making a game in React can make game development more accessible to developers who are already familiar with React. It also makes the game more accessible to players, as it can be played directly in a web browser without needing to install anything.

The four distinct phases of game development are: 1) Design phase, 2) Prototype phase, 3) Block-out phase, and 4) Production phase.

A Game Design Document (GDD) is a detailed document that outlines the design, mechanics, and other important aspects of a game. It can be as short as a page or span hundreds of pages.

The server-client architecture for React Battleship involves a Node.js server using Fastify and Socket.io for WebSocket connections. The clients are React applications that connect to the server, which handles the game logic and state.

React 3 Fiber is a React renderer for 3D graphics using Three.js. It allows developers to write 3D scenes using React components. In React Battleship, it is used to create and manage 3D objects and scenes.

React Battleship is a multiplayer game with the classic mechanics of Battleship, designed to be played in a web browser using React and WebSockets.

Player interactions and state updates are managed through WebSocket connections. The server sends updates to the clients about the game state and player actions, while the clients send their actions back to the server.

Recommended resources include Wawa Sanjay's React 3 Fiber Ultimate Guide, Bruno Simons' 3 JS Journey, and the Web Game Dev newsletter and Discord server.

The speaker is Maya, an art school dropout who taught herself to program and has worked in several software engineering jobs. She currently works at Linear and has a degree in game development.

Video transcription and chapters available for users with access.
Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
Watch video: Optimizing HTML5 Games: 10 Years of Learnings
Will Eastcott
Will Eastcott
CEO & co-founder of PlayCanvas
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
game developmentperformancegame engine
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
David Rousset
David Rousset
Senior Program Manager @ Microsoft. Co-creator of Babylon.js.
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
game developmentVR and AR
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Frank Force
Frank Force
Game Designer, Software Engineer
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
game developmentgame engine
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Top Content
Florin Ciornei
Florin Ciornei
CrazyGames
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
game developmentperformancereact unity webglwebgl
How Not to Build a Video Game
React Summit 2023React Summit 2023
31 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
Christoph Nakazawa
Christoph Nakazawa
CEO at Nakazawa Tech
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
game developmentbuilders and founderscase study
Increase the Performance of Your Games using Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Increase the Performance of Your Games using Canvas
Ilia Chernetskii
Ilia Chernetskii
Evolution
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.
game development

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
game developmentwebgl
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
game developmentgame engine
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
game development3d
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.
game developmentgame engine