Wonderland - Production Process

Scene Design In Prototype Stage

According to last semester's progress, I still need to do the Rabbit House scene, the Alice Room scene, and the Menu. Of course, I also refined existing scenes. The following images are the scenes I refined during my semester break.

Rabbit Hole

Rabbit House

Room 1

Room 2

Room 3

Tea Party

Alice Room

Scene Refinement

Since this is the production stage, I spent every week refining a scene.

Rabbit Hole

At the same time, the floating objects in the Rabbit Hole scene are not enough, so I added some floating objects.

Time Zone

I didn't make too many changes to the Time Zone scene. Just added an instruction paper so players know how to interact with the clock.

Hall

I added some floating items based on the Hall scene made during prototyping. Since the Hall is the bottom of the Rabbit Hole in my design, it would make sense to have some floating objects and allow the player to connect the two scenes together.

In the final outcome, I replaced photo frames with 3D models (originally images).

The Flowers

The background of The Flowers scene is too empty, so I added a mountain full of fog (the Tea Party is on this mountain). Also, the garden at The Flowers was pretty empty, so I added some fallen leaves and a road sign. (It says where can lead to Rabbit House and Tea Party. Because I designed Rabbit House in the middle of the mountain, and Tea Party in the mountain)

On the other hand, I remember my supervisor said that the flower design can be more fantasy. So I spent some time improving these flowers. The draft below is my modification of the existing flower design. (some flowers play musical instruments, and some flowers dance)

The following scenes are the final outcome.

Rabbit House

According to the Rabbit House scene made during the prototyping period, the feedback from my supervisor was that the overall picture is too flat and had no three-dimensional effect. I think the main reason for this is that the light is too bright and there are no shadows. So I darkened the overall environment. At the same time only use some additional lights to light part of the scene. To highlight some of the light, I used the Volumetric Light Beam plugin to visualize the light.

The toon shader doesn't support cast shadows besides directional light, otherwise, the toon shader will become pink color when I built it to the VR. Therefore I built another wall and window to block the light to cast shadows from the directional light.

Room 1

I made lighting adjustments and added items based on the scene made during the prototype period. The reason why Rabbit House is so dark is because of a power outage.

In the final outcome, I used another version of the toon shader to make some items look less flat. This can help certain items appear three-dimensional.

Room 2

I designed two different lights in this Room 2 scene to make different atmospheres, which are evening and night. The reason I designed it this way is that in my design settings, the Rabbit House is in the middle of the foggy mountain (In the foggy mountain is always night). So when the player goes further back the scene will become night.

Room 3

The setting for Room 3 is that Rabbit House has power restored. However, if the player destroys the light, Room 3 will go back to dark.

Tea Party

I did a major makeover of this scene, but I used the same color choices as this scene from the original period. I added a lot of smoke because the scene was designed to be set in foggy mountains.

In the final outcome, I didn't do many adjustments, just tweaking the size of the items.

Alice Room

In Alice's room, I changed the floor, wallpaper, and added some items that should appear in a little girl's room, such as a hanging chair. The room looks more girly after these changes. At the same time, I added some related items that appeared in the Wonderland scene, such as Hatter's hat, rabbit doll, and caterpillar. This helped make the real world a little bit more relevant to Wonderland.

Based on the feedback from the Usability Test, I created the scenery outside the window, so that the player can find that they are back in the real world.

UI Design

Since VR is an immersive experience, I didn't intend to create a very windowed UI in this world. In its place is a diegetic UI design. Then the immersion in this project will be even better.

However, I used the window UI for the scene shortcut menu. Because this menu is not part of the story. And this menu should not be used very often by players.

The purpose of doing this shortcut menu is users can directly navigate to the chapter they want to experience. So they don't need to play through the whole story. Because there might be some people already experience the whole story and want to experience a specific chapter. so this menu might help them.

Typography Design

In order to make the header more impressive and appealing, I have to change the typography used. Because the previous font I used (PWFairyTales) is not bold enough so the title "Wonderland" looks weak. Although I like the font, it is not suited to use for the header. Therefore, I changed my typography font to Professor Minty.

Interaction Design

In addition to experiencing the first-person perspective and catching items in the VR world, VR can interact in the VR world through the height of the body and the voice of the player. So I plan to take advantage of these features and incorporate them into my VR projects. Among them, I utilized the player's gestures in the VR world, the player's voice, the height of the player, and the characteristics of the items in my VR Wonderland.

Player's Gestures

Players can hold their hands to punch characters.

Use finger to push the clock hands.

Give the rabbit an OK gesture to proceed with the story.

Voice Interaction

Player voice input to wake Mr. Caterpillar up.

Player Height

Crouch down and move forward, otherwise the player will be stuck in the room.

Characteristics of Items

Simulates how we drink water in the real world.

Visual Impact

There are 3 main scenes in Wonderland, which are The Flowers, Tea Party, and Rabbit House. All scenes should have different and impressive visual effects so that the player can feel the difference and have an impression of these scenes.

The Flowers

In The Flowers, I asked the player to grow the singing flowers to feel the difference in the scene. However, according to the usability test results, all 100% of testers could not feel the effect of flower growth, so I improved the growth speed of flowers. Therefore, I adjusted the speed of growth so that the player can detect this strong zooming effect.

Tea Party

In Tea Party, I grow and shrink the items' size on the table, in order to make players feel that the size of the scene is unstable. However, 40% of users felt no difference when they returned to normal. So I also grow and shrink the objects' size in the environment, such as trees, road signs, street lights, mushrooms, etc. This will make it easier for players to notice that the size of items in this scene is unstable.

Rabbit House

In Rabbit House the player will go through 3 different rooms. The first 2 rooms are for the player to get used to the size of the room and it won't affect their movement. And in the third room, they will experience that the room is really changing from big to small. Therefore, they have to crouch down to move forward. The purpose of doing this is to make them feel different. After the Usability Test, all users said they felt the difference.

Character Animation

The animations of characters are all self-animated because I can't use Maximo's animations due to the proportions of some characters. Although self-animated character animations can appear blunt and strange in some motion animations. But during the User Acceptance Test, I asked the users for their feedback, and 100% of the users said that they did not pay attention to the animation of the characters, because they are more willing to spend time exploring the world of VR.

Character Design & Modeling

In this Wonderland, I adopted the rabbit, caterpillar, and mad hatter from Alice in Wonderland. To make the story more interesting, I added a little girl in the Woods scene. The original character of this little girl is Little Red Riding Hood. During the Usability Test, 100% of the users did not find it strange that Red Riding Hood appeared in the story, even though they were from different authors.

Caterpillar

Hatter

LittleRedRidingHood

Rabbit

Character Voiceover

According to my lecturer's feedback, the voices of some characters sound very AI. So after my thinking, I decided to buy a character's voice acting on Fiverr first, which is Little Red Riding Hood's voice. Because I have a budget for this project. The voices of the other characters are not going to be replaced until after the User Acceptance Test. Even with the replacement, I'll keep some of the characters' voices created using Microsoft Azure's Text-To-Speech.

Script Writing

Scripts are categorized by scene. And in order to know more clearly what script should happen when, I split them by interaction. This will help me to quickly use Microsoft Azure's text-to-speech to make voiceovers.

Video Walkthrough

This video walkthrough was completed before February 15th.