Category: Room Design

My Favorite Escape Room Hinting Styles

by Richard Burns, posted in Room Design

Escape room players don’t like to ask for hints. It can be embarrassing and even contentious among the team members. Hints are surrender.

RECON ‘21 included a terrific talk on the subject of hinting, aptly titled Fun Insurance.

The discussions that followed inspired me to write about two of my favorite escape room hinting styles: Optional Hint Reception and Narrator Delivered Hints. Both of these systems lessen the sense of failure often associated with needing a hint.

Optional Hint Reception

Optional Hint Reception involves the game host supplying unrequested, concealed hints to the players and letting them choose if and when to reveal them. It borrows one of the best aspects of some tabletop escape game hint mechanics: allowing players the comfort of knowing hints are currently available, letting them judge their own frustration level as a guide, but not forcing an embarrassing public admission of defeat before receiving a nudge. Game hosts can utilize their experience and familiarity to deliver hints when they see fit without players feeling like they are being helped too much or too soon.

Players can notice a paper note slipped under the door, but it will just lay there until someone decides to pick it up. A video screen can be covered with some kind of moveable obstruction, allowing players to peek underneath if they wish. A screen displaying hints could be placed in a physical space that players must choose to visit in order to receive those hints. 

Audio or visual cues can alert players that a new hint is available, but in my experience, this isn’t always necessary. An attentive game host usually knows when players need a nudge and can provide it earlier through a concealed system. Players can learn to trust their host and expect a hint is waiting for them even without a signal. Conversely, once that trust is established, if a quick peek at the concealed hint mechanism shows no hint available, this can reassure the players that they are on the right track because the host doesn’t think they need any help. If the technology allows, unused hints can simply be deleted and replaced with more current hints as the players progress through the game.

A successful game playthrough with an optional hint reception system includes a game host using their skill to provide plenty of concealed hints and players using their own state of mind to receive just what they need without ever having to stop and ask.

Narrator Delivered Hints

Some escape rooms employ a narrator character to deliver hints: an all-knowing, all-seeing outside observer who is describing the action to some unseen audience. This can really take the edge off of the negative feeling that can come from asking for help. It is somehow less harsh to receive the information when it feels like it was intended for a 3rd party. 

When players feel like they are secretly listening in on information meant for someone else, hints seem more like clues discovered in the game rather than specific help intended just for them. It can be exciting or even mischievous to listen in on comments not meant for you (even if, in this case, they are meant for you.) It might even be comical or thrilling to hear your team’s actions and struggles described as they happen.  

For example, the narration, “The investigators knew they were missing a key piece of evidence, so they decided to check the desk drawers one more time” takes the sting off of a search fail better than the gamemaster asking, “Did you open all the desk drawers?”

“Our smallest adventurer noticed some curious symbols. Will they turn out to be important?” or “The heroes were spending too much time on the locked door, so they decided to look for another way in.” Receiving hints worded this way feels less hint-like and more experiential.

Unsolicited nudges from the game host can be disguised as story narration. For example, “The moon was bright that night where light and shadow danced in the graveyard” could gently clue a shadow puzzle that players have failed to notice.

Many escape game themes can work with a narrator character. Think of all the movies and TV shows that use voice-over to deliver story information. That function can be adapted to deliver escape room story and hints.

A narrator should be established early and make sense in the game world. Make the players comfortable with the system by using it for the story introduction and a comment about the players or what they are doing. Use it for act breaks or other in-game transitions or discoveries. Then when it comes time for a hint, it can be smoothly delivered as if the narrator were still talking to the audience.

  • headshot of Summer Herrick surrounded by a RECON fram
  • headshot of Rita Orlov surrounded by a RECON fram

Conclusion

These are a couple of my favorite hinting styles. They are 2 great options, but not the only options.

The goal of these systems is to reduce the stark, immersion-breaking player and host interactions that are common in most escape rooms. They also reduce some of the negative feelings players have when forced to admit defeat, come together to raise their hands, and ask for a hint. One of the ways to preserve some of the puzzle-based aspects of escape rooms as many transition towards adventure games is to develop hinting mechanics that feel more like part of the adventure itself. 

