Sanctuary: a process in game deign

Katie Liu
8 min readMay 10, 2021

My colleagues and I started what would end up being a longer game design process by asking each other an important question: What values are the most important to you?

Idea 1:

Our first idea, also titled Sanctuary, was a game focused on the value of self care. The game was essentially a desk where players could add objects such as journals and plants and other knick-knacks. Players would then be rewarded for writing in their journal or watering their plant with currency that could then be used in an in-game shop to purchase additional items for their desk. The idea was to incentive people to take time to complete tasks that would be beneficial for their mental health such as journaling about their day.

After receiving some feedback from other colleagues, we decided to scrap this game idea as concerns were raised about the use of currency. We realized the game promoted the idea that we have to do things for money in order to buy stuff for our mental health, which was definitely not the message we were trying to promote.

Idea 2:

My colleagues and I reconvened and after some more discussion, we decided to focus our values on gratitude, nostalgia, and friendship. Still titled Sanctuary, the premise of the game is an indie, narrative game in which the player cleans through a messy room and rediscovers past memories in the form of notes, old memorabilia, and other mediums to learn the true narrative. In constructing the narrative, we drew inspiration from our colleague’s friend who faced a move from Los Angeles to Seattle and was forced to confront the nostalgic values of the objects they were packing.

Research was done into pre-existing games for inspiration. Some games we drew inspiration from include Gone Home, as we enjoyed the orthogonal and panning views of the room, Hindsight, as there is also an emphasis on past and future, and Gorogoa, as it shares the same hand-crafted drawing aesthetic.

Our original pitch deck can be viewed here:

In-depth Info:

We created a trailer for our game. It is a video that sets the mood, gives a live demo of the game, and explains the game mechanics, concepts, and narrative.

Concept: The player follows a narrative in which they play the main character of the story. The player is tasked with cleaning a bedroom to discover a narrative. Players can interact with different objects that will explore the character’s past from childhood friendships, high school memories, yearbook messages, birthday cards, and other things. As a player clicks on these items, they will disappear. The game ends when the room is empty, and the player has discovered the entire narrative. The game is meant to serve as a therapeutic experience for the player to rediscover gratitude.

Narrative: The main character opens the door to their room, revealing a 2D space with a bed, desk, and items scattered around. The player thinks that they are decluttering a room, but they are really packing things up to move away from Los Angeles to Seattle, something they discover as they interact with the objects. The story is sentimental, it shows memories and notes of friends expressing their care for the character, as well as other memories. There are also things in the room that signify the move such as a map tagging Los Angeles and Seattle, or a google search of things to do in Seattle. At the end, the room is empty and it is clarified that it’s time to move away, and that while the player is moving to a new space, they still have all their memories to treasure and be grateful for.

Building the Prototype:

Our first challenge was to decide which platform we would build our prototype on. After discussion we settled on creating an HTML webpage. We divided the work into two of my colleagues (Ally and Adam) creating assets for the website and my other colleague (Jay) and myself coding the website. Ally and Adam drew all of the objects in Illustrator and wrote the captions for each object; Jay and I implemented them into a website.

The game was split into 3 stages for the prototype: dark, medium, and light.

Assets Ally and Adam created for the dark color scheme

We used an open-source collaborative coding platform called Glitch for our work. Using HTML, CSS, and a bit of Javascript, Jay and I created a prototype for our game. The biggest challenge with creating this prototype was deciding which elements of our original vision we could sacrifice due to our relative-inexperience in coding. The original idea of having objects disappear after being interacted with, responses to prompts being saved, and multiple views of the room, had to all be simplified for our prototype.

Our final pages in Glitch
4 main pages

We ended up simplifying the prototype to essentially 4 HTML pages. We wanted to prioritize the interactivity of each item. Each item when clicked would be highlighted in red and an info panel would pop up with more info on the object and a place to type in responses to questions. After interacting with all of the images on the page, the player can click the button in the bottom right to move on to the next page.

Next we faced the tedious process of importing all of the assets that were created by our colleagues and coding them into the website. The actual coding process for each item was relatively repetitive.

It involved adding the item and corresponding caption into the HTML:

Adding some Javascript for the info panel:

And some positioning in CSS:

We repeated this for each object: add the object to the page on HTML, create the interactive info panel in Javascript, and position the object where we want it in CSS. We added 18 objects total across the 3 different themes. My colleague Jay also spent significant time in making the prototype appear the same for any screen size, which was a big challenge as the objects would often appear in different positions on different screen sizes.

Our prototype is playable here:

Further Development:

As I mentioned previously, some functionalities had to be sacrificed in building the prototype of Sanctuary. I think we were able to capture our aesthetic goals; however in further development I would like to do further research into how to implement more of our desired functions via code.

We were able to successfully highlight each item as they are being clicked. For further development, I would like to see each element disappear after they are clicked on. Also I would like players to be able to zoom in on each item to see intricate details. For example, it would be nice for the polaroid wall to be able to be zoomed in on so players can see photos of the characters in the narrative together.

There were text input boxes for prompted questions in the prototype but we did not create a database to save answers so the answers typed by players disappear after the object is closed. For further development I would like to have the input players put to be saved and viewable later in an archive so players are able to reflect upon their answers throughout the game.

In general I would like the room to have more views, perhaps an orthogonal view and the ability for the user to have more mobility in panning and zooming around the room. I also think there should be more items so it’s more cluttered and more reminiscent of cleaning a room, which is the concept. Also there will be more background colors and themes in further development so it is a longer game and a longer process before getting to a clean room.

Reflection:

As a very nostalgic person myself, I frequently keep a lot of material goods in order to remember the events or people in my life. This process of creating this game has made me introspective over the items in my room and why I keep them. Moreover I’m cleaning out my room soon myself as the semester comes to a close and I move to another apartment next year so I will be going through my items in real life just like in the game. This process has also made me more analytical about the underlying messages in a game. In the first idea for Sanctuary, I was never aware of the underlying capitalistic message we were sending about needing money to buy items until it was pointed out to me. Additionally, the process of prototyping our game has made me more confident in my coding abilities and also very satisfying to create a functioning prototype that people can play. I do hope this game allows people to reflect about the relationships they have with those around them and the importance of the people in their lives. Even when we are constantly consumed with the fast-paced speed of our lives, it’s often important to take a step back to cherish the relationships we have with those we care about.

--

--