Author: Mari Calderon

Project Description:The boisterous sound of cicadas in the summer, two kitsune statues on either side of a road leading to a pagoda, a series of gray gravestones surrounded by overbearing bamboos… these are the first things that users find themselves spectating once they enter Paths of Perception. This experience, originally designed and intended for the Google Cardboard yet executed for the Mac and PC, places players in the verge of reality and fantasy as they are faced with the danger of getting possessed by a nogitsune (a wild fox found in Japanese folklore known to trick and even possess humans). To avoid losing complete sight of reality, users have one last chance: to correctly identify three objects that have changed in their surroundings between the time they first found themselves in the cemetery and when they enter the spirit world. 

Since users in Paths of Perception are given no mobility apart from the possibility of rotating 360° around the same spot, the design of this environment was carefully done to make the most of only one main point of view: looking outwards. As such, everything is placed in a loose circle surrounding the user, indicating that they somehow are the main focus of the experience. The “storyness” of this space then comes from a change in this environment. What at first seems mundane and everyday suddenly turns eerie and even mysterious, as the sky turns dark with shades of red, a slightly purple tint encompasses the environment, and two nine-tailed foxes run towards the user. The experience’s story is then driven further through the use of text: prompting users to point and click at their objects of choice as well as providing another alternative by supplying riddles hinting at the correct objects.

Process and Implementation

Brainstorming and Game Logic

One of the largest parts of the process of bringing this project to life was actually the idea and plot development. Initially, Neyva and I used the key words of “escape room” and “wonderland” as starting points to try to design a story that was driven by having an objective (like escaping from an escape room) and also presenting mystical qualities to it. Since at the beginning we were designing the experience for the Google Cardboard, we also wanted to constrain ourselves by having a small and very detailed environment that would only require users to look around to get a sense of the narrative. We eventually reached the idea of drawing inspiration from Japanese folklore, particularly that surrounding the kitsune, fox spirits known to be benevolent or malevolent depending on their type, and also known to have intelligence and be able to shapeshift. Reading further, we realized there were various types of kitsune, and we decided that we wanted to form a narrative surrounding the possibility of making a choice between two of these foxes, with no knowledge of which one was the bad or the good fox. After weeks of user testing and reconsidering our idea in relation to what the user’s actions would be, we eventually landed on our final concept: where users start the experience by being possessed by the nogitsune (bad fox), yet are given the possibility of breaking the curse by selecting the three correct objects that changed in their surroundings. To keep our original concept of having the user choose between the two foxes in front of them, we decided that these foxes would also present the user with a riddle hinting at the objects that supposedly changed. The good fox would hint at the three correct items, while the bad fox would contain one incorrect one. With no clue of which fox is which, users are invited to take a gamble and choose which one’s advice to follow.

Implementation

1. Environment

The environment’s design was an aspect that took a lot of trial and error to get just right. Originally, as shown in our initial storyboard, we intended for the user to be in the middle of a road passing through the surrounding cemetery. The two foxes would then come towards the user from either side of the road, with the visual distinction between the two of them serving as indication of the difference in choice that they represent (one intending to help the user, the other intending to deceive). 

Considering this layout with a main road crossing through the cemetery, Neyva and I unconsciously created a larger space than we initially envisioned, causing a lot of the items to only be able to be seen from afar. It was until after we did our first user testing session in class and asked people to find 2 quite obvious changes in our environment that we realized how the environment we had created was not conducive for our type of experience. A lot of users mentioned the desire to walk around and explore further, getting close to the items they could only look from afar from their one vantage point. The amount and variety of objects we had also contributed to making users feel overwhelmed rather than guided, which was a significant reason why we decided to reconsider our layout design to make it more small and personal, ultimately contributing to our story as well. As such, we decided to create a sort of square or small circular opening where users could see everything from their location and height. Having this more intimate setting then allowed us to be more careful with our object placement. We decided to decrease the variety of items and be more selective. Gray gravestones would surround the user yet serving as a clear background, while distinctive and even colorful items would clearly serve as the foreground and as clear focal points. Having only one road also served to give context by indicating the path where the user potentially came from, while also providing closure regarding its purpose once the foxes use it to run towards the user. 

2. Interaction

