Visuals - Tutorial

In this tutorial we are going to create a basic interaction that will affect a subfraction of the visuals of an object. The upper part of a button model (which is made of two parts) will disappear when user is pressing the index trigger, and reappears when the index trigger is released.

You will find this example already executed in the Project panel under Assets > under SpatialStories > Example Scenes > DemosGettingStartedVR > DemoVisuals.

This tutorial is using the Input condition. To know more about it, check our Input tutorial under the Condition tutorials.
You can also find previous tutorials that uses the Visuals action, such as our tutorials on Gaze, Hand hover, Touch, Input and Delay.

Setting up your scene

  • Set up a scene with a floor and an Interactive Camera. Follow this tutorial if needed.
Image
Image

Notice that (IO) is added next to Cube in the Hierarchy panel

Deactivate Cylinder at Index Trigger Press

We will create an interaction that will hide the cylindrical part of the button when the user is pressing the index trigger.

  • In Hierarchy panel, expand Button (IO), expand Interactions, and duplicate the first Interaction.
    It is advised to always keep an original interaction and duplicate it whenever you want to create a new one.
  • Rename the duplicated 'Interaction (1)' into Deactivate cylinder.
    Using descriptive names for your interactions will make things easier, especially in case of complex experiences.
  • Select 'Deactivate cylinder', and in the Inspector panel under CONDITIONS, check Inputs. Press + button to add the controller’s inputs which we need in our interaction. In the first dropdown menu, select what suits your device. In my case, it is the 'OCULUS_RIFT', since I am using an Oculus. In the second dropdown menu, choose a specific input from the list. For this tutorial, I will use Right Joystick Index Trigger Press. Since I also want my interaction to happen when I press the Left Joystick Index Trigger, I will press the + button and add Left Joystick Index Trigger Press.

By default our interactions happen only once. In order for this interaction to reload, we need to set it up!

  • In the Inspector panel, go to the RELOAD section. Check Reload and change its value from MANUAL_ONLY to INFINITE. See this tutorial to learn more about the Reload feature.

Now let’s create an action so the cylindrical part of the button will disappear when this condition is met.

  • Scroll down the Inspector panel until you reach the ACTIONS. Look for the 'Visuals' in the 'Object' section. In the dropdown menu select DEACTIVATE.
  • Since we do not want all the Button (IO) to deactivate, uncheck 'Alter All Visuals' and in the dropdown menu select Cylindrical Button.
    This means that when the condition is met, the cylindrical part of the button will be deactivated.
WARNING: the activate/deactivate visuals action is activating the Mesh Renderer of the Cube and NOT the Cube GameObject. If you want to deactivate the whole game-object, use the Deactivate/Activate GameObject Custom Action which comes with the basic package.

Reactivate Cylinder at Index Trigger Release

We will create an interaction that will hide the cylindrical part of the button when the user releases the index trigger.

  • In Hierarchy panel, expand Button (IO), expand Interactions, and duplicate the first Interaction. Rename the duplicated 'Interaction (1)' into Activate cylinder.
  • Select 'Activate cylinder', and in the Inspector panel under CONDITIONS, check Inputs. Press + button and in the dropdown menu select what suits your device. Then, in the other dropdown menu on the right, select Right Joystick Index Trigger Release and Left Joystick Index Trigger Release.
  • Go to the RELOAD section . Check Reload and change its value from MANUAL_ONLY to INFINITE.

Now let’s create an action so the cylindrical part of the button will appear when this condition is met.

  • Scroll down the Inspector panel until you reach the ACTIONS. Look for the 'Visuals' in the 'Object' section. In the dropdown menu select ACTIVATE.
  • Since we do not want all the Button (IO) to deactivate, uncheck 'Alter All Visuals' and in the dropdown menu select Cylindrical Button.
    This means that when the condition is met, the cylindrical part of the button will be deactivated.

You just learned how to use Visuals in SpatialStories. Congratulations!