Making an RPG with React + Redux
A few months ago, I set out to create an open-source, role-playing game in React with Redux, called React RPG. Now that I’ve released the first version, I want to discuss my motivation, goals, intentions, the things I learned, and some pros and cons of making a game with React.
Motivation
For as long as I can remember, I’ve wanted to make a game. I’ve also been trying to contribute to more open-source projects recently. With these ideas in mind, I felt that my next side project needed to be my own open-source game. Around the same time, I made a Pi Linux tablet and one of the fun games (that could actually run on a 3 Pi A+) was The Battle for Wesnoth. I really like how the open-source community was able to help expand the game’s story line into something awesome and unique. Plus, the game is really fun too, if you like turn-based strategy.
So with the game idea in my head, I decided to see how viable it would be to leverage something that I already use (React) to create it. It would also give me a good opportunity to learn more about Redux. After only finding alternative JS game frameworks (phaser, pixi, etc.) I had almost given up. I wanted to either use React or go with something like Unity.
But that’s when I discovered this talk about Danger Crew, which is a Pokémon style strategy game, made with React and Redux. Throughout the talk, the developer goes over how they implemented the game features on a high level and encouraged others to make games with React/Redux. Ultimately, this talk gave me the final push to try it myself.
Goals and Intentions
After deciding to use React, I wanted the game mechanics to be simple to code. So I decided to make a turn-based dungeon-crawler. The player gets a bird’s eye view of the tile-based map and, of course, pixel graphics. I was definitely inspired by traditional rogue-likes, such as Pixel Dungeon. I liked how they’re known for short lifespans and a wide range of luck.
I wanted the project environment to be easy for other developers to work on, so I decided to use create-react-app. Using CRA saves us from having to deal with webpack. Because we’re using React, we deploy our game as a webpage, but it also makes shipping to mobile easy. I created a React Native app that is just a WebView with the game’s URL. Now when I push updates to the site, the mobile apps update without needing to publish a new app version. Pretty neat!
I also wanted to incentivize people to contribute by allowing them to see changes almost instantly, as well as beta test feature additions on staging.react-rpg.com before going live. To accomplish this, I set up a CodePipeline in AWS to automatically build and deploy code from the Master and Staging Github branches. Once the changes are merged in, they’re visible on the live URL within 5 minutes.
Learning
Building the game mechanics was by far the most time consuming and difficult part of this project. However, it came with a lot of learning opportunities.
Making the “fog of war” mechanic was a huge step forward in terms of gameplay, but I wasn’t sure how to approach it at first. In the end, I set an explored value on each tile and kept track of the current sight-box. Now, when the map renders each tile, it checks whether it should be unexplored, explored (but not in sight), or in the player’s sight.
To make the game have a Pokémon style viewport, instead of just showing the entire map (see image below), was the most daunting task ahead of me, but I had to do it if I wanted to ship to mobile. Luckily, it ended up being a lot easier than I imagined!
I re-watched that talk about Danger Crew and paid attention to his explanation of the viewport. After that, I knew what I needed to do. First, I had to make the player centered at all times. To do this, I just moved the map relative to the top left corner of the screen as the player moved. Then I drew a box around the player, which is size of the viewport. I gave that box `overflow: hidden` and was left with a nice viewport that “followed” the player around.
I also learned a lot about Redux and HTML/CSS while building this project. After initially posting the game on Twitter and Reddit, I got a lot of good feedback. Using the feedback, I made the HTML more semantic, made the CSS abide by BEM naming conventions, and I’ve refactored all of my Redux stores (thanks Mark Erickson for pointing out clonedeep). After that big refactor, a lot of weird side-effects were removed and everything became a lot more predictable and easy to work on.
Pros
- Hot-reloading for faster development (thanks React)
- Redux DevTools for time-travel debugging
- Distribute to web, mobile, and native desktop easily (thanks React Native and Electron)
- Save and load game state for basically free (thanks Redux)
- Quickly update the mobile app without submitting a new app version (thanks RN WebView)
Cons
React is not the best tool to build most games with, however, for the right type of game, it can work well and comes with some benefits. I enjoy working on the project and am constantly learning while I do it, so that makes it worthwhile for me. Thanks for reading!
If you would like to contribute, please head on over to the GitHub repo.
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
