Zodiac Race: Interaction Design

It is a 2-week team project from the Building Virtual World class at CMU.

We created a VR storytelling experience on Oculus by Unity.

Team: Leon Wu (Programmer), Shelly Xiao (Programmer), William Jin (Sound designer), Sitong Chen (3D artist), and Annie Huang (2D artist, interaction designer).

Opening Animation: 2.5D Art

Opening Scene: We played with the perspective in VR world.

It was a time-consuming staging and arrangements back and forth. I drew the ‘2D environment’ for the opening scene, and all the skybox, and worked closely together with the programmer setting the 2D assets in Unity to create the ‘2.5D’ effect.
The way it worked was I went into the VR world figuring out the exact staging of each piece of 2D art while he adjusted the position simultaneously according to what I was seeing in the VR. After the environment was staged, we then time-coded the camera, to create this opening scene.
We were surprised by the final outcome, the ‘2.5D’ art scenes exceeded our expectation. Worth those sleepless nights in two weeks of production time!

Interaction Design

The biggest challenge of this game was NOT the insane 2.5D art, but the storytelling. We decided early on that we wanted to make a comedic storytelling experience, where the guest would have fun, and (hopefully) laugh out loud.

Comedy is hard.

(Storyboards form first week, and final version on the second week.)

Our story was adapted from several old Chinese fables. On the first week, we received feedbacks from the instructors that “Everything sounds fun and interesting, but they don’t make sense together.” Yes, we didn’t really think too much before we jumped right into creating assets, prototyping, and testing. It was a team with great talents and impeccable efficiency. Now, that we had all those beautiful 3D models and animation, smooth game mechanics, awesome music… how do we put them all together?

We had one more week left. After we got the feedback, I sat down at my desk, trying to piece everything together. I had no idea how it’s gonna turn out. I listed out all the plots, characters, actions, and events we had decided on. After drawing up a basic structure, I further developed all the narratives, sound effects, and the turning point/purpose of each event.

(The Storyboard I drew from the first week, building up the sneaky character!)

I followed the developmental curve of the main character. We were creating a sneaky mouse, whom pretended to be-friend with the guest– a cat in the game, but in the end the mouse will betray the guest. Every scene and event was about building up a cute, lovely, and friendly mouse, except for the final turning scene where he suddenly turned into an evil look and kicked you off to the river.

Here is our biggest problem, if the game ended here…, the guest would be left at being betrayed, lost the game, and had nothing satisfactory out of this experience. Then what?

“Betrayal is a tricky element to tackle in storytelling.”, our instructor said, “You want to make your guests feel like they’re winning, they’re smart, they’re in control. If not, what do they get out of this game?“

What do the guests get out of an experience?

Satisfactory is the root tricky thing to tackle. Given the tight timeline we had, if I couldn’t answer the betrayal scene by that afternoon, we must pivot our plot design. “How do I make you happy again after someone betray you?” The answer you’re having right now, is the answer we went with. R-e-v-e-n-g-e. In whatever form, the guests need to be given the feeling of some sort of revenge.

(Simply plucking the feathers out of a rooster or washing a piglet in VR can be satisfactory, too? But we want more.)

“Can we punch him?” I asked the team. And to make this punch more satisfactory, I wanted to intensify the feeling of betrayal by creating a sense of commitment up front. I proposed we give the guest simple options from time to time, to create the feeling of it was your decisions that drive the plot development. It made people feel more committed to and convinced by what happened next.

We added a plotting scene where the mouse approach the guest to indicate their bonded relationship, and plot about how to win the race together as a team. And they shared a promising gesture as a commitment, High five!

(By this interaction design, we also intrinsically revealed that the guest was a cat in the game by showing off the paws you were controlling.)

They did all kinds of sneaky and weird tricks to get themselves ahead of the game. Reaching almost to the destination, still, the betrayal happened. You dropped into the water, heard a splash, and it all went dark.

Anger. Frustration. WTH?

The following scene was designed to mimic your eyes slowly opening, and brought you to the presenting ceremony, where the mouse was honored the first.

Angrier. WTH??? You can still see your paws dripping water.

Next scene, we pulled back to the old scene where the mouse made the committing “high five” with the guest.

“We’re good right? No hard feelings.” The cute, sneaky mouse raised his little hand. It’s so cute that it makes you even angrier.

Here is one of the best reaction we got from the guest playing the game:

(This is one of our instructor, Jesse, he played both our first and final version of the game.)

Satisfactory! Just when you think you’re playing out of the box, unwillingly high-fiving the sneaky mouse with a hitting act… We were prepared for you. : )

Here is the blue-sky.. interaction map I drew over that sunny Tuesday afternoon.

The interaction map clarifies all the actions, narratives, events, options given, and what audial and art assets needed for each part. It helped us vision the whole picture, and know exactly what were needed to be done, and where they fit in. After that, it’s the battle between getting enough sleep and getting them done! Again, it was team of talents, whom literally pulled this off in one week.

The Final Recording of the storytelling VR experience we created.