pgitgreen-blog
pgitgreen-blog
Pervasive Gaming and Immersive Theatre
17 posts
The Green Team Development Blog! This project has been developed at Goldsmiths, University of London. Under the guidance of Dr Sarah Wiseman. Questions? Get in touch with the team at [email protected]. Sign up for our escape room experience at rees.app/pgit
Don't wanna be here? Send us removal request.
pgitgreen-blog · 6 years ago
Text
Wrapping it up with a new trailer
This post provides some conclusive thoughts on the journey undertaken. This project provided us with a great opportunity to build an immersive experience in a creative space. The team was made up of individuals on different degree programmes allowing us to bring together different skill sets from computer science, games programming and creative computing.
We live in an age where data analytics has become powerful with the exponential rise in the value of our data. The team set out with a goal of creating a thrilling escape room experience instilling an emotion that players will remember whilst portraying a powerful message on the importance of data privacy. The play tests of our piece proved to be an important step in the development of this project allowing us to iterate on our designs and make positive changes to the piece.
We would like to thank Sarah for her insights and advice with every step of this project. We would also like to thank Nicky & Peter at creative facilitates for their help with the equipment.
We also had a great opportunity to have players try out our piece from the escape room industry, which was both insightful and super useful to the team.
Tumblr media
Finally to wrap things up, here is trailer we put together for our piece ;)
youtube
0 notes
pgitgreen-blog · 6 years ago
Text
Our second round of play tests and further changes!
After performing further puzzle prototyping, we implemented some changes coming out of our first play tests. We updated the sequential path of our puzzles to provide a tighter and more linear experience for the player so they feel more immersed in the narrative whilst providing some scope for exploration.
Tumblr media
Puzzles
Matrix Birthday Puzzle (server controlled)
Facebook/Twitch themed hint system (server controlled)
Projector Jigsaw Puzzle *New*
RFID Lock Box (Arduino)
Filing Cabinet
Chest/Briefcase *New*
Refined Puzzle Flow
Player introduced to the attic as a detective to aid an investigation of a crime scene.
Player plugs in USB
Matrix shows with the player birthday embedded in ASCII balloons.
Player enters birthday on numpad to login
Facebook themed hint system, Twitch and countdown timer show.
Riddle/puns leading the player to the shredder bin containing the jigsaw tutorial slices for opening projector
Player opens projector and finds a book with RFID key inside
Player scans the key on the RFID lock box to get the other key.
Player unlocks the chains around the filing cabinet to access the files
Player compares file numbers with the names on the pin board to get the correct combination.
Player uses the combination found to unlock the numerical padlock to open the chest and find a briefcase with their personal file and photos inside.
Player reaches endgame sequence with an encounter with the stalker displayed on the screens.
Player is provided with a shredder for their file and photos.
Insights
The team invited 6 new players to try out our updated escape room experience. All players successfully completed puzzles and reached our end game. Upon completion of the game our team interviewed the players to gauge their reaction. All of which were generally positive. We asked them what puzzles they enjoyed most and what they thought of the general atmosphere of the room. We made small refinements to our puzzles to keep the challenge with clear affordances but take away any frustration players experience solving the puzzles.
Change log:
Updated the ASCIIs in birthday matrix to be more clearer to the player
Added a new sign to the RFID lock box to make it clearer for players to know where to scan the key to unlock it. 
Based on player feedback, we made slight adjustments to the end game to ensure the narrative intended makes more sense to the player; with scripted and custom sequences to make it more personal to the player.
Based on player feedback, we made changes to the pacing of hints, puns and riddles displayed to the player and how quickly to force skip puzzles if players struggle.
Introduced a post experience guide that will be given to players offering advice on how to protect their data privacy. Shown here.
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
Our first round of play tests and changes!
With the attic and prototype puzzles all set, flyers distributed around campus and the signup form live, we were ready to conduct our first play tests of our escape room.
We started out with 3 players attempting our escape room experience. We had technical difficulties with the lights which meant only 1 out of 3 players got to experience the attic with DMX lighting.
Insights
This was the first time observing players play test our puzzles outside our team. It was interesting to watch 2 out of 3 players not follow the puzzle flows in the order we set out which had some consequences to our intended narrative. 
For example, for our experience to work well a player must first plug a USB into a hub which will kick start the first puzzle (birthday matrix) leading a player to access the facebook themed hint system along with the twitch screen. However almost all players ignored the USB stick hidden in the book on the floor inside a police evidence bag. While we are able to force skip the first puzzle to turn on the hint system on screen we also found that during a play session not much focus was given when new notifications were displayed on screen as players were more inclined to focus on exploring the room. We also found that players were able to quite easily slide open the RFID lock box door to access the key without scanning the box. 
After receiving feedback from players, the team decided to meet the following day to rework the beginning and ending of our piece to more effectively transition players through our puzzles.
Tumblr media
Some of the changes we are iterating on:
New notifications of the in game hint system now have sound to alert players when a new post is displayed.
Based on player feedback, we reworked the beginning of the piece with one of us acting as a police detective which will give players a story and a role, along with instructions before they enter the attic.
Removed first puzzle with the USB stick now handed to the player before entering the attic instructing them to plug it in before exploring.
Added a new puzzle finding a the RFID key hidden inside a projector with wikihow instructions that players will have to jigsaw together*
Based on player feedback, we've added a briefcase where a player can find their personal file and photos locked away in the chest underneath the desk which which heightens the creepiness compared to keeping it in the filing cabinet with the others.
Introduced a new dramatic and thrilling endgame for the piece adding an encounter with the stalker on the screens and the music & lights go out, ending the piece with us providing the player with a shredder.
DMX lighting issues resolved.
Made adjustments to the RFID lock box to make it more secure.
*Below is the wikihow page that Rees put together for our new puzzle containing instructions players will need to jigsaw together to find the RFID key.
Tumblr media
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
‘You Know Who’ sign ups are now live!
To kick start play testing, the team launched our website today which has been themed to add background story and lore for prospective players. This can be viewed here.
Posters have been produced and distributed around campus with a barcode that can be scanned leading players to our signup form upon which we collect some information that allows us to personalise the escape room experience.
Tumblr media
We are excited to run play tests on our piece in the coming days in hopes we provide players with a memorable and thrilling experience. We will use feedback given from our play tests to iterate on puzzle prototypes and to improve the overall flow of our piece.
- Rees & Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
Bringing atmospheric lights and music
Some time was spent on thinking about how we wanted lighting and sound to enhance the ambience of our escape room experience in creating a thrilling and exciting atmosphere for players.
For lighting, we decided to use a DMX dimmer to modulate signals across 2 channels connected to desk lamps via a controller allowing us to achieve dynamic dimming lighting effects, emulating something similar to candle illumination. This is controlled by us using bespoke software in real time and gives the room a sinister atmosphere.
Tumblr media Tumblr media
In thinking about music we want players to experience whilst spending time in our escape room; we decided to use an original soundtrack called ‘Downtown District’ from a video game called Mirror’s Edge Catalyst. The game is set in a future dystopian city where no one has the right to privacy and civil liberties are thing of the past. This in some ways touches on the theme of our escape room experience. The soundtracks are composed by Solar Fields and we believe adds to a thrilling and sinister atmosphere we want players to ultimately experience.
youtube
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
Assembling our play space!
The team spent this week assembling the attic on campus. The creative facilities office has given us a couple of HDMI monitors and an iMac to build our piece. 
We made some changes to our room plan to better reflect our current puzzle prototypes and theme.
Tumblr media
We also met Nicky up there to help guide us with the setup of existing equipment in the room. The attic came with a DMX controller and some lamps for lighting, a surround sound system and a camera which we can use to record and stream players in the room allowing us to have control of the experience behind the curtain. The attic also had a filing cabinet, along with an old rusty looking chest, a couple desks, chairs, an old camera and plenty more. We spent some time deciding on how we wanted to use these props to give the room a creepy scenery.
Tumblr media Tumblr media
The theme of the room has been developed into a creepy crime scene with a narrative that involves players having to investigate the place. We believe that this will tie in quite nicely with our puzzle mechanics. We ordered some disposable gloves, evidence bags and police tape to enhance the room.
Some pictures of the final setup of the attic.
Tumblr media Tumblr media Tumblr media Tumblr media
We decided we wanted to limit what was raidable by a player around the room. So we ended up using the police tape to guide players on what was out of bounds to give them a more focused experience.
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
Designing and building our RFID Lock Box
In thinking about bringing a technical puzzle to our piece, I decided to embark on building a RFID Lock Box.
Components:
Arduino UNO
RFID Sensor (MFRC522)
Relay Module
Solenoid Lock
Buzzer
LEDs
Some jumper cables.
The way it works is it uses a solenoid lock and RFID module connected to an Arduino. A player would need to scan the correct UID key to unlock the box to access its contents. If the correct key is scanned, a green LED is triggered, if the wrong key is scanned, the player will hear a buzzer and a red LED will be triggered.
Below is schematic showing how the circuit works.
Tumblr media Tumblr media
Once, the circuit was built. I did a quick mock up of the physical design of the box to house the circuit. It took a while to work out the best way to build the lock mechanism.
Tumblr media
A prototyping process took place to work out the correct dimensions of the physical parts that made the box.
I first attempted to take accurate measurements of the components using a vernier caliper and made some sketches. Then using Adobe Illustrator and a laser cutter at our hatch labs, I first laser cut using cardboard to make adjustments to the measurements until they were perfect. Finally, laser cutting the box using clear acrylic.
Tumblr media Tumblr media
I put together a short video outlining the design and development process of building the lock box in more detail.
youtube
Code provided below
Tumblr media
If I have more time, I would like to add a function to allow the buzzer to play different melodies to the player based on the UID key scanned. I found a useful guide on this here.
I enjoyed putting this puzzle together and can’t wait to see it in action when we begin play testing our piece.
References
Arduino Projects Book, 3rd Edition, May 2015 - Scott Fitzgerald, Michael Shiloh and Tom Igoe
https://howtomechatronics.com/tutorials/arduino/rfid-works-make-arduino-based-rfid-door-lock/
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
Developing our prototype website puzzles further
Development of the control panel and various new puzzles on the website has been one of our most important aims. Over the past week or two, attention was focused by two group members (Rees and Tod) on developing more puzzles for the website, whilst Bobby focused primarily on hardware puzzles which incorporated technology.
In terms of the website powered puzzles, the idea is that the player will not have any reason to believe that the puzzles are actually on a website; the macbook powering the two monitors will be hidden away, and the centralised iMac in the centre of the workstation will be missing a keyboard and mouse. Instead, it will simply have a numpad which can input values from 0-9, making it perfect for one of our new puzzles.
Tumblr media
There are quite a few pages which are loaded through the website: 
the control panel, used by the group to ensure all pages are working correctly; 
the Facebook-themed page, used to give clues and hints to the player as well as to test whether their emotion can be manipulated through what we write as them; 
the Twitch-themed page, used to trick the player into believing that they are being streamed live across the internet; 
the matrix/boot screen displaying the player birthday in ASCII balloons, a new puzzle designed by Tod which will display when a USB is inserted into one of the monitors; 
the login screen, a page I designed to be extremely close to the MacBook login screen which will take number-only digits to login and allows us to push password hints for the birthday matrix puzzle to the player.
All of the pages on the website are tied together in some way or another. For example, the emulated Twitch website will always be loaded on one of the monitors. However, it will have custom code checking the database to see whether the player has signed in or not. If they have not yet signed in, the page will be completely black - giving the illusion that the monitor is turned off. If the player is logged in, the black overlay will disappear and the player will be able to view the monitor. This works the same for the countdown timer, as well as the login/Facebook pages which will redirect the user to the appropriate page depending on whether they are logged in or out.
Video below showing our new matrix birthday puzzle in action.
youtube
All in all, this allows us to create a seamless transition between the puzzle. Of course; the implementation is not perfect. The lower-left corner of the screen will display Google Chrome’s page loading text container for a short few seconds, and so eagle-eyed players may not be fooled by what we are doing. Thankfully, we’re not here to fully deceive our players, but rather to show them how easy it is for our data to end up online in one way or another.
- Rees
0 notes
pgitgreen-blog · 6 years ago
Text
Putting together our first prototypes & planning our space
Back from reading week, the team settled on the mechanics and the sequential flow of our puzzle prototypes and started to think about how we wanted to theme them.
Tumblr media
Player finds USB inside a book on the floor.
Player plugs in USB
Matrix shows with the player birthday embedded in ASCII balloons.
Player enters birthday on numpad to login
Emulated Facebook (hint system) and Twitch show
Riddle leads player to search the room to find the working RFID key. (2 placed around the room, one working and one non-working as a red herring)
Player scans the key on the RFID lock box to get the other key.
Player unlocks the chains around the filing cabinet to access the files
Player compares file numbers with the names on the pin board to get the correct combination.
Player uses the combination found to unlock the numerical padlock to open the chest and find a shredder.
Player is tasked with shredding their information found around the room.
Today, we revisited the attic on campus and sketched a room plan and agreed on how we wanted to use the space to develop our escape room experience and the equipment we would need to source.
Tumblr media
Finally, Rees and Bobby started crafting our first puzzle to hide the USB inside the book. That hot glue gun became our friend gluing 100+ pages together :)
Tumblr media
Meanwhile, I put together some profiles for the filing cabinet using sketch.
Tumblr media
- Tod
0 notes
pgitgreen-blog · 6 years ago
Text
A teaser trailer.
This week the team decided to give our escape room experience a new name that fits the theme and vision we have been developing.
Introducing...
Tumblr media
The team put together a teaser trailer to drum up excitement for our escape room idea ahead of the the mid term presentations.
youtube
We are excited to be able to share more soon. Stay tuned!
- Rees
0 notes
pgitgreen-blog · 6 years ago
Text
Puzzle prototypes and flow
During reading week, Bobby, Rees and myself met up to finalise our puzzle ideas and to put together a linear structure which follows our theme. Given we’re going for a single player experience we discussed the importance of balancing the challenge of the puzzles and their ease of entry. We also discussed how to organise the puzzles and decided on a player having one sequential path rather than doing multiple paths, since we wanted to ensure all players reach the same ending, giving out the message on data privacy.
We started by introducing a couple of new ideas for our experience. Bobby brought a new puzzle idea to the table, to build an RFID lock box powered by Arduino, where a player would have to scan a key in order to unlock the box and access its contents. Rees discussed evolving our emulated Facebook to become an in game hint system to give players clues during the game. I brought forward the idea of building something matrix inspired that could be displayed on one the screens to show the player their birthday which could be the passcode to login and display a countdown timer.
We also decided to scrap the pointillism and rotating mannequin ideas discussed here. The team felt we should focus on bringing completely new experiences to players.
We started by iterating over puzzle ideas and debating whether the puzzles potentially link to one another as well as discussing the viability of the concepts.
Tumblr media
We then agreed on puzzles to filter out which we felt didn’t fit the theme/flow or had too many constraints in making or a player completing.
Tumblr media
Finally after lengthy discussions, prototyping and iterating over designs we reached a puzzle flow with elevating creepiness to suit our vision and concept.
Tumblr media
- Tod
0 notes
pgitgreen-blog · 6 years ago
Text
An old rotary phone puzzle concept!
Today, I spent some time thinking about a puzzle concept where we could use an old rotary phone connected to an Arduino. When a player dials the correct combination of numbers on the phone, a sound file is played from an SD card reader connected to the micro controller. It is also possible to program it to trigger multiple sound files based on the numbers dialled by the player.
This puzzle could be used to guide the player to certain clues around the room or even the location of the next puzzle. We could also use it to bring about some narrative to our experience.
Tumblr media
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
Puzzle Ideation
This week the team met up and had a great brainstorming session to bring about some interesting puzzle ideas for our project. As a team, we had many diverse ideas we wanted to bring forward. So we decided to make a list of all our puzzle ideas together and rank them individually based on their creepiness factor and creativity.
Tumblr media
This can be fully viewed here.
We discussed our puzzle ideas with Sarah during our lab and offered us some helpful insights and advice. We were also reminded to focus more on the technical aspects of our project.
For the rest of the week, we plan to finalise and prototype our ideas in order to forge a trajectory for our puzzles. We also plan to revisit the attic to put together a room plan for our experience. Stay tuned for more to come!
- Tod
0 notes
pgitgreen-blog · 6 years ago
Text
Make it, Don’t fake it
This week we made some great progress in planning, production, and looking to the future with our work. We visited the attic last week and have spent some time beginning to plan out different ways we can use the location to our advantage.
This week was mostly technical, working on some of the core aspects of our project: the fake Facebook (Fakebook) and fake Twitch (Fwitch) which we will be using in the room. The project will be hosted online, here, and will be managed using the built-in control panel which has been developed and can be expanded on as our project ideas develop.
Tumblr media
The web pages were created using a Node.js backend with Express, Handlebars, and MongoDB to store all of the data. As the university blocks connections to the database directly, we had to upload the website to a server which could connect to the database through its own network connection. This is also the main reason that a control panel was made, as we would have otherwise been unable to make new Fakebook posts or update the events happening on Fwitch without it.
The two websites are actually very simple in the front-end. They were created to be pixel-perfect (more or less) replicas of the two websites, but were made from scratch as both websites had some very excessive and unnecessary source code which would have just slowed the web page down.
Tumblr media
Above is an example of vanilla Fakebook; without any contributions to the database at all. From the backend, it’s possible to add new posts which will appear within 2 seconds (there is a query to the database every 2 seconds to check for new posts; which is extremely lazy since there are much more efficient ways to do this (sockets) but that’s not really the objective here). Once a new post is found, it will appear on the Fakebook page.
Tumblr media
There is also the ability to add emotions to a post, as we believed that this could in some way influence how players behave when inside the room; telling them how they feel through a post will definitely trigger some emotion, though we’re not too sure about whether it will be a positive or negative one yet (seeing “excited” may actually have the opposite effect on the player).
And then, there’s Fwitch.
Tumblr media
Fwitch works in a very similar way: the entire page is fake, with none of the links, buttons, or icons actually doing anything - it’s just one page. There are many more controllable elements on here, however.
The first is the chat. The chat is completely randomised every time, and can be enabled or disabled at any time. The messages are randomly constructed from different arrays of strings being added together, with those arrays being made up of actual quotes taken by random chatters during some popular Twitch streams which we watched over the last week.
Tumblr media
Because of this format, it’s extremely easy to add new messages and remove them as we go, so that messages will rarely repeat themselves. As messages can repeat, though, we also wanted to make the likelihood of them being identical quite low, so random introduction strings may show (array random1) followed by random punctuation (random0) and then followed by random2 (always), which then has a small chance of having another random2 message added to the end. There’s then a while loop which will add emojis to the end of messages whilst a random number is greater than 0.7.
To add to the randomness, users are also random:
Tumblr media
There is even a 0.03 chance that a viewer will be a subscriber, and other random behaviour as well (such as whether they are a moderator, donator, or whether they subscribe to the channel during the video (and inside this, whether they subscribe with Twitch Prime or just with normal money). This is, of course, all fake as there are no viewers at all, though it greatly adds to the illusion of a flowing chat.
Tumblr media
In the code above, you can see how a user will be randomly assigned icons when their message is created. As the user does not exist, and we don’t care about storing any data on them, there is a chance that a user may appear twice with completely different icons.
The same goes for the colour of the username, which actually should make it more difficult for the player to be able to realise that the chat is fake.
The code at the bottom of the image demonstrates how messages are randomly constructed. The state variable is used to determine different game states that we can pre-program, which will be used to guide users in the right direction. For now we only have one other state: success. When this is set, the chat will (mostly) populate with messages related to that state.
Tumblr media
As development goes on, we can of course update, remove, and modify any of these strings.
In terms of future development, Bobby, Tod, and Rees visited the creative facilities office today (7 February 2019) and discussed our project idea in vague terms with Nicky and Peter to begin deciding on some of the equipment we wanted to use in the attic. We also decided to meet up early next week to continue planning puzzle ideas and start our focus on just a few well-themed puzzles which all tie in well together.
- Rees
0 notes
pgitgreen-blog · 6 years ago
Text
2 weeks in - Bringing our ideas together
We are 2 weeks in and our project’s general theme and direction has been decided and agreed by the team. We have settled on using an attic on campus and the team inspected the site today. Our plans are definitely coming together, with each member of the team bringing different skills. Johnny - our music expert is currently playing with the sound to fit our theme. He will be working on down-sampling and bit crushing with loops and granular synthesis. A good idea raised by Johnny was to enhance the experience by using the player’s voice and distort it which could really hit the fan when it comes to gradually raising the bar of creepiness. Rees’ work on emulating Facebook’s and Twitch’s web pages are coming along very nicely, imitating every element of those websites to perfection. Tod - bringing creative computing to our project, currently working on a concept idea around using pointillism which slowly draws the player’s picture to gradually reveal them at the end as well as designing some of the room’s aesthetics with articles and breaking news images, with the use of Photoshop to create a creepy crime related theme. Bobby - our physical computing guy has been putting together well thought ideas in regards to the hardware we could use for the puzzles involved in this project, from the mechanic of using an old rotary phone to a locked chest box being unlocked with a player accessing a shredder which could hold the dramatic ending to our piece.
Some general rules/ideas we’re bringing together :
No longer than 20 minute per player’s session.
Single player experience
Countdown timer displayed for the player.
Sound includes a degraded theme and old digital transferred data sound. 
The lighting could indicate the mood and the time remaining, hopefully to be able to control real-time.
Emulated Facebook to update the profile of the player and their status.
The use of pointillism to reveal the players face at the end.* - Tod
A mannequin head attached to a servo that follows a player around using infrared sensors and an Arduino. * - Bobby
CCTV camera where a player session could be recorded and shown to the player as well, but to overwrite it with old recordings (maybe for clues)
For aesthetic effects, there can be many screens in the room (imitating stalking) and a pin board where we can place clues for the players
An old recording camera and the rotating dial phone should also give a chilling sensation.
The puzzles are yet finalised and we are reminded by Sarah that the element of creepiness should gradually elevate as each puzzle is solved throughout the 20 minutes. There should also be a reason behind everything which we will keep in mind when designing puzzles.
Puzzle to possibly include a padlock (or any lock device) to have the code as the player’s DOB.
Ending right now is the shredder which we plan to have the player shred information which are so easily obtained by us of them, conveying a message about data privacy.
* These contain elements of past projects by our team members and will be considered for use for additional aesthetic purposes for the experience rather than core puzzles.
- Tod
0 notes
pgitgreen-blog · 6 years ago
Text
Portraying a powerful message on data privacy
With the recent news around the Cambridge Analytica Scandal, and the Edward Snowden Surveillance Revelations, all reveal how powerful data analytics has become with the exponential rise in the value of our data.
Tumblr media
Taken from pandasecurity.com. More on this here.
In thinking about doing an escape room, we ultimately want to offer players a thrilling and enjoyable personalised experience all about them. But we also want it to portray a powerful message about the importance of data privacy and bring their attention to how much they share online.
- Bobby
0 notes
pgitgreen-blog · 6 years ago
Text
It begins here
For our Pervasive Gaming & Immersive Theatre class, the team have been tasked with an exciting opportunity to build an interactive immersive performance piece. 
As a society, we experience a wide array of emotions in certain walks in life, whether it’s social encounters, stage fright or someone jump scaring you. We have become accustomed to sharing so much information about our ourselves both actively and passively, whether it’s something expressive or meaningful or an event that has happened which profoundly effects or changes us. We share this information comfortably as part of a crowd of billions around the world. But what if for a short time the spotlight was on you and with information you have shared coming to light?
Tumblr media
THE CONCEPT
The team assembled today to discuss the foundations of our project and to begin to put together a theme and concept.
Given the freedom we have developing this project, we decided to embark on building a personalised escape room experience on campus. One that is centred around the audience who experiences it. We aim to instil the emotions of anxiety, confusion and maybe curiosity bringing awareness of the information players share in the public domain. Thus, creating an intriguing experience that will be able to portray these emotions to the player.
We will use this blog to embark on a journey to give readers insights as this project develops. Stay tuned!
- Bobby
1 note · View note