With our new environment design, we addressed one of the main modes of interaction of the Google Cardboard: looking around. We decided to take advantage of the second mode of interaction, that of using the pointer by using it as a means for users to choose the items they wanted to select, as well as “submitting” their items by lighting the candle in front of the foxes. To make this pointing and clicking intuitive, we decided to change the color of the selectable items. Once selected, their material color also changes permanently to suggest that the choice has been recorded, unless clicked again (causing it to deselect and go back to its original color). Having more than 3 selectable objects, and having these be very recognizable items such as the red lamps, and a detailed lantern also serve as a way to encourage the user to try to decipher the riddle, as no two items look the same. In a way, by presenting the riddles, our game provides two different experiences: one where users try their best to remember how the environment was originally or take wild guesses, or one where users could instead take their time to decipher the riddles and muse about which of the foxes’ advice to follow. Having users light up the candle at the end of the sequence also has various purposes. First, it serves as a clear and easy way for the program to know when to analyze the items that were selected and trigger the appropriate ending. Second, and most importantly, it works as our way of directing the user’s gaze back towards the foxes. Originally, once users made their last choice they would stay facing towards the graves and the cemetery, missing the foxes’ movement at the end according to their right or wrong choices. By having the additional step of lighting the candle, they are now naturally facing the direction where the action will happen, finally having closure on the triggered outcome.

In terms of the logic to make all of this possible, I did spend a lot of time figuring out how everything would happen properly. I learned how to use coroutines in Unity to properly time and set delays between different events. This was key for showing and disappearing text, as well as for triggering the fade out transition effect. Doing the small changes in the environment such as rotating the foxes, changing the fence to a new one, and changing the material of the small gate were actually surprisingly simple. In order to properly check which items the user clicked on and determine whether they are correct or not, I wrote a script that added or deleted objects into a “selected items” array accordingly. Once the 3 choices were made, the program then searched whether the correct items were “contained” into the array, and triggered the final scene. Finally, figuring out how to switch between the fox animations was also a small hurdle I had to overcome, particularly since our bought prefab’s animations were read-only, so I had to find a workaround. Regardless of these challenges,  piecing all of these elements together to create our functioning game was a great learning experience.

Reflection

Overall, even though it was quite a long, and at times frustrating process, I am really happy and proud with how our project turned out. As mentioned previously, Neyva and I originally wanted to make an intimate experience that made the most out of a small environment that drove our story forward. Considering the final result of Paths of Perception, I feel that we were definitely able to fulfill our own expectations, as we continuously user tested outside our class sessions with our roommates and adapted our project accordingly. The final choices we made regarding the environment’s layout, the tone of the text and the riddles, and even the final placement of various objects were done with confidence because of this. Since the very beginning, Neyva and I were very clear about creating a project whose concept we were passionate about, and whose scope was realistic given our time, skills, all the while considering the fact that we were only two people in a group. In the end, we were able to keep these in mind while ultimately creating an experience that successfully conveys our story and intended mood.

Additional photos:

Project Description
Fire Planet is a small narrative experience that places users in the position of a firefighter in an alternate world/planet engulfed by wildfire. In this world, civilization has been reduced to living under a protective dome, with water sprinkler units protecting its outside perimeters. Placed in the midst of a catastrophe – where one of the sprinklers has malfunctioned and wild fire approaches the city – it is the user’s role to use their powers (in the form of magical projectiles) to extinguish the flames and fix the sprinkler. This activity reflects an alternate world activity as it is an everyday action for the firefighter/protector in this world, yet which is in a setting that is quite distinct from the reality we know. 

Process and Implementation
Brainstorming
The brainstorming process for this project with Will and Steven was actually quite time-consuming yet fruitful. We started by pitching any action that occurred to us, and which we thought would be interesting to explore and use in our VR game. After much deliberation, and after considering a lot of crazy options that in retrospect would have been too ambitious to successfully complete, we realized that what we were missing was deciding on an experience that would fully capitalize on the advantages and affordances of the VR medium. This realization eventually led us to our chosen concept: that of a protector/firefighter who must protect their city from flames. The action that the user would be doing in this scenario was fanning two large fans to extinguish the flames. We believed that the action of fanning something in the air would be an interesting game mechanic to use, especially in VR. In terms of what would be everyday in this world – we decided that the idea/action of extinguishing flames (and thus suggesting that in this world fire is also dangerous) would work well to suggest the user’s objective. However, the alternate-ness would then emerge through the means of putting out the fire, along with the setting itself (which is on a vast, desert-like planet with a dome-encased city in the distance). Making the decision of how we would switch this concept to a non-VR game was easy – instead of fanning the fire out, the user would now throw an orb at it. This decision was made since we realized it would be more intuitive for users to use the keyboard to shoot something, rather than to fan.

