How to Build a Multiplayer Web App [Code Lab with Mad Genius Escapes]

The hardest part of a project is often just getting started. In my interview with Peter Lewis, co-creator of The Truth About Edith and Boobano Farm, he ended with some advice to fellow creators: even as no-code platforms for multiplayer escape games become increasingly available, there is still much to be gained from building this sort of interactivity from scratch. Not only will you learn something new, you’ll also inject your personality into the game through the hands-on development process.

With this in mind, Peter and I put together this step-by-step walkthrough for coding a simple web app which uses the same tech stack as The Truth About Edith and Boobano Farm. If you have some coding experience and want to learn about developing collaborative or asymmetrical web-based gameplay, this code lab is for you. 

We hope this serves as a jumping-off point for you to build your own games, and we’d love to hear about your future creations!

Digital Boobano Farm jigsaw puzzle scrambled.

Goals

  • Make a simple web app which allows multiple players to solve a jigsaw together
  • Learn how to use Socket.IO and Node.js to implement server-synced interactions

Prerequisites

Stage 0: Getting started

  1. Make a folder for the app, and cd there. Add two new empty files called index.html and server.js.
  2. Initialize a Node package for the folder with npm init. You can hit “enter” to accept the default options. When asked for an “entry point”, make sure server.js is specified.
  3. Install the dependencies needed for this app. You’ll see how these are used later.
npm install express
npm install socket.io
  1. Initialize the folder as a Github repository. This allows us to directly deploy to Heroku. If this is your first time using Git, you’ll be prompted to configure your GitHub email and username.
git init
git add .
git commit -m "first commit"
  1. Create a new empty Heroku app with heroku create <projectname>. If this is your first time using Heroku, you’ll be prompted to log in here.
  2. Deploy our (empty) app to Heroku to check that all this initial config worked properly with git push heroku master. If this is your first time running this, you may be prompted to log into your Heroku account online.

Your app will now be available at <projectname>.herokuapp.com. However, you’ll just get an “Application error” page since index.html is currently empty. (You’ll be able to redeploy the app anytime later once we’ve started building it!)

Stage 1: App structure and puzzle piece initialization

  1. In server.js, add the following boilerplate code setting up Express (a helpful framework for Node.js) and Socket.IO.
'use strict';
const express = require('express');
const socketIO = require('socket.io');
const PORT = process.env.PORT || 3000;
const INDEX = __dirname + '/index.html';
const server = express();
server.get('/', (req, res) => {
    res.sendFile(INDEX);
});
server.use(express.static('public'));
const listener = server.listen(PORT, () => console.log('Listening on ${PORT}'));
const io = socketIO(listener, {
    pingTimeout: 120000
});
  1. In server.js, add on the following code. We’ll store an array of the coordinates of each piece server-side, initialized randomly within a 600px x 600px canvas. Then using socket.emit(), we’ll send this position data to a client-side function which we’ll call placePieces().
var piecePositions = [];
for(var i = 0; i < 20; i++){
    piecePositions.push([600 * Math.random(), 600 * Math.random()]);
}
io.on('connection', (socket) => {    // Any functions we want to listen for go in here
    socket.emit('placePieces', piecePositions);
});
  1. Now let’s define that client-side function placePieces. In index.html, add a div playArea as a container for all the jigsaw pieces. Then, add some JavaScript which places the pieces using the position data from the server. Once we add in the ability to move the pieces around, this function will update the piece locations essentially continuously.

For the purposes of this demo, Mad Genius Escapes has provided a set of 20 Boobano Farm-themed puzzle pieces, hosted on their server and named “piece1” through “piece20”. To ensure the correct sizing, we also explicitly set the correct width for each piece. (There are more elegant ways to do this if we were actually building a jigsaw app.)

<!DOCTYPE html>
<html>
<body>
<div id='playArea'></div>
<script src="/socket.io/socket.io.js"></script>

<script>
let socket = io();
var pieces = [];
const sizes = [150, 221, 209, 316, 217, 138, 233, 234, 318, 183, 145, 216, 290, 257, 181, 151, 213, 279, 270, 194];

function placePieces(positions){
    var thisPiece;
    let playArea = document.getElementById('playArea');
    for(var i = 0; i < 20; i++){
        thisPiece = document.createElement('img');
        thisPiece.src = 'https://v-escape.com/img/demo/piece' + (i + 1) + '.png';
        thisPiece.style.left = positions[i][0] + 'px';
        thisPiece.style.top = positions[i][1] + 'px';
        thisPiece.style.width = sizes[i] + 'px';
        thisPiece.style.height = 'auto';
        thisPiece.classList.add('piece');
        thisPiece.pieceNum = i;
        pieces.push(thisPiece);
        playArea.appendChild(thisPiece);
    }
}

socket.on('placePieces', placePieces);
</script>