Conversations on topics like this are just one of the benefits community members receive when they are brought together at RECON. Look for the featured talk Fun Insurance, as part of the RECON ’21 Video Playlist. It will be released there soon.

Escape Room Narrative Design: Simple Plot, Complex Characters

by Richard Burns, posted in RECON, Room Design

“Having complex characters who can appear vividly in the game (whether in person or through the environment) is often what can make a game memorable.” – Manda Whitney at RECON ’21

One of my favorite takeaways from RECON ’21 was a storytelling concept I saw mentioned in a text channel. The idea was that when crafting a narrative for a player-based experience, consider this framework: Simple Plot, Complex Characters. 

As I thought about which games I had played that fit that description, I realized almost ALL of my favorite escape rooms fell into that category. I am not a storyteller or narrative designer. I am a player reflecting on the common threads in my favorite games. Since I read this comment at RECON, I’ve been thinking about how and why this style provides the type of escape game experiences I appreciate most.

Manda's headshot in an ornate art deco RECON 21 frame.

Concise Backstory

Try to avoid the situation where a game host gathers the players just outside the escape room door and then proceeds to introduce the game with a long story. A player’s anticipation is high at this point and their ability to absorb complex information about unfamiliar names, places, and events is low. A simple plot allows players to enter the game quickly and then discover important information on their own.

Let Me Be Me

A simpler plot in an escape room usually means that players are not asked to take on the role of a character, but rather, are entering an experience as themselves. This takes pressure off of the players. It lets them focus more on what is being presented to them and what they need to do, instead of trying to remember who they are supposed to be. Sometimes complicated plots rely on players-as-characters having specific motivations that the actual players may have trouble relating to or even remembering. I have played several games where my teammates and I had to stop and try to remember why we were supposed to want something or what we were supposed to want to accomplish. This problem is much less likely to occur when we are playing as a version of ourselves, even when placed into extraordinary, fictional circumstances.

We Love To Snoop

Most of us love to snoop through other people’s belongings. It’s a mischievous way to learn about someone else. It feels badass, or sly, and motivates players to take in information. Use that to your advantage. Let players learn about your characters by finding their personal artifacts and belongings. A set of family photos where the subjects change over time can provide character and story information without any text. A discarded chef’s hat found along with a rejection letter from a culinary school can say a lot. Diary entries, drawings, or paintings made by a character can reveal parts of their identity, but so can items like a wheelchair or a military uniform. Dusty old prototypes of an invention or an evil weapon can inform players about a character’s backstory, so a game host doesn’t need to recite it in the intro. Learning about characters, their motivations, and their resulting actions is a form of story.

Character Arcs vs Story Arcs

Complex stories with plot twists can be great in books and movies, but they are hard to capture in the escape room medium. With everything going on in a timed game and players often working on different things simultaneously, it can be hard for the whole group to keep up with twists and turns in a narrative. Character progression is easier for players to track. 

Just four pieces of discovered evidence in a magic shop could tell us that the elderly proprietor started out as a magician’s assistant, then struck out on his own, rose to fame and the top of the industry, then became bitter and evil when he fell out of favor with audiences and his own assistant became a star. That character path can span decades of story time and quickly explain why his shop is full of sinister-feeling puzzles and tricks that we must solve to escape. After solving the final puzzle players find a note, “All I wanted was for someone to appreciate my work again.”

That game needs little introduction, “You and your friends pop into a curious-looking magic shop after dinner.” The story is in the character. It is in the things we learn about him and his journey.

Puzzles As Character Beats

Escape room puzzles, tasks, and challenges can all be designed to help players empathize with your characters. If your character secretly observed something important, have the players find that hiding spot, look through that peephole and see what the character saw, feel what they felt, and connect with that character. If your character worked hard to build something – a machine or a piece of music – have your players struggle a bit (within reason) to piece together some parts or musical notes to create a masterpiece. Let them feel the accomplishment that the character felt.

