How Not to Build a Video Game

Rate this content
Bookmark

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.

Christoph Nakazawa
Christoph Nakazawa
32 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
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
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
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
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

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
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.
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.
0 To Auth In An Hour For Your JavaScript App
JSNation 2023JSNation 2023
57 min
0 To Auth In An Hour For Your JavaScript App
WorkshopFree
Asaf Shen
Asaf Shen
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.js backend + Vanilla JS frontend) to authenticate users with One Time Passwords (email) and OAuth, including:
- User authentication – Managing user interactions, returning session / refresh JWTs- Session management and validation – Storing the session securely for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.