VR Aladdin’s Magic Carpet App

Design For Another Solar System

Introduction

Our team was tasked with creating an impossible environment using virtual reality. The name of our final prototype is “Aladdin in Space”. The VR environment we created places the user in ‘space’ on top of a magic carpet and surrounded by planets:

Demo video for ‘Aladdin in Space’

The user is able to look at each planet and select them, then they will be pulled into the planet. Once the user is in the planet, planet specific music will be played and text will greet the user. The user will also be surrounded by an 360 degree image that correlates with the theme of the planet. Currently the game has 5 planets that the user can travel to. We have planet Earth, planet Saturn, planet America, planet Hoth, and a moon world. Each planet has specific text, textures and sounds.A-Frame (virtual reality framework)A-Frame is an open-source web framework for building virtual reality (VR) experiences. It is maintained by developers…www.google.com

We used “A-Frame” to build our environment which is a web framework that is used to build VR environments. Our group members collaborated using Glitch, which is a code sharing website. Our goal for this project was to create an environment that would work best using VR and that would allow the user to explore a place that they normally would not be able to and we believe we achieved this goal.

Design Process

Our design process began with first familiarizing ourselves with A-Frame. We wanted to understand the basics of what we could and could not do, and how large of a scope we would be able to achieve in the amount of time we had. To do this, we looked at the example projects on A-Frame and video tutorials of basics (visuals, audio, interaction, etc.).

Image for post
https://www.skinit.com/aladdin-and-jasmine-magic-carpet-wii-remote-controller-skin

After we individually explored the possibilities of A-Frame, we reconvened and began to brainstorm possible 3D places that we could create. We started by deciding what was possible visually and concluded that creating an environment in space would be feasible and creative. We eventually landed on the idea of doing an Aladdin magic carpet ride through space. Our design goal was to create an immersive magic carpet ride where you could interact with aliens and other flying objects you encounter. Some of the challenges we identified were that space has no sound and that space is very large so there needed to be some way to structure the exploration. Our solutions to these problems were to add sounds and dialogue to space and aliens to make the experience more immersive. To solve the structure problem we wanted to implement rails movement, which we discovered in our research phase, to allow freedom to choose where you want to go, but restrict your movement to predefined paths.

Mood Board

The next step was to determine what elements would make our design an immersive 3D environment. For the visuals, we wanted it to feel like you were traveling through the Milky Way Galaxy and give the ability to visit different planets and moons. For audio, the user could listen to music as they coast through space, and talk with aliens as you move from planet to planet. The interactions we wanted to add were the ability to select which planets to visit next and to control the speed of the magic carpet.

Image for post

Prototyping/Ideation

We decided that Aladdin’s magic carpet ride through space would be a good choice for a virtually reality game because it provides an opportunity for exploration that one could never experience in real life (at least not any time soon). We began our ideation process by deciding what we wanted our application to achieve. We made a list of what we wanted to create and how we would make it immersive:

Image for post
Image for post

Then, following these ideas, we referenced multiple articles on good VR design practices to move forward with our implementation. Considering the amount of movement and immersion that we wanted the users to experience, we had to take precautions to avoid inducing motion sickness or disorientation. For example, following the advice from UX + VR: 14 Guidelines for Creating Great First Experiences, we allowed the user to have some sort of control over their movements by implementing the black circle that indicates direction and the clicking of planets to choose the path of motion; also, we limited acceleration by setting a constant animation speed at which the spacial scene/planets moved.

Image for post
Directional Indicator: Black Circle

We utilized the magic carpet to complete the imperative Role of the Ground. Without our magic carpet, the user may feel lost in space or disoriented. The reason for this potential disorientation has been described well by James J. Gibson, 2015, p. 19, who explained: “When a pilot is in the clouds there is nothing to see outside the plane, and it can be very disorienting. When the pilot comes out of the clouds and sees the ground and sky meeting at the horizon, the pilot can orient.”

One other strategy that we implemented to achieve immersion is the use of haptics in the form of rotating planets, floating characters, and sounds that change based on position/planet location. These features are meant to give the user a sense of live action occurring around them and keep them engaged with the virtual environment.

Image for post
Effect of Haptics

As we put all of our ideas into motion, we faced a few challenges dealing with aframe for the first time. We had to change from version 0.8.0 to version 1.0.4 in order to utilize 3D model features. However, currently, the changing of versions seems to have stopped our planets from rotating as they used to. Furthermore, our attempts at utilizing the gltf-models (which are still being designed in an open project) for our 3D characters proved to be glitchy. We instead decided to use OBJ-models.

Image for post
Aladdin Genie OBJ Model

We also faced an issue with directing the path of the user in space. We eventually addressed this challenge by creating a camera rig, which acted as a kind of rail-road track for our magic carpet ride. We then made the magic carpet entity a child node of the camera rig in order to have it move along the ride dynamically, wherever the user wishes to go.

After completing all of these implementations through prototyping, we created the VR application shown in the user-video linked above(Or click HERE). Then, we rolled out our application for a demo with our classmates to get feedback on our user experience.

Redesign

Through feedback from our peers, we were able to isolate a few aspects of our project that we would re-design and add too if given more time to work on this project. The first being a revamp of the interior planet images. When you fly inside of one of the planets, there is an image painted to the inside of the planet that acts as your scenery. These images were very blurry and did not give a very immersive feel while exploring the inside of one of the planets. In order to accommodate this, we either need to use higher resolution images or we need to find textures images that are meant to act as textures for a-frame objects. In addition to this, it may be beneficial to increase the size of the planets. While on the inside of the planets it gives a little bit of a claustrophobic feel which also does not allow for much room to add interaction.

Image for post

This brings us to the second aspect we would like to redesign. We wanted to add more interaction to the inside of the planets.

Image for post

Most of the interiors had a sign saying “Welcome to this planet” and maybe an object that was just floating there. During all of this, there would be music playing. This felt semi-immersive, but there was not a lot to do while inside of the planet. So to change this we wanted to add more objects to the inside of the planet. These objects could be people that you could exchange a dialogue or maybe an object that you could grab and interact with. Interactions such as the one below would help to provide more sustenance to the planet.

To go along with these interactions, we could create a sort of DIY story. Similar to “Black Mirror — Bandersnatch” for those of you who are familiar with that.

Image for post

This is obviously something that would be much more time-intensive, so we would start small by creating a small story inside of the planets that we have and then ideally expand to a larger and larger solar system to create a much longer storyline. While implementing some of these changes, we would still work to keep some of the aspects that we implemented. Some of these being the feel of being in space and the sounds implemented. We received positive feedback on the space aspect as it provides very good visuals for a VR experience. In addition to this, if you are wearing headphones, the sounds playing would appear louder in one ear since the sound was coming from a certain direction. This further added immersion to the demo as it mimics real life where when you hear music in real life you can determine a direction that it is coming from.

Conclusion

Overall, our group is proud of our final product. If given more time we would have implemented some of the redesigns discussed in the last section. Another addition would be to make our prototype be fully immersive in VR. As of right now, in order to enter and exit planets the user must interact with the game by clicking. When using VR users do no have the ability to click unless they are using a keyboard or controllers. We experimented with the idea of having users select options, whether it be selecting planets or selecting dialogue responses, by focusing their view on their choice for an extended time period. This along with other changes could be made in order to better our prototype.