If your game has a character who is asking for help or for information from the players, think about the task of delivering it to the character. If we solve puzzles to obtain the information, the process of communicating it to the character can be a powerful moment. Maybe it is not the desired result and we need to break it to the character softly. Maybe it is exactly what they need, delivered just in time, and we can feel their relief and joy.

Learn At RECON

“Simple Plot, Complex Characters” is just one example of the type of thought-provoking insight provided to RECON attendees. Between the featured talks (available to watch here), the workshops, and the tremendous level of community conversation, the amount of quality, actionable information provided at the RECON ’21 escape room convention was simply amazing.

Defining “Premium Escape Rooms” & Why It Matters

by Richard Burns, posted in Room Design

The escape room industry is currently in an early phase where games of vastly different quality levels are often priced very similarly. When you check popular online reviews, all escape rooms have great ratings, and they all cost roughly the same amount. There is no real price differentiation in this industry, but there should be. As the industry matures, identifying and rewarding premium experiences will be an important step. Educating customers about the value of premium offerings will be difficult in a business where mystery, secrecy, and surprise are often viewed as important attributes. Here are some of my thoughts about what should be included at a premium price point.

What Makes a Premium Escape Room?

When I think of a premium escape room experience, I think about immersion and worldbuilding: aspects of experience design that make memories. As much as I like solving puzzles and aha moments, I’ve realized that none of my favorite escape room memories have anything to do with puzzles. I suspect much of the average player population is probably the same way. Making me forget that I am in an escape room is one of the highest compliments I can give to an experience.

Extended game length, more square footage and quality actors can all add significantly to worldbuilding. These can be key aspects of a premium experience and they are things a customer can recognize when booking. Immersion, technology, reveals, and characters can be dialed up to a level that justifies a higher price.

In-game: A beautiful woman in a tight body suit approaching white and blue sci-fi entry way for The Dome.
Escape Room Nederland’s The Dome

While each of these elements can contribute toward making a premium experience, they can also be used as gimmicks to fool customers into thinking they are about to play (and pay for) something special. Providing fair value for the money will be critical for the survival of a premium-priced escape game.

Give Me More Time

Paying more for longer escape games is something that makes sense to everyone. It’s still rare to see escape games that run longer than 60 minutes. Longer play times stand out and spark interest with customers. A race against the clock to escape in time is not the only option for these types of experiences. Stretching game length with more content and letting players be in an immersive environment longer is a premium selling point. Designing systems to allow customers to play 2 or more related rooms consecutively and uninterrupted is another way to extend play length.

In-game: The exterior of the bookshop, from the street. It appears as a real bookshop.
Paradox Project’s The Bookstore

Removing the aspect of the time constraint altogether can be an exciting game element and marketing opportunity. As a player, I have come to appreciate games without visible countdown clocks. Rooms can be designed with mechanisms in place to ensure that players spend the desired amount of time in the game, while being ambiguous about its actual length. 

In-game: an unusual room lined with lights, wheels, and gauges.
Palace Games’s Edison Room

When I am worried about time pressure, I often tend to (even subconsciously) force myself to find the most efficient path through the game. I ask myself, “what does the creator probably want me to do?” I sometimes use escape room logic and figure out how to progress through the game. This type of self-awareness can be a detriment to immersion. Without that pressure, the world opens up a bit, and details of the room become more accessible. It feels good to know I get to be there that much longer. 

Bigger Can Be Better

Larger square footage games can also make a game world feel more real. The reality that players are in an old office space or a strip mall fades away when the game space feels big. There are more nooks and crannies to inspect. There are more chances for individual players to go off and explore an area by themselves. Being alone in an unknown environment can be a thrilling feeling. 

In-game: The carved wooden figurehead of a winged woman on the bow of bow of an old ship.
13th Gate Escape’s Cutthroat Cavern

There are more opportunities to discover things that are not part of the most efficient path toward the game’s end point. Sometimes you need to run back to a different section of the space to where you remembered seeing something that now seems important. That distance can add to the excitement and enhance a thrilling moment. A larger play space is something players will take notice of. It is one of the most obvious premium perks in an escape room.