Implementation

The first step we made once we finalized this concept was to divide the different components we had to work on to carry the game out successfully. These were the components:

1. Environment

The environment was the most straightforward part, as we all had experience with it from Project #1. Steven was in charge of bringing it to life – adding the dome and the city, using a rugged landscape hinting at the alternate-ness of the environment, adding fog and then finally adding the sprinklers and the fire. Although this environment didn’t require too many components, the careful placement of them was crucial, as they were key in framing our narrative. For instance: having a wall of fire behind the water particles suggests that these flames are somehow contained to their space, and are thus safe. Placing other fires in front of the user would suggest that these are the ones that are dangerous for the city and must be extinguished. 

2. Interaction 

The interaction was further divided into more parts. These involved rendering the predicted projectile path for the magic sphere as well as shooting an object in that same trajectory, having collision detection between the user’s projectiles and the wildfire, and finally having the water sprinkler reboot triggered by the user getting close to its vicinity. Out of all these, my main role was to render the predicted projectile path and enable shooting through that same path. To do this, I followed this tutorial that demonstrated how to create a line rendering script as well as a spawning script that allowed projectiles to be shot at that same trajectory. The script was also easy enough to be able to fully customize the look, location, and angle of the line, as well as to change which object would be shot, making these components easy to combine with Will and Steven’s work.

3. Character 

Since we were using a first person non-VR character, we also wanted to show our character’s hands and also show a type of shooting motion that would hint at the fact that the user itself was generating these magic spheres. When we combined the project, we made sure to sync the activation of the hand animation along with the shooting of the orbs.

4. Combining all of these to create our story

After getting the foundational interactions done, a lot of time was also spent on tweaking the experience and adding enough information/hints for users to understand the story they were placed in the midst of, while also being able to apply the game mechanics to fulfill their objective. Due to the linearity of our experience, this was an aspect we really struggled with in the later stages of this project’s development. At first, we weren’t sure if it was obvious for the user which fires they were meant to extinguish and which were actually contained by the sprinklers. We even reached the point where we changed the story completely to the point that we took out the sprinklers entirely and the only goal was to protect a tree that got caught in fire. In the end, after much deliberation, we decided to stick to our original idea, while making small yet effective changes in the design of the game that would make the story more clear and intuitive. For this, we ended up changing our sprinkler object to one that was more flashy (and even included an animation!) and added a large, flashy cylinder surrounding it that would always indicate the user which direction they had to go.

To be more consistent on components that were separate from the environment’s objects, we matched the look and color of the cylinder with that of the line rendering. We were also very careful with our choice of narration – we didn’t want it to just sound like instructions being read on screen, we wanted the person talking to feel like another character in the story, thus building the universe they belong in. Through a carefully made script, we tried to give enough context about what was happening in the story while also tying in a lot of the components that would have otherwise seemed a bit random and misplaced (such as the water fountains). We also edited it in Audacity to create the feel as if the voice was coming from a sort of communication device – enhanced by the white noise and static we added into it. 

Reflection/Evaluation
Overall, I feel that we did achieve an alternate version of this activity, even if it was a very specific one like putting out fires by throwing a magical spell at them. As mentioned earlier, a lot of the latter part of the development process was spent ensuring that the experience offered enough affordances for players to carry out their mission. Obvious indicators, such as the turquoise cylinder and the color-matching projectile line rendering were key in establishing a relationship between the short term objective of putting out the fires by aiming at them, and the long-term goal of reaching the broken water sprinkler unit. Placing the extinguishable flames in a loose line going towards the broken sprinkler was also an effective choice that naturally led users towards their end goal. Though at first it was hard to do the transition away from VR, I’d say that the medium ultimately didn’t majorly affect the implementation of our idea. Our story was there – we just had a slightly different way of telling it now. Finally, I feel that the end result really reflects the mental image most (if not all) of our team members had of the experience. Initially, we each had our own mental image of how the experience would look and feel, but I’d say our game combined all these conceptions we had really well, which I am really happy about. 

Agency question: 

