How to: Go Further: Interactivity In Virtual Reality

In this tutorial, we are going to use the following scenario: “You are in front of an elevator. When pushing on the button of the elevator, the latter starts. After a few seconds, the doors of the elevator open and you can get in.” Let’s see now how to translate this scenario into Speedernet Sphere:

• There is an elevator which is initially closed and visible but non interactive
• Next to the elevator, a button is available, visible and interactive
• When clicking on this button, the latter changes aspect, from grey (“stop”) to green (“call”)
• Then, a sound representing the start of the elevator goes off
• The doors of the elevator open, it becomes clickable
• And finally, by clicking on the elevator, the user enters the elevator (change of scene)

Main steps

This example is created in two main steps:

1. Add the elements in the scene and define their properties
2. Create interactions with conditionals

Necessary elements

To create this experience, you will need:

• two 360 panoramas
• two images of elevator doors: one with doors closed, one with doors open
• two images of a button: one with the button in grey, one in green
• one sound: an elevator bell

Step 1 – Add the elements into the scene and define their properties

Beforehand, you created and renamed the two scenes of this experience. Go to the first scene and add the elements.

Elevator doors and their properties

1. Insert an image element

Start by adding an image element into the scene:

• Click on the “add element list”
• Click on the image element and drop it onto the scene
• Rename it “doors” in the Elements column. It will make it easier to identify in the list.

2. Define the properties of the elevator doors

In this step, you define the properties of the image element. To do so, click on “Go to the properties of the element”.

Create the aspects of the element

Initial aspect

Rename the initial aspect of the element (the one created by default) to “closed”. Associate an image to this aspect (photo of the doors closed) by clicking on the “add an image” button.

Secondary aspect

• Create a second aspect by clicking on the “+” symbol
• Rename it “open”
• Add an image (doors open)

Configurate the state of the element

In this example, the doors of the elevator are initially visible and non-interactive but they become interactive following certain interactions that we’ll see later.

• Rename the initial state “inactive”
• Then select “Yes” for visibility and “No” for interactivity
• Click on the “+” symbol to create a new state
• By default, newly added states are “visible” and “interactive”. For this example, you don’t need to modify it. You just need to rename the state as “active”
• Close the properties window

Elevator button and its properties

1. Add an image element

Add the image element as described previously for the elevator doors.

2. Define the properties of the elevator button

Click on “Go to the properties of the element” to open the corresponding window.

Create the aspects of the element

The elevator button has two aspects (grey and green). As seen previously, create and rename the two aspects of the button.

Configurate the state of the element

In this example, the element has only one state throughout the experience: “visible” and “interactive”. Remember to give an appropriate name to the state so that it’s easy to find it if necessary. You can then close the properties window.

Elevator sound and its properties

1. Insert a sound element

For the sound effect, add a sound element into the scene in the same way that you did for images.

2. Define the properties of the sound

Open the properties window.

Create the aspects of the sound element

A sound element can have several aspects, just like an image element. Imagine that a car is running but suddenly the driver brakes. So, you first hear a running car and then a braking sound. Therefore, you have a sound element with two aspects (two sounds): “running” and “braking”. You should know that the aspects of an element cannot be played simultaneously. The “running” and “braking” sounds cannot play together. In this example, the sound element only has one aspect.

• Rename the aspect “sound”
• Click on “add a sound” to add the corresponding sound

Configurate the state of the sound element

The state of a sound element is its playback:

• Play
• Play loop
• Pause
• Stop

You can use these states depending on your scenario and interactions. For each state change, a state has to be created. The elevator sound is on state “stop” at the beginning of the experience, then it plays once and stops: “plays once”. You need two states then:

• “stop”: the initial state
• “plays”: the secondary state (the sound plays once)

Step 2 – Create interactions with conditionals

In this final step, add conditionals (conditions and consequences) so that elements interact. Let’s follow the process step by step.

1. Calling the elevator

•  Open the conditionals  window of the elevator button (“button”)
• Add a new conditional by clicking on the “+” symbol
• Define the condition and then the consequences:
  • [If clicks on “button” Then “button” changes aspect and becomes “call”
  • Click on the “+” symbol to define the other consequence: And state of “sound” becomes “plays”]
  • Close the window

2. The elevator doors open

• Open the conditionals window of the sound element
• Add a new conditional by clicking on the “+” symbol
• Define the conditional and the consequences:
  • [If end of playback of sound Then “doors” changes aspect and becomes “open”
  • Click on the “+” symbol to define the other consequence: And state of “doors” becomes “active”]
  • Close the window

3. When clicking, the user enters the elevator

Finally, open the conditionals window for the elevator doors:

• Create a conditional
• Define the condition and the consequence
  • [If clicks on “doors” Then “enter in other scene” (“interior_elevator”)]

You can go even further in using aspects and conditionals so that the user can interact with the elements of the scene or in other scenes of the experience. In the next tutorial, we will show you how an interaction in one scene can create other interactions in another scene.

Now it’s your turn to play with Speedernet Sphere. Leave your comments and questions below!

See you soon on the next tutorial!