Even the illusion of space can be powerful. A room with false doors on all four walls can feel part of a sprawling mansion or a huge castle. Fake doors can make the players feel like there are choices to be made and more paths to explore even when a game is kept neatly on its rails.

In-Game Actors

Actors as characters bring depth to the story world. They are also obvious operational expenses that customers should be able to recognize and appreciate.

Madame Daphne holding a seance.
Strange Bird Immersive’s The Man From Beyond

High-quality actors who make eye contact and ask questions of the players can help create a premium experience. There is something about answering questions from an actor that forces players to think about the story and the world it takes place in so much more than just listening to them recite exposition. Customers want to be drawn in; they want to understand the place they are in and why events are happening there. What better way to deliver that than from interacting with the characters that live in that space?

Upping Immersion

A premium escape room should begin the moment players walk into the building. The atmosphere of the lobby area and in-character hosts add to a customer’s experience. A smooth and minimal pregame rules briefing is also something I am really coming to appreciate. A long list of “don’t do this” warnings can kill immersion and momentum just as players are building anticipation of entering the game. Make a more theatrical experience from start to finish, where everything rolls into one. The narrative should begin long before we are standing outside of the escape room door. Onboarding and exiting can be part of the experience.

An old desk filled with an assortment of items.
Escape My Room’s Inventor’s Attic

The Room Should Be Alive

Premium escape rooms react to the players. Dynamic lighting and sound design can be used to guide the players through the physical space. Areas of interest may illuminate while areas no longer in play may darken. Puzzles and props have positive feedback so players know when they are doing things right or doing things wrong.

dark room with papers stuck to the wall and a mysterious box emitting light hanging from the ceiling.
The Room’s Lost Treasure

Effects and Reveals

Big reveals and cool special effects are well-known elements of higher-end escape rooms. They can be memory makers. Unexpected moments are an important aspect of escape rooms. The bigger and grander you can make them, the more impact you can make on the player’s experience. Players might be willing to pay a premium price just to get to see the cool thing that everyone is talking about. 

In-game: A view through a long, old, wood ship. A treasure chest sits on the floor.
Escaparium’s Lost Island of the Voodoo Queen

Story and Characters

Stories and characters that stick with players can create a premium experience. I love a story I can continue to think about months after playing, and characters that I empathize with and become invested in to the point that I wonder what happened to them after the story concluded. I think about what they are doing now and how other players might be interacting with them. These are rare features in the games that I have personally played or heard about, but when they do happen it can be powerful. 

In-game: Close up shot of a control computer.
Crypto Escape Rooms’ Below Zero

Premium Must Have Meaning

A longer game clock or a larger game footprint are not premium features if that extra time or space isn’t filled with interesting content. A huge story that is too complex to understand or that is force-fed to players in a jarring or disjointed way does not make for a premium game. An actor playing a jump scare monster might not be appreciated as much as a character that facilitates a meaningful exchange with the players. None of these aspects of the premium experience will help an experience that includes flawed gameplay or bad puzzle structure.

I hope the time is coming when the escape room customer base is large enough and sophisticated enough to value escape rooms properly and reward those creators who deserve it. Many times the customer has no idea of the quality level of the production they are paying for. The inherent secrecy about the games that is built into the escape room culture is one of the causes of this uncertainty. The unreliability of popular online rating systems is another, but trusted voices are becoming more recognizable. 

There will be markets for escape rooms at different price points, from budget to premium and beyond. Stratification in pricing is something customers will understand and accept, as long as it is justified.

Next Steps for Online Avatar Games

by Darren Miller, posted in Business, Room Design

Online avatar games are a form of escape room offering that has emerged since the start of the pandemic and the resulting lockdowns. Players connect remotely via video conferencing, such as Zoom, and direct a camera-equipped game host throughout a real-life, physical escape room. In some cases, an inventory system provides players close-ups of and/or allows interaction with objects found in the room. During the pandemic, escape room operators who adapted their real-life games for the avatar format were able to continue hosting games while their physical locations were closed.