In Fire Planet, a “meaningful” action that we designed for the user is the ability to throw magical orbs, particularly for the purpose of extinguishing fires. This action is triggered by aiming with the mouse and pressing the spacebar to shoot. The design of it incorporates various aspects outside from this pressing mechanic. The projectile path render facilitates the process of aiming at different objects, since the position of the mouse on the screen does not necessarily reflect the raycast aim of the game. The positioning and throwing animation of the hands that gets triggered when the player shoots is an additional element that aims to situate the player more into their character. We didn’t want it to seem like magic orbs are just appearing out of nowhere, which is why having this hand motion was crucial to situate users into the character of our firefighter. The meaningfulness of this throwing action comes with what it is able to allow, which is the ability of reaching the broken sprinkler and fixing it. In a way, this action is a crucial plot device for our story. Having additional outputs from throwing the orb, such as having smoke emerge from the hit location as well as emitting a sizzling sound when the fire gets extinguished are also choices meant to enhance the experience of carrying out this action.

Game demo:

Project Folder | APK

Description
Crystal Cave is a 360° experience created for the Google Cardboard that immerses users into a small cave containing glowing crystals. To guide my design, I strove to create a cave that would have a serene and peaceful identity. To create the calm experience I was aiming for, I focused on making this environment one that did not look like a generic cave, and decided to include various mysterious, glowing crystals to do so. As such, the experience is designed in a way where the user finds themselves standing on a rock in the middle of a pond, looking at the mouth of the cave and the mountains outside or looking around inside the cave, eventually “discovering” a large assortment of glowing crystals at the end of the cave. 

Process and Implementation
To achieve the peaceful identity I was striving for, I first looked for references and sources of inspiration that had this mood/atmosphere. I first came across The Long Dark and was instantly captivated by the vast, yet tranquil environment it portrayed. Using this videogame as a main source of inspiration, I created two moodboards. The first moodboard contained a lot of images of large, mountainous and snowy environments. After deciding that this would perhaps look a bit too generic and not quite alternate, I created the second moodboard, which contained an assortment of ice caverns with streams of water and crystals, and which lined up better with the serene atmosphere I wanted to create.

Now that I had an initial idea of the general visuals, I created the following storyboard/sketches. As seen in the composition below, I decided to place the user in between the mouth of the cave (which would show a glimpse of the world outside) and the end of the cave (which contained a series of elevated rocks with large, glowing crystals).

In this initial stage, I was only certain about the composition at both ends of the cave, and not in the other surrounding walls. Once I started working in Unity, I started with these two parts, and decided to design the remaining viewpoints as I developed the project.

Once I started working in Unity, I deliberately created a place that naturally guided the user’s attention through the careful placement of rocks, stalagmites, and crystals, and through the deliberate use of lighting (both from the crystals lighting other parts of the cave and from the moonlight coming from outside). For instance, as shown in the still below, the rocks in the pond along with the rocks at the end of the cave naturally guide the user’s attention upwards towards the largest crystal atop the rocks.

The biggest aspect that created the peaceful and alternate “feel” of the environment was definitely the crystals. Their cool teal color and their emissive glow was key in producing a serene atmosphere. Their lighting also afforded me with a lot of possibility regarding which aspects of the cave would be darker, and which ones would be less obscured. This then really guided me throughout the process of designing parts of the cave that would otherwise just have been empty. This can be shown in the following screenshot, where the crystal’s glow is used to suggest at the surrounding stalagmites. In this manner, the cave loses its potential of being scary, as certain areas are not entirely obscure. In a way, it could be said that the crystals themselves emit peace.

Reflection/Evaluation
Overall, I feel that the project implementation does reflect the serene identity I was striving for. As mentioned previously, the emissiveness and glow of the crystals inside the cave were key in creating a soft and peaceful atmosphere, and in making the cave feel more like a place rather than just an empty cave. Their placement as objects that directly countered the darkness of the cave contributed to producing an environment that would have otherwise been hostile. Looking back at my moodboard and initial sketches, I feel that this final outcome gives justice to the environment I envisioned, which I am really happy about. Regarding the medium, building for Google Cardboard versus building for the PC really gave different results. In the Cardboard, the whole environment looked much brighter in general, and the lighting lost its soft edges and quality. However, it still maintained itself as a serene environment, which is what I was striving for. Using low-poly visuals in Unity also contributed to the calmness of the environment, as the lack of hyper-realistic visuals created enough of a visual separation between the real world and this alternate crystal cavern.

Final Project Screenshots