</body>
</html>
  1. In index.html, add some styling to get rid of the default image drag effect, change our mouse to a pointer hand when hovering over a piece, and set a transformation so we’ll eventually be dragging from the center of each piece.
<style>
.piece {
    position: absolute;
    cursor: pointer;
    transform: translate(-50%, -50%);
}
img {
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
</style>

Now is a great time to check in on what this code is doing. After pushing the new code to Heroku, you should see the 20 pieces randomly scattered around the screen. Next up: making the pieces moveable!

git add .
git commit -m "place pieces"
git push heroku master

Stage 2: Make the pieces moveable

  1. In index.html, add the following functions in the script block. We’ll use selectedPiece to keep track of which piece, if any, is currently being clicked by the user. This is set back to null onMouseUp. In onMouseMove(), if the user has a piece selected, we send the coordinates for that piece back to the server.
var selectedPiece = null;

function pieceClicked(){
 selectedPiece = this.pieceNum;
}

function onMouseMove(e){
 if(selectedPiece == null)
 return;
 socket.emit('movePiece', [selectedPiece, e.clientX, e.clientY])
}

function onMouseUp(e){
 selectedPiece = null;
}

Now let’s use these new functions. In index.html, add the following 3 lines to the existing placePieces() function:

function placePieces(positions){
...
    for(var i = 0; i < 20; i++){
        ...
        thisPiece.onmousedown = pieceClicked;
        ...
    }
    document.addEventListener('mouseup', onMouseUp);
    document.addEventListener('mousemove', onMouseMove);
}
  1. Socket.IO allows for ongoing two-way communication between servers and clients. For placePieces, we have a socket.emit() on the server and a socket.on() on the client, sending data from the server which is received by each connected client.

For movePiece(), we’ll be sharing data in both directions, from the client to the server and back from the server to the client.

We already added socket.emit('movePiece', [selectedPiece, e.clientX, e.clientY]) in onMouseMove. Add the following code in server.js to receive this position data and update the piecePositions array for that piece. Then, we’ll send the updated position data back to the client.

io.on('connection', (socket) => {
    socket.emit('placePieces', piecePositions);

    socket.on('movePiece', (data) => {
        let pieceNum = data[0];
        let piecePos = piecePositions[pieceNum];
        piecePos[0] = data[1];
        piecePos[1] = data[2];
        io.emit('movePiece', data);
    });
});

Back in index.html, we’ll receive this data and update the position of the moved piece accordingly.

socket.on('movePiece', movePiece);

function movePiece(data){
    let piece = pieces[data[0]];
    piece.style.left = data[1] + 'px';
    piece.style.top = data[2] + 'px';
}

While this back-and-forth would be redundant if there were just one client connected to our app, it suddenly becomes really powerful when multiple clients are connected. Each client sends data on which piece they’re moving, and the server sends updated piece positions aggregated from all the clients back to each client. Thus, in real time each client sees their own pieces moving as well as any pieces that are being moved by other clients.

To test the final version of the app, git commit your most recent changes and git push heroku master.

What’s next?

This code lab demonstrates how to use Socket.IO, not how to make the perfect jigsaw app. The jigsaw app we built is admittedly quite janky, and some simple improvements might include:

  • Add a “claimed” property to pieces so multiple players can’t try to move the same piece at the same time.
  • Snap together correctly placed pieces.
  • Drag pieces from the actual mouse position rather than the center of the piece.

More importantly, the simple code pattern you’ve now seen can be used to share any sort of data between clients and a server. Players might all see the same interface and have the same controls, as in this jigsaw example, or players might each have a different view and different controls for asymmetrical interactions. To accomplish this, we could give players unique login codenames, as in The Truth About Edith, or dynamically assign players roles based on the order in which they arrive on a page.

Players might each have their own button, control their own character, or be presented with a unique subset of puzzle data. The possible interactions you can build using Socket.IO are endless, and we look forward to seeing what you create on your own. This cheat sheet for Socket.IO emits is useful, and there are numerous other tutorials and resources available online.

If you’ve made it this far, you probably like learning about escape game design and technology. We invite you to the Reality Escape Convention, August 22-23, 2021. This digital event brings the global escape room player and creator communities together for 2 days of connection, learning, and sharing.

Creating a Remote Escape Room with Asymmetrical Gameplay: Interview with Mad Genius Escapes

The Truth About Edith was one of the first online escape games I played during lockdown last May, and a year and a hundred-odd remote escape games later, it’s still the game I most frequently recommend. For my team and so many others, this game facilitated meaningful, joyful, laughter-filled remote connection early on in the pandemic, at a time when we were all mourning the recent closure of escape rooms globally. From a design standpoint, I consider this game to be groundbreaking in demonstrating how caringly home-brewed artwork, tech, and acting can lead to a compelling remote experience.

I hopped on a Zoom with Peter Lewis, the co-owner of Mad Genius Escapes in Portland, OR, to dive into his experience creating The Truth About Edith and Boobano Farm. In the last section of the interview, we discuss the tech behind building web apps with asymmetrical gameplay.

Additionally, here is the Code Lab that accompanies this interview. Using the same tech stack as Edith and Boobano, you’ll learn how to build a simple web app that allows players on multiple devices to solve a jigsaw together.

Note: This interview contains light spoilers for The Truth About Edith and Boobano Farm.

Edith up close to the camera on a Zoom call.
The Truth About Edith

You released The Truth About Edith very early on in the pandemic. What were your goals in creating the game?

We realized that if we designed it right, it could be played by anyone, anywhere. We didn’t know if it would end up being fun. We didn’t know what a good price point would be. But at that point, it’s like, the world is falling apart and we just had to do something, and it did seem like there was a lot of potential.

Edith seems like it’d be fun and accessible to a very broad audience. Is there anyone for whom the game hasn’t landed?

One lady signed in and immediately said, “I didn’t know this was going to be on Zoom. I’m not doing this.” And we’re like, “oh what, really?” And she’s like, “I’m not paying to be in a Zoom for an hour.” She demanded a refund, which we gave her, and then she left a one star review that said “this is just on Zoom.”

That’s one person out of everybody, and everyone else has been lovely! Young people have played it. Old people have played it. People seem to get it really well. That’s where it helps to have a clue master. Our clue masters are probably 25 or 30% tech support at this point. Refresh Chrome, try this, try that, because people have problems with tech for sure.

How did you develop the asymmetrical gameplay in Edith?

The asymmetrical aspect was going to make it unique and different and fun off the bat. When building The Truth About Edith, we played a lot of Keep Talking and Nobody Explodes. That was the first asymmetrical game I’ve played and I loved it, so we knew that style of gameplay was fun and the way we ended up setting up our online framework, it was included.

When somebody logs in, they’re sent a role. You’re looking around for some information – that’s great, that’s a puzzle. But you’re looking around for some information and everyone has a different control, that’s something else. It requires communication and teamwork, which is what you lose when you go virtual.

Unfortunately, there are times when the gameplay can really hinge on one person, and it’s completely random. If you get the wrong person, you’re a little screwed…. But again, the clue master can just fill in. Over time, as stuff has popped up, I’ve given extra abilities to the clue masters in their interface.

How did the actor interactions in Edith develop?

The game used to have three different characters, and it was just too long. So, we worked with one of my friends who’s a story consultant and pared it down, and it made the whole narrative a lot clearer. We realized that by taking out the first two characters, it makes the point where you actually meet Edith more exciting and more fun.

Plus, it’s so much easier for us. When we started, one person would be the clue master and two people would be actors, and that was just financially impossible. We were paying three people to be on for every game. 

It was one of those moments where everything just kind of lines up and makes sense all at once. The great part is that the other characters can be in our next game! We have this part all built out where there’s this creepy Mad Genius employee, and he has a robot that he’s tinkering with, and then you can log in and control the robot… I don’t want to give too much away, but it’s pretty cool.

I’m really curious about your next game. Is there already a plan for it?

We actually all have other jobs now, which is sort of tricky. This was our full-time thing for a couple years. I do all the programming, half the puzzle design, and the music. My sister Katie does puzzle design, business management, and the art. We have two employees who also do art.

But now, as a combination of just being at that point in your life and it not really being sustainable with the pandemic, we’ve all gotten involved in other things. Which, to tell you the truth, is working out pretty well. We haven’t built a full game since then, but we’ve managed to run the games we have and maintain them and make improvements. But I think there’s just so much we could do with another game and people are so awesome and so supportive that I feel like it’s inevitable that we come out with our next game at some point.

Wow, you also write the music for your games?

Yes! I’ve played music all my life. I love recording – it’s my main hobby and passion. And so, Boobano Farm was especially fun. I composed and recorded all the music for it and am really proud of the Boobano theme. Maybe I’ll put out an album of Mad Genius music one day…

A Boonabos on a journey.
Boobano Farm

Speaking of Boobano Farm, while Edith is designed for 4 players, Boobano Farm is for 8-16 players. Tell me about designing gameplay for larger teams.

At first there was no asymmetrical gameplay at all, and it was supposed to be for 40-50 people who are not communicating because we didn’t think that many people would be able to talk at all. So the idea was: wouldn’t it be cool if the players figure out a puzzle just by seeing whatever everyone else is doing? You see, you mimic, you participate, and then together you actually accomplish a huge task that would have been impossible otherwise. That inspired the ant colony metaphor of Boobano Farm.

After our first test, we realized a lot of it wasn’t working. Even after you figured out what to do, it felt too much like a chore. So, we set out to make it more puzzly. The way we decided to do that was to introduce an asymmetrical element to each puzzle, where we’d split players into two groups. We’d also realized in our beta tests that people could talk and they were talking. Even with 40 people, communication wasn’t really an issue.

We thought that by bringing down the number of people, we could make the puzzles a little smaller and more puzzly, bringing it closer to a traditional escape room. That really worked, luckily, and we’ve just been tweaking the puzzles in that direction ever since.

Is there anything you wish you’d done differently in creating Boobano Farm?

The design of the puzzles in Boobano Farm could have been better from the beginning. We were thinking of things that a lot of people could do at once, like a crossword or memory flipping cards, but then we went back and tried to add in the aha. I think we did the best we could and I think it does work, but I’d recommend to everyone: never cut your design process short. Never underestimate how important that part is, because you’re going to do so much work coding it up that it’s really worth designing it first.

Speaking of coding, what was your tech stack for these games?

The whole thing is built in HTML, JavaScript, Node, and Socket.IO, a websocket library. 80% of it is client code, and 20% is server code. Socket.IO lets people connect to your server and let your server connect to anybody who visits the page, making it relatively easy to build in asymmetrical gameplay.

The server runs Node.js, and there are a few lines of this thing called Express which set up the Socket.IO connection. Each browser that connects gets a socket ID. They can send any message they want, like text or data, to the server. The server reads the message and the ID and can send messages back, either just to that person or to everyone. Once you have that, you can really do whatever you want. It works so well: there’s no latency, and they say you can have thousands of connections.

Where it gets a bit trickier is parceling your sockets into different “rooms” and knowing who’s in which, if you want to run multiple games at once. And then there’s the question of how to block just anyone from logging in. We didn’t really want to have account logins, so we thought as simple as possible – let’s just make it a one-word password.

What tech changes did you make going from Edith to Boobano Farm?

With Edith, each individual app was its own Node/Heroku folder that I was copying and pasting most of each time. Going into Boobano Farm, I took all the stuff that was happening every time and made these “engine” files their own thing which I can now “include.” This sets up room management, codename verification, and some basic shared functions like clearing the room. I was so close to getting players’ video and audio into the site, but it just wasn’t working consistently enough. I was heartbroken that we couldn’t get it, but we just had to move on.

Do you have any advice for other creators interested in making remote escape games?

We’re going to see several platforms come out soon that let people make interactive, maybe asymmetrical, custom stuff for their games – which is great. But I hope it doesn’t dissuade a few people from still trying to build these elements themselves. I would love to play anything someone makes from scratch because they’ll just inject so much of their character into it, just by means of doing it.

We always give ourselves a lot of permission. That’s why we do it – to have fun and express ourselves creatively. If it makes us laugh, it’s probably going to go in, even if it’s really stupid.

For a deeper dive into the tech stack mentioned in this interview, check out the code lab we put together with Peter. You’ll learn the basics of Socket.IO through building a simple web app which allows players on multiple devices to solve a jigsaw together.

Lisa & David Talk Box One & the State of the Tabletop Escape World on Puzzling Company

Update 6/15/21: If you enjoyed Box One, we hope you’ll check out our interview with creator Neil Patrick Harris on The Reality Escape Pod.

Last week we sat down for a lovely conversation with Jared and Zack of the tabletop escape gaming podcast Puzzling Company.

Illustrated Puzzling Company Podcast logo depicts two guys playing a tabletop escape game.

In the first half, we talked about the incredible Box One. In the other two halves, we talked about the state of the tabletop escape room world… there is a lot of episode here (~2 hours and 15 minutes worth of episode).

We talk about the different types of tabletop escape games: mass market, bespoke, and subscription. We cover the product life cycle too. Then we also dig into many of the 11 Principles of Tabletop Escape Game Design. And the conversation goes far deeper.

Give Them A Subscribe

If you’re into tabletop escape games, you should be following Puzzling Company. These guys are doing it right, and for the right reasons.

Checkout their 10 episode catalog with more on the way.

New in Escape Rooms: Drive-In Adventure

Entry banner for the drive-in escape adventure.

Challenge Inspires Innovation 

I recently completed a series on escape room innovations. Now I’ve come across an interesting example of how the challenges of 2020 continue to inspire new escape game design.

When he decided to close his indoor games because of COVID-19 case numbers in Michigan, Patton Doyle, Owner and Designer at Decode Escape Rooms, created games that could be played from outside of his facility. This included a new drive-in adventure – complete with lighting, sound and effects – that players experience from their cars.

Decode Escape Rooms currently operates in Ann Arbor and Ypsilanti, Michigan, with a Detroit location coming soon. Their Ypsilanti game The Aurora Society (currently temporarily closed due to COVID) won a Golden Lock Award in 2019. Their new drive-in adventure takes place at the Ann Arbor location.

Patton recently told me more about this new game format.

Can you describe your new drive-in game?

Doyle: The Doc is testing his new teleportation device, but something has gone wrong and he needs your help! Guests park their vehicles behind our building and work together using two smartphones to save the day. The main display is projected onto the back of our building, sound is piped in via the car radio, and the guests’ actions trigger lights, sound, and other special effects around their vehicle as they play.

Projection of an escape room like environment. Includes a door and a mysterious technological contraption.
Drive-in projection

Is it appointment-based and ticketed like a traditional escape room?

Doyle: The game is by reservation so that groups don’t overlap. Access to the game and resetting is handled automatically so that guests don’t have to interact with anyone during their experience. The game is managed entirely remotely via cameras, a web interface, and a phone number for help. Hints are also provided within the game interface.

What are the hardware and software you use to operate the game?

Doyle: We’ve used our own control software for all of our games for the last several years. To adapt it for this game, we added the ability to trigger events from the open internet. It’s free and open source software, so anyone is welcome to try it out. They can reach out to me (patton@DecodeDetroit.com) if they need help setting it up.

The online interface is written using standard web tools (html, javascript, css) and hosted with Firebase. The free tier of Firebase is so generous that we haven’t had to pay anything for it (yet).

For hardware, we used a projector and radio transmitter, a couple of smoke machines, and various DMX lights and light controls. The projection-mapping was all done in Blender (also free and open source software).

A parked car surrounded by lights and artificial fog.
Drive-in effects

Where did the idea come from?

Doyle: The idea is an evolution of the outdoor game we ran this summer. That game, Around the World in 30 Minutes, required guests to complete a sequence of travel challenges in the large picture windows in front of our building using their smartphones. Our drive-in game took some of the same ideas and added more elaborate special effects, greater teamwork (guests collaborate across two devices), and, of course, a vehicle to keep them warm (since we’re located in Michigan). 😊

Two people on their phones in front of a window display.
Around the World in 30 Minutes

What hardware and software do the players need?

Doyle: Guests only need a smartphone and a vehicle with a functioning radio. The entire game is browser-based, so guests don’t need to download an app or bring any special tools or devices with them.

What is the length of the game?

Doyle: Guests have 90 minutes to play, but the typical game takes about an hour. We’ve found that unlike a traditional escape room, guests are much more likely to begin their game late, so we want to make sure they have plenty of time to finish.

How is the drive-in game affected by weather? Rain or snow or extreme cold?

Doyle: The game is open in any mild weather (rain, snow, cold, etc.), but we plan to close it during blizzards and other extreme weather events for safety. Guests can reschedule their reservation anytime without fees or penalties, so if they decide it is too cold or the roads are too slippery, they can pick a different date to play.

How has it been received so far?

Doyle: The response has been fantastic. The guests I’ve spoken with all asked when we were coming out with another similar game. Even though the game is an unfamiliar format, people are willing to give it a try, and it exceeds their best expectations.

Is there a post-Covid future for this game or others like it?

Doyle: We hope to keep this game open throughout 2021. With summer nights in Michigan, we’ll have to make some changes, as it doesn’t get dark until 10pm. But I’m a big believer in the potential of games that break the standard escape room format. We’re always working to expand our offerings into new formats, whether that’s a scavenger hunt where puzzles are hidden inside local businesses, a short, replayable game that requires guests to learn each time they play, or a new outdoor game that takes guests out into the community.

A packed bookshelf with a framed Decode logo attached to the side.
Scavenger Hunt

Conclusion

The escape game format has undergone some tremendous changes over the past year. New styles and ideas are popping up all the time as everyone tries to adapt to changing conditions and business rules. 

There is something fun about driving to an escape game, instructions coming over the radio, and experiencing lights, smoke, and sounds all around the car. It is an immersive, real-world adventure, very different from a game played through a laptop screen.

This is an idea that really leaves an impression with me. I hope to learn about more companies leaving the traditional comfort zone and offering customers the chance to play something different.

A Conversation with SCRAP on their Approach, Cultural Differences, and Adaptation [Interview]

SCRAP was the first escape room company and over the years we’ve played many of their games. We’ve loved some of their games; others were not to our taste. However, we have been deeply impressed and respectful of the level of innovation that SCRAP has produced.

As a company, SCRAP has invented more escape room formats and twists on the concept than most escape room companies have combined. Outside of Japan, we only get to see a fraction of their innovations.

Interview

In this interview, we talked with the SCRAP Global Team about player preferences and their thoughtful approach to game design.

We took this opportunity to ask all of the questions that we have accumulated over years of playing SCRAP games. Some are deep and heavy questions… others are surface level. Our hope is that all of them help our community better understand this seminal company in their own cultural context.

Background

REA: Before we begin, we have a question that we’ve been wanting to ask for years. Is it “SCRAP” “Real Escape Games” or “REG”? In the U.S. we usually just call you “SCRAP” but we see you using all of these brand names.

SCRAP Global Team: SCRAP (SCRAP Co., LTD.) is the name of our company, and “Real Escape Game” (acronymed as REG) is the brand name for our games. Therefore, it is accurate to say Real Escape Game produced by SCRAP.

The reason why we have the brand name is because while many of our games fall under the category of an “escape game,” we do have a couple of other games that don’t. Besides Real Escape Game, we have other brand names such as Real Stealth Game, city-wide puzzle hunts, and others that don’t fit the criteria of an escape game. Although, many of these different styled games are available only in Japanese, which is why we prefer to use Real Escape Game to collectively represent us outside of Japan.

Players navigating a laser maze made of string.
Real Stealth Games (photo via SCRAP)

We’re excited to learn a bit more about your other game types too, but before we do, let’s start with a bit more background. When was SCRAP founded?

SCRAP was founded in Japan in 2008, and in the U.S. in 2012.

How many escape games has SCRAP produced over the years?

We produce more than 150 game titles each year.

Each year?! Wow. We had no idea. How many escape games is SCRAP currently running?

In Japan, we have 16 physical stores nationwide which are currently running more than 100 room-type games in total. (Some game titles are run across multiple locations). This number does not include our non-room type games such as city-wide puzzle hunts and other unique collaboration events held at venues outside our stores.

How many SCRAP games are currently playable in English?

In total, 13 of our game titles are playable in English, with 2 of them currently available for online play.

Audiences: Japanese & American

With your experience, what are the differences between player expectations in Japan and the U.S.? What makes a successful game in Japan? What makes a successful game in the U.S.?

We believe that fundamentally, players from Japan and the U.S. (and other countries as well) wish for very similar things, for example:

  • A game that is meticulously crafted to take players on an emotional ride, and reaches its climax at the end
  • A satisfying story

In particular, we found that our American players like the following:

  • An action-packed experience
  • Interaction with our actors/ staff
  • Venue decoration/ ambience

They require more than just information on a screen to immerse into a story. The overall atmosphere of the room is more important.

On the other hand, our Japanese players like the following:

  • Elaborate and tricky gimmicks (eureka moments)
  • A puzzle that takes more than one step to complete (complexity)

More than the ambience, our Japanese players were more impressed by almost-impossible-to-solve puzzles and plot twists.

Two players interacting with a tablet.
Real Stealth Game (photo via SCRAP)

Are there design elements that you feel Americans do not appreciate in your designs? Why do you think that is?

We have had the luxury of running our games over 10 years in Japan and 8 years in the U.S., and we have definitely seen some obvious differences. From our experience and extensive customer feedback, we found that compared to our Japanese players, our Americans players are less likely to appreciate the incredibly low success rate, the final plot twist at the end that usually tricks more than 90% of our players, reusing certain game materials and clues (i.e. having to go back to a previous puzzle to solve a later one), and clues hidden in the storyline or introduction sheet.

These are all elements that our Japanese players love and pull them back to challenge our games again and again. Although it sometimes does not resonate as well with our American players, we don’t see it as a negative thing. It is very interesting to learn how to resonate with a different audience, and to find the balance between keeping our style and adjusting it for our American players.

We believe we have put that into practice with our more recent games.

REA: We agree that you have. We’ve watched your games in the U.S. change over the years to become more approachable to these American preferences that you’ve outlined.

In addition to game design, we’re really interested in puzzle design. When you translate a game from Japanese to English, how much do you have to change the puzzles, story, and mechanics to match either local culture or different linguistic structure?

It largely depends on how language-specific the game is when originally created in Japanese. For example, in the past, we had not considered offering the games in English, resulting in games extremely reliant on the Japanese language and culture, making them more difficult to convert into English. However, recently, our team of creators is more aware of this issue, and tries to come up with puzzles that do not require language or specific knowledge (such as the history and culture of Japan). This results in puzzles that rely on symbols, simple math, shapes, colors, and logical puzzles that can be easily localized, and which anybody can solve.

Of course, language puzzles can be extremely fun and clever, so we try our best to include some where the puzzle mechanics are similar to the original Japanese puzzle. The company has also formed, in more recent years, a new division that specializes in translation and localization of the Japanese games, to work closely with the Japanese game creators and improve the quality of the games offered in English.

Besides puzzles, we rarely make drastic changes to the storyline of the titles we decide to localize. If the storyline is heavily based on Japanese culture/ knowledge, we simply choose not to localize that title.

Two players hiding from an armed guard in an art gallery.
Real Stealth Game (photo via SCRAP)

Are there puzzle types in Japanese that cannot be translated into English? If so, can you explain this?

Yes, there are plenty! Just like how English wordplay and puns are almost impossible to explain in Japanese, the Japanese language is very versatile when it comes to its linguistic characters.

In the first place, Japanese has 3 different sets of alphabets: Hiragana, Katakana, and Kanji. This gives us so many more ways to play around with words. One word can be presented in all 3 different forms, so we can create a puzzle where players have to convert a word to its equivalent in a different alphabet set to solve it. This cannot be done in English.

Also, a word can have multiple meanings. We utilize this a lot in our puzzles. For example, Japanese verbs usually have more than 1 meaning:

“Dachi no inochi wo kakero” translates to “Bet your life on your comrade,” where the verb “kakero” means “to bet.” However, “kakero” can also mean “multiply” in terms of mathematics.

So most players, due to the context of the sentence, will assume that it reads as the former: “Bet your life on your comrade.” However, what the puzzle actually requires you to do is to “multiply the lives of your comrade” (where you can find the word for your comrade’s “life” hidden among some text.)

Game Styles

We have played most of the escape games that you have produced in the U.S. We are big fans of your work because you try new things, even if we haven’t enjoyed all the games. Whether we love or dislike a SCRAP game, we have noticed patterns and a certain symmetry that exists in your escape games. What would you say is the essence of a SCRAP game? What makes a SCRAP game a SCRAP game?

Our English catchphrase is “Arrive a Player, Leave a Hero.” This is because more than just solving “puzzles,” we place value on our players being immersed inside a story from beginning till end. Our focus is on how we create an experience for our players to really feel like they’ve become a hero who defeats the demon king, a phantom thief who steals a precious jewel, or a detective who solves an unfathomable crime.

This is what drives us to experiment widely with vastly differing concepts. Apart from making the puzzles highly interactive for our players, we are constantly finding new ways for our players to experience to the fullest the feeling of being the main character in a dramatic story.

You have created some incredible new escape room formats such as the projection mapped table game (Spellbound Supper) and the time loop game (The Pop Star’s Room of Doom). Can you tell us about other game formats that you operate in Japan, but have not brought to the U.S.?

Real Stealth Game – Instead of escaping, players have to infiltrate a venue and complete their given mission while avoiding guards (real-life actors) and booby traps! It’s like playing an arcade game in real life where your remaining time decreases if you get shot by the enemy. We have English versions of this type of game available in Japan.

Theme Park Games* – An entire theme park is used as the game venue after operating hours, usually at night. The capacity can go up to thousands of participants playing at the exact same time. Players will receive a game kit and can play individually or in groups, solving puzzles and clearing check points within a fixed time period. We have not had an English version of this type of game yet.

Mystery Mailbox – With a game kit in hand, players walk around one of SCRAP’s game facility’s common areas to pick up clues and solve what secrets lie behind a mysterious letter. This game style has no time limit and can be played leisurely. It is especially good to challenge while waiting to play one of our room games, extremely family-friendly, and often done in collaboration with an IP title. We have English versions of this type of game available in Japan.

The entire game's contents. A lockbox, three envelopes, a yellow sheet of paper, and a replay set.
PuzzBox (2016)

City Hunt Puzzle – Our most well known city-wide puzzle hunt is Tokyo Metro – The Underground Mysteries. This is a puzzle-solving game played while walking through the streets of Tokyo. Held annually since 2014 in collaboration with Tokyo’s largest metro network, we have offered the game in English as well since 2015, for our English-speaking audience living in Japan as well as tourists to Tokyo. It’s a full day activity that takes between 4-7 hours (depending on your skills), and takes you to both popular and hidden spots around Tokyo.

Immersive shows with puzzle solving elements* – Detective Conan at Universal Studios Japan. Players attempt to solve a crime while interacting with real-life actors. Some sections involve watching a theatrical performance by these actors as part of the story.

*Please note that these brand titles in English are not official as we do not have English versions of these games.

We’re especially curious about your Theme Park Games. Are physical elements of the theme park used in the gameplay/ puzzles? How is this style of game similar to or different from the stadium games we’ve seen the U.S. (i.e. Escape From the Walled City)?

Yes, physical elements unique to the theme park are used. Often, players have to ride the park’s attractions to get points, solve puzzles, or find clues. Sometimes players can enjoy the game after the theme park’s operating hours. It is an exclusive experience to enjoy the theme park’s facilities after it has closed to the public.

One example of our theme park games is a regular collaboration with one of the largest theme parks in Tokyo. We have done big name animation series like One Piece and Hunter x Hunter (Japanese only) for this year with them. Operated in a similar style, the game collaborations with this theme park are conducted during operating hours. Players get a game kit and enjoy the park rides alongside nonplayers who are just there to enjoy the theme park rides. The players will know what clues to look out for (as prompted in their game kit), and the clues and rides do not affect the general public who are not players.

An example of the other kind that is conducted at night after operating hours is a zombie-themed game that is held at multiple theme parks in Japan, where everything in the theme park is reserved for players only. This game has been put on hold for now due to COVID-19.

Above, you haven’t talked about the ballroom-style games we’ve played in the U.S. What are your goals for ballroom-style escape games versus single team escape games? And how does this vary by market?

Our single team escape games (Category: Room-type) are designed to attract beginners/ new players, as it is less intimidating to participate in and easier to imagine what the experience will be like. Once they have experienced our classic escape room, ideally they will develop interest in our other content and attend our ballroom-style escape games (Category: Hall-type).

While not true for all our games, our Room-type games are a good mix of original SCRAP titles and collaboration with IP titles, while much more of our Hall-type games are collaboration with big IP titles. This is because a large-scale event has more impact and is more appealing to famous IP titles. These collaborations help bring in a new set of players who are fans of the IP title. Therefore, we attract a lot of new players through our Hall-type games.

Another interesting trend we observed is that our Hall-type games are extremely popular in Japan, but are not so well received in the US.

REA: Because the IP titles are so successful at drawing in new players, and because (in the U.S., at least) the Hall-type games travel to cities that don’t have your room-type games, the audience seems to be largely new players. We never considered that these were designed for returning players, but we think that’s partly why they didn’t stick in the U.S. We certainly assumed the reverse when we reviewed these games.

2020 Innovations

How has SCRAP changed to face the challenges of COVID-19 and 2020?

As with all other escape game companies, we had to close our physical stores for a large part of the pandemic. To make up for this loss, our creators rushed to produce content that can be enjoyed online. Besides creating remote online versions of some of our games, we also started to produce goods like puzzle kits that can be ordered and delivered to your home. When everyone was strictly advised to stay home, these game kits allowed players to play with friends, family, and colleagues over the phone or video call (each party needs to have a game kit) without having to go to a specific location.

We also created a completely new game concept (direct translation: Escape from the Silence) where players attend our physical event venue, but no one is allowed to speak (including staff.) This was thought up as a way to reduce the spread of the virus through verbal communication. (Of course, everyone is also required to wear a face mask to participate.) The entire venue and game is conducted in complete silence, and players have to act out, gesture, and communicate through sign/ body language to solve the puzzles. It is a very bizarre thing to witness, but it was a hit with our Japanese players!

We love this concept and we haven’t heard of anyone else doing this. How many players is it designed for? How often do you run it? Is this something you would continue running once it’s safe to gather in person again?

It is designed for 2-4 players and it runs everyday. While it was developed to be played during the pandemic, we believe that this game would still be very enjoyable even after it is safe to gather in groups again. We will definitely continue to run it, depending on the demand.

In our opinion, Escape From the Alien Research Facility was an especially successful online escape game. What have been some of the challenges that you have encountered adapting your game designs to a global audience on the Internet?

Surprisingly, once the game was redesigned to work online and remotely, we didn’t have that many problems delivering it to our global audience around the world, content-wise. It was a very pleasant surprise!

Escape From The Alien Research Facility promo image depicts a red headset and an alien that looks like a xenomorph.

We did struggle with the time difference in attempting to offer our game to as many countries as possible. There were times our staff had to operate the game at 2am, 4am, and 7am in the morning in Japan.

Also, since our game would now be available to literally every single country in the world, we were more careful in selecting words that could be understood not only by Americans, but globally, especially for players whose first language isn’t English. We had to compromise on some standard American terms such as the word “burner,” which meant different things in American English and British English. We decided to go with a more universal, easy-to-comprehend language even if it sounded a little strange to our American players.

Another challenge (which later turned into enjoyment) was allowing players to interact more with the game staff. It required our staff to be flexible and able to give quick-witted responses to questions and requests outside of our game manual. However, we observed that these extra unscripted interactions gave a personal touch to the game experience and our players loved it.

REA: While we only touched on these select 2020 adaptations in this interview, we know you have more in store for us players. We’re excited about Escape from the Lockdown: The Strange Village (review coming soon), your new online game format that was created in response to the pandemic, specifically to play at home with no time limit. And of course, we’re looking forward to the new ways you’ll invent for us to be the heroes next.

A 3x3 video call tile with 9 different characters and a narrator off to the side. The image is captioned, "the village has a few measures in place."
Escape From the Lockdown: The Strange Village (2020)

Conclusion

We’re thankful to the SCRAP Global Team for their thoughtful answers and willingness to honestly reflect on their work.

As an American, SCRAP feels a bit like an iceberg in that we only see a small portion of the company’s creations in our part of the world. So much of what they do is inaccessible to us.

As one of their gamemasters said to us in an online game, we look forward to a day when “the world isn’t cursed” so that we can visit Japan and play some of these games in real life.