As a player, I want to start by saying thank you for offering remote avatar games. Thank you for the effort you put in to make escape rooms available to players in quarantine! I’ve loved being able to play at so many different places all over the world from the safety and comfort of my couch.

First person view of an old building, the avatar's hands are visible along with various HUD indicators.
Project Avatar

As we move forward, companies have to make decisions about what to do with their avatar product offerings. The key to a smooth transition back to real-life escape rooms is clear communication. As a player, I appreciate the clarity.

Share Your Plans

Escape room operators have to make business decisions that make sense for their own situations. For many, avatar rooms may no longer be cost effective to run. It may be too hard to toggle back and forth between in-person and online. When players arrive at your website looking for your online offerings, let them know the status of your avatar games, whatever that is.

Save King's Landing - room view, via a 360 image and a zoom stream.
Save Kings Landing

Already Closed Avatar Game

Let your visitors know that they came to the right place, but the offering has been closed. If you offer other play-at-home options, like boxed games, digital games, or print-and-play games, you can still use this landing page to guide your visitors to these options.

Planning to Close Down Avatar Game

Let your visitors know when the game is expected to close in order to convert any holdouts to bookings. Mention if you are offering any kind of “last hurrah” promotions.

Offering Avatar Game Indefinitely

If your avatar game is staying on, as a normal booking or on a limited basis, tell your visitors that this is something you’re continuing to offer. If you’ve chosen to limit availability to certain days/ times, make that clear as well, to help minimize confusion if players are looking at the wrong days. Remember, of course, to let your visitors know what time zone you’re in and language(s) you support!

May Run Avatar Game By Request

Let your website visitors know that you can still run an avatar game, perhaps by special arrangement, if they contact you. Make it clear what the process is for special bookings and if there are any considerations or limitations (i.e. certain days or time slots, advanced notice, minimum number, cost).

The artist walking around in his home.
Pursuit of the Assassin Artist

Where Avatar Rooms Still Make Sense

It’s unclear what the long-term demand will be for avatar escape games. Many will close down as companies transition back to in-person games, and many players are eager to get back to in-person play. However, there are still several cases where avatar escape rooms may continue to be a valuable product offering, if it makes business sense for you.

  1. Extend the reach of your room outside your geographic area: online offerings allow you to reach players unlikely to travel to your area.
  2. Offer an experience for players to have fun with remote friends and family: you can enable your players to have a fun get-together, even with those they can’t be with due to distance and schedules.
  3. Provide a solution for businesses looking for team-bonding activities for distributed/ remote teams: business travel is expensive, and companies are often looking for ways to improve team morale with geographically diverse teams.
  4. Enable access for players with physical limitations who may find the avatar format more accessible.
  5. Accommodate people still nervous about in-person activities, or who have ongoing health concerns.

Escape room companies can also consider the online avatar option for filling empty slots, especially if staffing and toggling between modes of play is cost effective:

  1. Weather cancellations or travel disruptions may be able to convert to remote bookings, provided you can still staff the game safely.
  2. Non-peak time slots for your area may be just the right time for someone in another part of the world. During the pandemic, some companies shifted their booking hours to accommodate demand from other time zones.

Maintain Your Webpages

As entertainment reopens, you are probably focused on transitioning back to your normal in-person escape room offerings. The online offering may have been just a stopgap, but there is value in maintaining the landing pages on your website for your past or current online offerings. Players are likely to find links to your avatar offering from listing sites, online reviews, social media, or other sources. They will want to know if it’s still being offered, and are confused if they can’t find information about it.

Hands in a first person view of an airplane interior.
Ruins: Forbidden Treasure

Preserving the links to your online offering also makes good sense for your search engine presence. If you delete the pages being linked to by external parties, you risk lowering your SEO score. Even if you’ve discontinued your offering, you can still welcome visitors, assure them that they’ve found the right site, and guide them to other options.

Conclusion

You’ve spent time and effort over the pandemic learning and developing a product offering. You should make sure that you capitalize on that by maintaining information about your online offerings and by keeping your visitors informed, even if you’re no longer offering avatar games.

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

by Matthew Stein, posted in Mad Genius Escape Co., Room Design

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.

Learn More