VR Prototyping (beta)

With Proto.io you can now simulate VR experiences within your prototypes, by creating the VR scene you want and adding interactive UI components to respond to gaze (fixation points in VR). These experiences can be previewed through Proto.io prototypes on the web, on a mobile device, or on a VR headset.

Proto.io has a specialized device library for VR. That includes UI components specific to VR, namely VR container, VR rectangle, VR image and VR interaction area.

Screen_Shot_2017-11-08_at_10.59.52_AM.png

Screen_Shot_2017-11-08_at_11.00.09_AM.png

 

VR Container (beta)

You can find 'VR Container (beta)' as a UI component in the VR device library.
You can directly add it to a screen or container. This is a special kind of container that is built for simulating VR experiences and for viewing them through a VR headset.

Screen_Shot_2017-11-08_at_11.25.06_AM.png


Double-clicking on the VR container you just added will open it for editing. There’s a 360-degree image set as background. You can change this from the Inspector to a scene of your own.

Screen_Shot_2017-11-08_at_11.27.11_AM.png

If you preview in Player you will see something like this in full screen (clicking on the little VR goggles icon at the bottom right). You can use your mouse to move in the scene. If you view it in the Proto.io app, then you can move your device to move in the scene. The dotted circle and dot you see in the middle is your gaze (fixation point). You use it for targeting elements in the scene and triggering actions.

360-pattern-preview-gaze.png


You can also place any of the VR components on the container: VR rectangle, VR image and VR interaction area and icons (from the Icons Library) that will be added as VR images. You cannot add non-VR UI components in a VR container and you cannot create transitions.

Note: you can add one VR container on a given screen (that includes the screen and its containers)

You can also watch this tutorial on Creating a basic VR environment using 360-degree images.

 

VR rectangle


A rectangle that can participate in your VR scene and trigger interactions, based on:

  • Gaze Click (triggers when the gaze circle stays on the interactive object for a second; you’ll see a solid circle forming over the dotted)
  • Gaze Enter (triggers when the gaze circle enters the area of the interactive object)
  • Gaze Leave (triggers when the gaze circle leaves the area of the interactive object)

Opacity, visibility, and rotation cannot be changed for these components.

 

VR image


You can insert any image in your VR scene, including GIFs. This will allow you to place objects and make them interactive.
Opacity, visibility, and rotation cannot be changed.

The beacon included in the ‘Walkthrough’ pattern is an example of how images can be used to help you highlight certain points.


VR interaction area


You can set a particular area of your VR scene as interactive and make it respond to Gaze Click, Gaze Enter, and Gaze Leave. This area is invisible when previewed, so you can place it over objects that may be part of your scene.
Opacity, visibility, and rotation cannot be changed.

You can see an example in the ‘Game menu’ pattern, where interaction areas are placed over the buttons.

 

VR Patterns


In the patterns section, you can find 2 commonly used VR patterns: Walkthrough and Game menu. They are VR containers and you can add them directly to your canvas.

 

Walkthrough

One of the most typical use cases in VR is for walking through different VR scenes. In the Walkthrough pattern, you change between two views of a house: outside and inside. When you add it to your project, you’ll see this on your canvas.

Screen_Shot_2017-11-08_at_11.32.54_AM.png


Double-clicking on it to edit will reveal the entire scene (State 1, outside of the house).

Screen_Shot_2017-11-08_at_11.29.08_AM.png


There are 3 yellow help tips, included as VR images. You can delete them.

There is a blue beacon VR image added to the scene, and a VR interaction area over it, which responds to Gaze click and takes you to State 2 (inside the house).

Screen_Shot_2017-11-08_at_11.29.24_AM.png

In State 2, there’s a similar blue beacon VR image that on Gaze click takes you back to State 1.

You can customize this pattern by replacing the scenes, changing the beacon’s image, its position or interaction, or by adding more scenes and elements.

You can also watch this tutorial regarding Creating a VR Walkthrough using the VR Component Library.


Game menu


The Game Menu pattern simulates the popular VR game menu experience, where you interact with a menu and each button enlarges when you gaze over it.

When you add the Game menu VR pattern, you’ll see this on your canvas.

Game-pattern.png

Double-clicking on it to edit will reveal the entire scene (State 1).

Screen_Shot_2017-11-08_at_11.39.31_AM.png


There are 3 buttons (images) placed vertically in the center of the scene to play the role of a menu. Over each button, there is a VR interaction area, that has an interaction that takes you to a different container state, on Gaze Enter.

Game-play-button.png

The new state shows the particular button enlarged. On that state, there is an interaction area over the same button that leads back to the idle menu, on Gaze Leave.

Game-Play-Gaze-Leave.png


There are 4 container states in the Game menu pattern: one for the idle Main Menu scene and one for each of the buttons enlarged.

Container-states.png


You can customize this pattern by replacing the scene, changing the buttons, the interaction area interactions, or by adding more scenes and VR elements.

You can also watch this tutorial regarding Creating a VR Game Menu using the VR Component Library.

Have more questions? Submit a request