We set out to create an MVP in 5 weeks, and we did it! We had great feedback and live demoed with 20+ people playing, and also presented to Twitch streamers and employees.
In our second phase, we built the designs and the framework for the Web UI 2.0. Going forward into the summer and beyond, we will implement the rest of our new features, as well as new game graphics.
Ideation
To begin the ideation process, we sketched house layouts and discussed how the house layout, atomosphere can affect possible game features.
The level design of the game is the backbone in which the rest of the game will be built upon, tackling
this challenge first would let us be more efficient in brainstorming how other features would fit the level.
Our first sketches and discussion revealed that we
wanted a house with enough rooms for exploration but also feel open.
Eventually we consolidated our ideas and combined it with my own design.
The house has an “ambulatory” design, meaning the player can move in a circular fashion
through the space. We wanted the player to be able to have multiple options to enter and leave rooms during the player’s exploration.
Multiple entryways and doors means the player can gain access to different parts of the house quickly, and also escape from the ghost easier.
However, this also means the ghost can follow the player he/she forgets
to close doors during his/her exploration. In this sense, we wanted to foster an atmosphere of exploration and uncertainty for the player.
With the house design finalized, we were
able to envision where to place objects in the house and where the player and ghost can spawn.
The next step was to figure out how collaboration was going to work in the game. We knew that we wanted the viewers to have access to separate screens from the streamer,
but were not sure if Twitch or an external client were the better option for this task. Before making this decision, we decided to sketch some interfaces to see what exactly our final product would look like.
Using that information, we could then make an educated decision about which outlet would give us the optimal results for our interface.
The problem that we were asking ourselves was: how can we show the information from viewer side?
The information includes: 1) chatting message. 2) ghost position information.
For the website, we created a basic sketch of what we wanted it to feature.
We decided to build an interface for the viewers directly in the website. This way, viewers are able to access the cameras in order to see the location of the ghost, and are able to interact with streamer.
Originally we thought we could integrate our UI into Twitch itself, however we realized that was not
feasible in the initial 5 weeks we had. We needed to move fast, and decided to build our own, simple UI in a website.
Instead, we opted to stream the gameplay on a seperate website where we can easily custom build the UI we wanted for viewers
to interact with.
Implementation
We decided that our game should have a narrative, so that the player can feel more immersive about the tasks he/she will have to accomplish in the game.
Scene 1: Introduction
“Alone. Yes, that's the key word, the most awful word in the English tongue. Murder doesn't hold a candle to it and hell is only a poor synonym.”
― Stephen King
Samantha Price is a scholar and an avid fan of the occult. She spends her free time traveling to allegedly “haunted” locales trying to gather evidence of the paranormal. She sets up cameras and audio equipment, hoping to gather the data she needs to finish her documentary on the paranormal.
Aiding her in her endeavor are a handful of friends from across the country who watch the camera footage and update Samantha as events unfold. Despite having friends who are willing to accompany her, Samantha believes that she must hunt alone, as it is believed that ghosts fear crowds, and she also believes that having multiple footsteps and multiple voices can dilute the evidence, thus making it less credible.
So, as always, Samantha is all by herself for the investigation.
Today, she has come to the abandoned Vaturo estate in rural New York. It is the former residence of Dr. Vincent Vaturo, a psychologist who, over time, transition into an experimental physicist. His goal was to see if the psyche could be split into its separate parts to be studied.
Dr. Vaturo, during an experiment gone wrong, is said to have successfully split his psyche, killing him. It is rumored that Dr. Vaturo, who died tragically in the house, now haunts the house as a malicious spirit that seeks to find a new body to possess and continue his research.
(Transition)
Scene 2: The Hook
Samantha comes to the house at 7 o’clock PM on August 13th, 2017 to set up her equipment. The house is spacious and well preserved, with everything that Vaturo owned still in the place that it was when he died. Samantha wonders why this is the case. She puts a camera and microphone in each room of the house, double checking each piece of equipment to make sure that it works. At approximately 10:05 PM, Samantha remembers that she has left her own personal camera in her car, and tries to leave the house to go out to her car and quickly discovers that the front door has been sealed shut by a mysterious force.
Suddenly, a gust of wind rushes through the hallway, and to Samantha’s shock, a spectre appears in the hallway. (Show picture of the ghost)
Samantha is frozen. Even her mind has paused, unable to think or to ponder. The specter slowly wanders toward Samantha, eagerly eyeing her with hunger and lust. It begins to open its maws in an otherworldly yawn-like gesture, eager to devour her. Time has frozen as Samantha’s life flashes before her eyes; her past becomes a whirlwind of memories and distant beauty as the horror of a final present looms before her eyes. The specter of death lowers its face to Samantha’s and begins to inhale, and Samantha begins to feel her spirit lift from her body. She is helpless, lost, and cold.
Then it happens.
The sound of an object falling in the sitting room startles the spectre of Vincent Vaturo, and he halts his feast to go investigate. Samantha’s spirit falls back into place, and she regains her senses and strength and promptly runs off into the adjacent room, shutting the door behind her. She finds a letter on the nearby table, and this is where our story begins…
Scene 3: The Conclusion
Once the exorcism has been performed, the ghost yells out and is swallowed in a cloud of light, disappearing from sight. Upbeat music starts playing, the game ends, and the player receives the following message:
“Congratulations! Not only did you survive the night, but you defeated the spirit of the rogue doctor! Now the doctor and his family can rest peacefully, and Samantha is safe. The door unlocks and Samantha doesn’t even bother picking up her equipment, and instead promptly starts her car and leaves. She isn’t sure if she will ever ghost hunt again. For now, her and her team decide to take a break from it and become involved in charity work. In particular, they decide to volunteer to help people with mental illness.
As for the house, several realtors attempted to sell it, to no avail. The dark history and general aura of the house deterred dozens of interested buyers. Eventually, an odd fellow by the name of Frederick Allman decided to buy the house and turn it into an occult museum. To this day, people from all over the world come and see various oddities and specimens, as well as to hear the story of one Dr. Vincent Vaturo, who is said to have learned how to separate the spirit from the body, and who is said to still haunt the hallways of the very house that the spectators are standing in. No one knows for sure if the stories are true.”
Read Full Narrative (5min read)
Refining the in-game UI
We explored a simple UI for the player in the form of a mini-map or radar.
We wanted the player to be immersed in the game but also have
an idea of his/her surroundings, and an actual Heads Up Display would take away from that. We decided the player can press a key to bring up some sort of navigation.
Streamers have access to the layout of the house as well as the position of the ghost and themselves. This option makes the game more playable. However, it reduces the horror level.
We decided to limit the information the player has to only roughly where the ghost is.
Players can only know the relative position of ghost to themselves. Because this is the only information about the ghost and the house, the game's horror level increases.
In this scenario, streamers will try to communicate more with the viewers to figure out the ghost's location, on top of being on edge as he/she explores the house.
Modeling the House
As we moved forward with designing the house, we first figured out what should be in each room, and where the cameras should be facing.
Having a good idea of where things are makes it alot easier to refer back on when building the house in 3D.
We found out we could leave some parts of the house camera-free, to produce a gap in the viewer's knowledge. We were also able to think about
how each room should look in order to create a better horror atmosphere.
We created the house in Google SketchUp, and imported the 3D model into Unity later on.
We opted for building the level outside of Unity to take advantage of SkethUp's efficient 3D modeling features.
We were able to iterate quickly and import those changes into Unity.
When we were adding textures to the model, we realized that certain patterns/colors evoke different emotions
for a player (familiarity, fear, confusion etc.)
We created 3 iterations of Hi-Fidelity mock ups of the web interface which the viewers would use, and conducted user studies using them to validate the UI design decisions we were making.
Solution 1 has a compact design, we sought to fit everything neatly.
We wanted to have the map bigger, and we didn't think the chat will be active.
When testing with users, we found out that the chat is extremely important, and we could only see 3 messages at a time.
In solution 2, we enlarged the chatbox and overlaid the map ontop of the camera stream.
We thought the map overlaid ontop of the camera stream would look cool and make way for the bigger chat box.
Although the chat was bigger, users felt the overlay very distracting and interacting with it funky.
In solution 3, we decided to sacrifice the screen real estate in order to fit both the chat box and map.
We found out that the camera stream didn't have to be as big as the main stream, this paved way for putting the map next to it.
When we tested this, our users were very satisfied with the layout. Based on their feedback, we decided to stick with this solution.
We implemented solution 3 using HTML/CSS/JS, and PHP for the backend. We also had to opt for still images from the camera instead of a live feed.
We realized using a live feed for the camera feed was too complicated, instead we opted for a simpler solution.
We loaded the database with a set of still images that would trigger to show a version with a ghost if the ghost was in the room.
Thanks to our user studies, we were able to code the website knowing the design decisions were validated.