How Not to Build a Video Game

Rate this content
Bookmark
The talk showcases the development of Athena Crisis, a modern retro 2D turn-based strategy game built using JavaScript, React, and CSS. The game runs inside a presentation created with MDX, a React-based slide deck tool, and features instant load times and smooth transitions. The speaker emphasizes the use of persistent data structures like Immutable.js for efficient game state management. They also highlight the game’s accessibility features, including support for dark mode and various levels of color blindness. The AI for the game was built using functional programming principles, making it 20 times faster. Performance challenges were addressed by using tools like FPS Meter and optimizing CSS properties. The game also includes a map editor for creating new maps and can be translated into any language. The speaker has announced the formation of Nakazawa Tech, an indie game studio that will publish Athena Crisis next year.

From Author:

In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

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

Watch video on a separate page

FAQ

The video game is called 'Athena Crisis.' It is a modern retro 2D turn-based strategy game built using JavaScript, React, and CSS.

Athena Crisis was built using JavaScript, React, CSS, Vite, PMPM, TypeScript, Relay, Emotion, Prisma, GraphQL, GraphQL Pothos, Socket.io, and persistent data structures.

The primary goal of the presentation is to entertain and inspire the audience to think about domain-specific solutions and explore different ways to use familiar technologies.

The speaker uses a test infrastructure that captures game states as screenshots and matches them against image snapshots. This helps verify that the game state is correct at each stage.

The game engine for Athena Crisis was built from scratch by the speaker using only tools and technologies they fully understand, such as JavaScript, React, and CSS.

Athena Crisis can be translated into any language and run inside the slide deck in the translated language, making it accessible to a wider audience.

One performance challenge is that using certain CSS properties, like drop shadows and filters, can significantly reduce the game's frame rate, especially if not optimized correctly.

The game state that players are not allowed to see is managed by the server. The server decides what each client is allowed to see, ensuring fair gameplay.

The speaker chose web technologies like JavaScript, React, and CSS because they provide instant load times, smooth transitions, and great support for accessibility and online play.

The speaker started developing Athena Crisis as a meditation project to balance their day and see how far they could go using familiar web technologies.

Christoph Nakazawa
Christoph Nakazawa
32 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Transcription

Available in Español: Cómo no construir un videojuego

1. Introduction to the Talk

Short description:

I'm just here to do another raffle. This talk is a bit different. I'm going to show you technologies that you're using every day in your job as front end engineers, but in a context that you probably have never seen them used in. Let me just show you the video game that I'm building. It's called Athena Crisis. It's a modern retro 2D turn-based strategy game. This game is running inside of the slide deck which is written using MDX which is a fork of React. Once I realize I can put one version of the game into my presentation, I could also put three in it. And I can have the AI playing against me and this is like sitting in Central Park in New York and playing speed chess, playing multiple games.

I'm just here to do another raffle. Do you want to do another raffle? No.

Hey, this conference was amazing. There's so many people behind the stage, everywhere doing the MCs, there are the organizers, there's So let's just give a round of applause for all of the folks that made this happen.

So this talk is a bit different. I just want you guys all to relax, and I just want to entertain you. I'm not here to sell anything, I'm not here to convince you that what I'm doing is better than what everyone else is doing. Quite the opposite. Most likely, what I'm doing is much worse than what you should be doing. Today I'm going to talk about how not to build a video game and I'm going to show you technologies that you're using every day in your job as front end engineers, but in a context that you probably have never seen them used in. And I'm hoping to inspire you to do things maybe differently. To think more about domain specific solutions instead of building another 11 step form.

Let me just show you the video game that I'm building. Here's a video. It's called Athena Crisis. It's a modern retro 2D turn-based strategy game. Actually wait a minute, something's missing here. I think music is missing. Let me pull up VS code. Let me get the music in. You got music? No? Oh... Yeah, that's Athena Crisis. I guess you noticed this is all React. And it's not just React, this game is running inside of the slide deck which is written using MDX which is a fork of React. Sorry, which is a fork of Markdown which allows you to put React components into your presentations. So I have the game running inside of a slide deck which is all written in JavaScript, React and CSS. Let me just get rid of VS code again. Once I realize I can put one version of the game into my presentation, I could also put three in it. And I can have the AI playing against me and this is like sitting in Central Park in New York and playing speed chess, playing multiple games. So I can wait here until the AI is done.

2. Building and Testing the Game

Short description:

Let's just wait for a second. The AI is trying to beat me. Now I can jump in here and play the game simultaneously on all maps. I can also translate the game into any language and have it running in the presentation. Additionally, I can put the map editor into the presentation, allowing me to create new maps. The game is built from scratch using JavaScript, React, and CSS, along with various other tools. Testing the game was important to ensure it worked properly, and I developed a method to render the game state to text. This allowed for easier verification and prevented issues when making changes.

Let's just wait for a second. The AI is trying to beat me. Now I can jump in here and I can actually just go and play the game simultaneously on all of these maps. Then I realized I can also just translate this game into any language and have the game running inside this light deck in any language that the game is translated in. Even more, I realized, let's do a different one, I realized I can put the map editor that I built into the presentation. So I can just jump in here and make a new map. And there's only two constraints here to make all of this work, to make all the maps automatically beautiful. One is, can you place this tile at this location? And two, depending on the tiles around me, what should this one look like?

So for example, you can put any combination of trees together. You can go into the scenario editor, you can pick the character you like, pick their profile picture, say. And then from there, you can jump directly into the game and test out the messages in the campaign mode. So this is Athena Crisis. Everything you've seen is built from scratch with JavaScript, React, and CSS. The stack is using Vite, PMPM, TypeScript, React, Relay, Emotion, Prisma, GraphQL, GraphQL Pothos, Socket.io, and persistent data structures.

I wrote a blog post. I took out the core pieces that I'm opinionated about, like Vite, PMPM, TypeScript, put them into a template, and explained how to put together a really fast front-end experience. The constraint I put on myself when I started this is I'm only allowed to use tools on the layer directly below me that I understand so much that I could build a very basic, compatible version of it if I had to. I don't understand game engines, so the only way for me to use one was to build one by myself. I've worked on test infrastructure in the past. How do you test a video game? If you're playing video games, they're triple A games, and they're released, the first thing you do is you download a 10 gigabyte patch because, since the time they shipped it and the time they released it, they found so many issues they had to patch it. There are not many tests, and then you start playing it and there's so many bugs, so many visual issues, all sorts of problems, right? And so, I like testing. I don't write a lot of tests, but I wanted to figure out how can I make sure when I'm changing the game, I'm not breaking something all the time. And we've recently exhibited this game in Tokyo at a game show and had people playing at two stations from 10 AM to 6 PM throughout the day and we didn't experience a single gameplay bug. Not saying there are no bugs, but on that day nobody found one. But anyway, what you do, you have this video game and you have game states. How do you verify that it works? You could write tests to verify, is this thing here, is this thing there? Does this one have a health of 50 and this one a health of 77? And then you change the balancing and everything just breaks, right? Or you change the graphics and stuff breaks. And so I thought, okay, maybe I'll just render my game state to text. I make a gest snapshot or something like that and I make a renderer that takes my game state and turns it into text. Then you end up having two implementations of your renderer. One for the actual game and one for your test. And if you're using text to represent your map state, you realize that it kind of sucks because it gets out of sync.

QnA

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

React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

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.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
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.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.