Interaction SDK Manual

The Interaction SDK from STYLY makes it easy to create interactive VR content. A Unity editor simulator is also provided, so you can build your gimmick in Unity using the Interaction SDK and simulate it in game view. In addition, a local preview tool allows you to debug your game locally without having to go through the process of deploying your assets in STYLY Studio and delivering them.

Furthermore, the combination of the Interaction SDK and PlayMaker allows you to pursue further expression.

What is Interaction SDK?

 

The Interaction SDK is a Unity scripting component that compiles interactive actions that can be used in STYLY.

Features you can use in STYLY using the Interaction SDK

  • Basic Interaction Functions
    • It can drag objects.
    • Moving Objects
    • Detecting object intrusions and collisions
    • Destroying Objects
    • Generate Objects
    • Timer
  • Support for STYLY proprietary specifications
    • You can equip the controller with objects.
      • With the controller equipped with an object, you can press the trigger button to cause an event.

note

The Interaction SDK isn’t supported with AR scene, only supported with VR scene.

To implement interactions in AR scene, use just PlayMaker.

Compatibility with Unity’s EventSystem

  • STYLY controller controls are compatible with the Event system
    • Mouse cursor = Ray from controller
    • Left Mouse Button = Trigger/Pad Push
    • Mouse right button = controller menu button
  • uGUI is now available (World Space only)
  • Detailed event detection with the EventTrigger component
  • What can be called by UnityEvent
    • Public method
    • Calling the Public method with arguments
    • Calling Public Method with Dynamic Arguments

Sample scene using the Interaction SDK

 

You can download the Unity sample project for the above sample scene below.
*The assets included in the sample projects can be used freely without credit or permission.

STYLY-InteractionSDKExamples

Download the Unity sample project and try it out.

Unity sample project

Unity sample project

List of scripts to be provided

Script name 

Description

STYLY_Attr_ColliderTrigger

Execute the OnTrigger event

STYLY_Attr_Collision

Execute an OnCollision event

STYLY_Attr_Breaker

Destroy the object to which the STYLY_Attr_Breakable component was added

STYLY_Attr_Breakable

Destroyed by the object to which the STYLY_Attr_Breaker component has been added

STYLY_Action_DestroyTarget

Destroy the specified GameObjects

STYLY_Attr_Draggable

You’ll be able to grab objects with your pointer

STYLY_Attr_Equipment

Equipping the Controller with Objects

STYLY_Action_Mover

Moving Objects

STYLY_Action_Spawner

Generating Objects from Prefabs

STYLY_Action_Timer

The event is executed after the timer ends.

How to use the Interaction SDK

How to download the Interaction SDK

Go to the Download page and click on STYLY Plugin for Unity DOWNLOAD to download the STYLY Plugin. The Interaction SDK is included in the STYLY Plugin.

STYLY Plugin for Unity DOWNLOAD

How to import the Interaction SDK into Unity

Click on Assets > Import Package > Custom Package… in the top left menu.

"Assets

Select the STYLY Plugin.

Open the STYLYPlugin

Open the STYLYPlugin

Click Import

Click Import

Click Import

Let’s create a gimmick using the Interaction SDK and test it in the Unity Editor Simulator!

Allowing objects to be grabbed by the pointer

Right-click on the hierarchy and click on 3D Object > Cube.

Placing a Cube in the Hierarchy

Placing a Cube in the Hierarchy

With Cube selected on the hierarchy, click Add Component in the Inspector window (hereafter referred to as Inspector).

Type STYLY into the search form to see a list of scripts in the Interaction SDK, select STYLY_Attr_Draggable.

Add STYLY_Attr_Draggable

Add STYLY_Attr_Draggable

Press the play button in Unity to put it in play mode. Now drag the Cube into the game view.

Game View

Game View

If the asset to which the Interaction SDK component has been added into the hierarchy, the STYLY_Simulator is automatically placed in the hierarchy during playback and the simulator can be run in game view.

 When playing, the STYLY_Simulator is placed in the hierarchy

When playing, the STYLY_Simulator is placed in the hierarchy

STYLY_Attr_ColliderTrigger

STYLY_Attr_ColliderTrigger is a script that “executes the OnTrigger event”.

 Deactivate your own object when another object invades your own object.

Deactivate your own object when another object invades your own object.

STYLY_Attr_ColliderTrigger Event Table

Event Name Event Details
On Enter() Performed when another object enters your object.
ON Exit() Performed when another object escapes from its own object.

Conditions for triggering the OnTrigger event

  • For the object that executes the event, set the following
    • Check the Coillder’s Is Trigger
    • Add a Rigidbody component
      • If you don’t want to generate gravity, check the Is Kinematic box.

If you want to learn more about the TRIGGER EVENT, please see the following article.

Let’s see how it works by creating a gimmick that deactivates your object when another object invades your object.

Right-click on the hierarchy and click on 3D Object > Cube and rename the Cube to ColliderTrigger.

Place the Cube in the hierarchy and change its name to ColliderTrigger

Place the Cube in the hierarchy and change its name to ColliderTrigger

Add the STYLY_Attr_ColliderTrigger component to the inspector of the object “ColliderTrigger” which you want to execute the OnTrigger event.

Add the following components to the ColliderTrigger inspector.

  • Add the STYLY_Attr_Collider Trigger
  • Check Is Trigger in Collider
  • Add a Rigidbody component
    • Check Is Kinematic if you want to disable gravity.
Collider Trigger Inspector

Collider Trigger Inspector

Click “+” in the lower right corner of the STYLY_Attr_Collider Trigger component.

Click the "+" button.

Click the “+” button.

Drag and drop ColliderTrigger from the hierarchy to the None (Object) form.

Drag and drop ColliderTrigger from the hierarchy into the None (Object) form

Drag and drop ColliderTrigger from the hierarchy into the None (Object) form

Function is now active and ready to use.

Function is now active.

Function is now active.

Select No Function > GameObject >SetActive(bool).

Sets SetActive(bool) to the function.

Sets SetActive(bool) to the function.

SetActive function has been set to GameObject. A square checkbox appears at the bottom of the function. Remove the checkbox (the checkbox is not included by default).

About the GameObject.SetActive checkbox

  • When checked, the object becomes active
  • Unchecked, the object becomes inactive
Unchecked, the object becomes inactive

Unchecked, the object becomes inactive

Let’s place the object to invade (Cube etc.) in the scene, set it to play mode, move the object to invade, and check if ColliderTrigger becomes inactive or not.

If you move a Cube into ColliderTrigger, ColliderTrigger becomes inactive

If you move a Cube into ColliderTrigger, ColliderTrigger becomes inactive

STYLY_Attr_Collision

STYLY_Attr_Collision is the “Run OnCollision events” script.

STYLY_Attr_Collision event table

Event Name Event Details
On Collision Enter Event() Runs when another object collides with your object.
On Collision Exit Event() Runs when another object escapes from its own object.

Conditions for triggering the OnCollision event

For the object that executes the event, set the following

  • Add a Rigidbody component
    • Uncheck Use Gravity if you don’t want to generate gravity.
    • Uncheck Is Kinematic.
  • Add a Collider component
  • Collider component Is Trigger is unchecked.

If you want to learn more about the Collision EVENT, please see the following article.

Let’s see how it works by creating a gimmick that deactivates your object when another object collides with your own.

Right-click on the hierarchy and click on 3D Object > Cube and rename the Cube to Collision.

 Place the Cube in the hierarchy and rename it to Collision

Place the Cube in the hierarchy and rename it to Collision

Add the following components to the inspector of the object where you want to run the event

  • Add STYLY_Attr_Collision(Script)
  • Uncheck Is Trigger in Collider.
  • Add a Rigidbody component
    • Uncheck Use Gravity if you want to disable gravity.
Collision's Inspector

Collision’s Inspector

Click “+” in the lower right corner of the STYLY_Attr_Collision component.

Click the "+" button.

Click the “+” button.

Drag and drop Collision from the hierarchy into the None (Object) form.

Drag and drop Collision from the hierarchy into the None (Object) form.

Drag and drop Collision from the hierarchy into the None (Object) form.

Function is now active and ready to use.

Function is now active.

Function is now active.

Select No Function > GameObject >SetActive(bool).

Sets SetActive(bool) to the function.

Sets SetActive(bool) to the function.

SetActive function has been set to GameObject. A square checkbox appears at the bottom of the function. Remove the checkbox (the checkbox is not included by default).

About the GameObject.SetActive checkbox

  • When checked, the object becomes active
  • Unchecked, the object becomes inactive
Unchecked, the object becomes inactive

Unchecked, the object becomes inactive

Let’s place the object to be infiltrated (e.g. Cube) in the scene, set it to play mode, move the object to be infiltrated, and see if Collision becomes inactive.

 Collision becomes inactive when a Cube is placed in Collision

Collision becomes inactive when a Cube is placed in Collision

STYLY_Attr_Breaker / STYLY_Attr_Breakable

STYLY_Attr_Breaker is a script that “destroys the object to which the STYLY_Attr_Breakable component is added”.

STYLY_Attr_Breakable is a script that is “destroyed by the object to which the STYLY_Attr_Breaker component is added”.

STYLY_Attr_Breaker event table

Event Name Event Details
OnDestroy() The event is fired when the OnDestroy() object is destroyed.

STYLY_Attr_Breakable event table

Event Name Event Details
OnDestroy() The event is executed when the OnDestroy() object is destroyed.

STYLY_Attr_Breaker destroys the object to which the STYLY_Attr_Breakable component was added, requiring elements of the OnCollision or OnTrigger event.

Conditions for firing the OnCollision event

For the object that executes the event, set the following

  • Add a Rigidbody component
    • Uncheck Use Gravity if you don’t want to generate gravity.
    • Uncheck Is Kinematic.
  • Add a Collider component
  • Collider component Is Trigger is unchecked.

If you want to learn more about the Collision EVENT, please see the following article.

Conditions for triggering OnTrigger events

  • For the object that executes the event, set the following
    • Check the Coillder’s Is Trigger
    • Add a Rigidbody component
      • If you don’t want to generate gravity, check the Is Kinematic box.

If you want to learn more about TRIGGER EVENT, please see the following article.

Breaker and Breakable settings. First, let me explain the settings of the Breakable.

Change the name of the cube to Breakable.

Place the Cube in the hierarchy and change its name to Breakable

Place the Cube in the hierarchy and change its name to Breakable

Place the Cube in the hierarchy and change its name to Breakable

 

With the hierarchy Breakable selected, add the Rigidbody and STYLY_Attr_Breakable components to the inspector.

In order to create the conditions for the OnCollision event to occur, the components must be set as follows

  • Collider component
    • Is Trigger No check
  • Rigidbody Components
    • Uncheck Use Gravity if you don’t want to generate gravity.
    • Uncheck Is Kinematic
Breakable's Inspector

Breakable’s Inspector

Next, let’s take a look at how to set up the Breaker. Rename the Cube to Breaker.

 Place the Cube in the hierarchy and change its name to Breaker.

Place the Cube in the hierarchy and change its name to Breaker.

With the Breaker in the hierarchy selected, add the STYLY_Attr_Breaker component in the Inspector.

The Breaker inspector

The Breaker inspector

Next, add a Rigidbody component to the Breaker and check the Use Gravity box.

 Add the Rigidbody component to the Breaker

Add the Rigidbody component to the Breaker

 

Place the Breaker object directly above the Breakable object. Put the Breaker object in playback mode and let it collide with the Breakable object in the scene view. The Breakable object will be removed from the hierarchy.

The Breaker object collides with the Breakable object and the Breakable object disappears.

The Breaker object collides with the Breakable object and the Breakable object disappears.

STYLY_Attr_Draggable

STYLY_Attr_Draggable is a script that “allows you to grab objects with a pointer”.

 I can grab objects with a draggable.

I can grab objects with a draggable.

STYLY_Attr_Draggable event table

Event Name Event Details
On Begin Dragging() Event is executed when the object is drucked
On End Dragging() Events are executed when the object is undragged.

Add the STYLY_Attr_Draggable component to the object you want to grab with the pointer.

The inspector of the object you want to drag.

The inspector of the object you want to drag.

With the game in play mode, left-click on the object to which the STYLY_Attr_Draggable component was added in the game view and grab it.

STYLY_Attr_Equipment

STYLY_Attr_Equipment is a “You can equip the controller” script. You can also equip a controller and then press the decision button (trigger) to execute an event.

You can equip a controller with an object.

You can equip a controller with an object.

STYLY_Attr_Equipment Event Table

Event Name Event Details
On Use() Execute an event when the decision button (trigger) is pressed while the controller is equipped.
On Use End() Execute the event after releasing the decision button (trigger) with the controller equipped.
On Equip() Execute the event after equipping the controller
On Drop() Execute an event after removing the equipment from the controller

Place the Cube in the hierarchy

Object name Transform X Y Z
Equipment(Cube)  Position 2 0.05 -2.5
Scale 0.5 0.5  
 Place the Cube in the Hielarchy  and change its name to Equipment.

Place the Cube in the Hielarchy and change its name to Equipment.

Add the STYLY_Attr_Equipment component to Equipment.

Inspector of Equipment

Inspector of Equipment

Switch to play mode. Right-click on the Equipment object in the game view to equip it. Once equipped, you can move the Equipment object. Left click to detach the Equipment object from the controller.

 

STYLY_Action_Spawner / STYLY_Action_Mover / STYLY_Action_Timer

Let’s combine these three scripts to create the following gimmick.

When you click on a Cube, the Sphere is created (STYLY_Action_Spawner), when a specific time is up (STYLY_Action_Timer), the Sphere is moved to a specific position (STYLY_Action_Mover).

 Click on the Cube to create the Sphere, and after a specific time, the Sphere will move to a specific position

Click on the Cube to create the Sphere, and after a specific time, the Sphere will move to a specific position

Right-click on the hierarchy, click 3D Object > Cube to place the Cube and rename the Cube to ActionSampleCube.

Place the Cube in the hierarchy and rename it to ActionSampleCube

Place the Cube in the hierarchy and rename it to ActionSampleCube

Add Button component and STYLY_Action_Spanwner to the ActionSampleCube object.

Inspector of ActionSampleCube

Inspector of ActionSampleCube

STYLY_Action_Spawner is a script that “generates objects from prefabs”; if you use the STYLY_Action_Spawner component, you will need to call it from another event.

STYLY_Action_Spawner Parameter Table

Parameter Name Parameter Description
Prefab the prefab of the object to be generated
SpawnPosition The relative position for creating the object
SpawnTransform Relative Transform which creates an object
Velocity Object Velocity

Drag and drop the ActionSampleCube object from the hierarchy to the On Click() Runtime Only form below the Button component.

The inspector of ActionSampleCube

The inspector of ActionSampleCube

Select STYLY_Action_Spawner > Spawn() from No Function and skip the event to the STYLY_Action_Spawner component.

The inspector of ActionSampleCube

The inspector of ActionSampleCube

Next, create an object to be generated by STYLY_Action_Spawner. Place the Sphere in the hierarchy and deactivate it; drag and drop the Sphere into STYLY_Action_Spawner to create a STYLY_Action_Spawner (parent) – Sphere (child) relationship.

Place Sphere in the hierarchy to deactivate it

Place Sphere in the hierarchy to deactivate it

To set the position to be generated, in the hierarchy, create an object in CreateEmpty, rename it SpawnPosition, and set Position(X,Y,Z)=(0,2,0). Drag and drop it into Spawner and make it STYLY_Action_Spawner (parent) – SpawnPosition (child).

 Place CreateEmpty in the hierarchy and rename it to SpawnPosition

Place CreateEmpty in the hierarchy and rename it to SpawnPosition

Select the ActionSampleCube object in the hierarchy and set it in the STYLY_Action_Spawner component.

  • Prefab:Drag and drop the Sphere in the hierarchy
  • Spawn Transform:Drag and drop the SpawnPosition in the hierarchy.
Inspector of ActionSampleCube

Inspector of ActionSampleCube

Add a rigidbody to Sphere.

Inspector of Sphere

Inspector of Sphere

Let’s set the game to playback mode. If you click on the Cube in the game view, the Sphere is generated at the position of the SpawnPosition object.

If you click on the Cube, the Sphere is created at the position of the SpawnPosition object

If you click on the Cube, the Sphere is created at the position of the SpawnPosition object

Add the STYLY_Action_Timer and STYLY_Action_Mover components to Sphere.

Inspector of Sphere

Inspector of Sphere

STYLY_Action_Timer is a script that executes an event after the timer has expired.。

STYLY_Action_Timer Parameter Table

Parameter name

Parameter Description

StartOnAwake

Checked: Start the timer at the start of execution

TimerType

Constant: A constant value.

RandomInRange: value specified by min-max

Time

Timer Ignition Time

Min_Time

Random time minimum

Max_Time

Random time maximum

STYLY_Action_Timer Event Table

Event Name

Event Details

On Expire Event()

Events to be executed after the completion of the timer

STYLY_Action_Mover is a “move object” script; if you use the STYLY_Action_Mover component, you will need to call it from another event.

STYLY_Action_Mover Parameter Table

Parameter name

Parameter Description

Destination

Transform of destination

Time

travel time

STYLY_Action_Mover Event Table

Event Name

Event Details

On Complete()

Events to be executed after the completion of the move

Set the STYLY_Action_Timer component to the following settings

  • Start On Awake:check the box
  • Timer Type:Constant
  • Time:0.1
  • On Expire Event():Drop and drop Sphere from the hierarchy.
    • ファンクション:STYLY_Action_Mover > Mover()
Sphere Inspector

Sphere Inspector

Place the move target to be set in STYLY_Action_Mover. In the hierarchy, create an object in CreateEmpty and rename it to MoveTargetPosition, with Position(X,Y,Z)=(-3,3,0).

Place CreateEmpty in the hierarchy and change its name to MoveTargetPosition

Place CreateEmpty in the hierarchy and change its name to MoveTargetPosition

Select Sphere from the hierarchy and set the STYLY_Action_Mover component to the following settings

  • Target:Drag and drop the MoveTargetPosition object in the hierarchy.
  • Time:3
Sphere Inspector

Sphere Inspector

Press the play button and click on the Cube on the game view screen to see how it works.

 
Success Stories

Success Stories

How PlayMaker works with the Interaction SDK

Here’s how the Interaction SDK works with PlayMaker.

Advance Preparation

If you don’t have PlayMaker, please install it in advance.

If you are new to PlayMaker, please read the following articles in advance to learn more about it.

How to skip the Interaction SDK events to PlayMaker

Let’s use the STYLY_Action_Timer as an example to illustrate the “send the event to PlayMaker in a few seconds” gimmick.

Receiving an event from the STYLY_Action_Timer in PlayMaker

Receiving an event from the STYLY_Action_Timer in PlayMaker

Change the name of the Cube to PlayMakerSendEvent by right-clicking on the hierarchy and clicking 3D Object > Cube to place the Cube.

Cube in the hierarchy and rename it to PlayMakerSendEvent

Cube in the hierarchy and rename it to PlayMakerSendEvent

 

Add the STYLY_Action_Timer component and PlayMakerFSM from the Inspector to the PlayMakerSendEvent object.

 The Inspector of PlayMakerSendEvent

The Inspector of PlayMakerSendEvent

 

Drag and drop the PlayMakerSendEvent object into the STYLY_Action_Timer component’s On Expire Event().

The Inspector of PlayMakerSendEvent

The Inspector of PlayMakerSendEvent

 

When an object to which PlayMakerFSM has been added to an event, a PlayMakerFSM faction can be selected for the function.

 The Inspector of PlayMakerSendEvent

The Inspector of PlayMakerSendEvent

Select the function PlayMakerFSM > SendEvent(String).

The Inspector of PlayMakerSendEvent

The Inspector of PlayMakerSendEvent

In the SendEvent(String) form, define the event you want to skip. In this case, I have entered “PlayMakerSendEvent”.

Inspector of PlayMakerSendEvent

Inspector of PlayMakerSendEvent

Open the PlayMaker Editor and add a new State2 by Ctrl + left click (Windows) / Command + left click (macOS) Add Rotate from the Action Browser to State2 with the following settings

  • GameObject:Use Owner
  • X Angle:90
  • Per Second:check in
  • Every Frame:check in
PlayMakerFSM in the PlayMakerSendEvent object

PlayMakerFSM in the PlayMakerSendEvent object

Select the Events tag in the PlayMaker Editor and add “PlayMakerSendEvent” to Add Event.

 PlayMakerFSM of the PlayMakerSendEvent object

PlayMakerFSM of the PlayMakerSendEvent object

Right-click on State2 and select Add Global Trasition > PlayMakerSendEvent.

The PlayMakerSendEvent object, PlayMakerFSM

The PlayMakerSendEvent object, PlayMakerFSM

The ‘PlayMakerSendEvent’ event is popped in the STYLY_Action_Timer’s On Expire Event(), the ‘PlayMakerSendEvent’ event is received on the PlayMaker side and State2 Rotate is executed.

PlayMakerFSM of the PlayMakerSendEvent object

PlayMakerFSM of the PlayMakerSendEvent object

How to debug

How to use the simulator to check the operation

Once you’ve built your gimmick using STYLY’s Interaction SDK, you can use the Unity editor simulator to check and debug the operation.

In order to use the Unity Editor Simulator, the Hierarchy must contain assets to which the Interaction SDK components have been added. If not, drag and drop the STYLY_Simulator prefab from Assets > STYLY_Plugin > STYLY_InteractionSDK > Simulator > Prefabs in the project window to the hierarchy

How to use Camera Control

キー Operation
W Move forward
S Go backwards
A Go left
D Go right
Q Rise
E Dscent
Game View Unity Editor Simulator

Game View Unity Editor Simulator

How to use Simulate Controller

Operation Description
Left Drag Move your eyes
Left Click The Left Click button is the same as the Trigger Button on the VR device, but the cube has a Draggable effect so you can move the cube by dragging the mouse cursor over it. The Cube has Equipment attached to it, so by hovering the mouse over the Cube, you can hold onto it.
Right Click You can do the same thing as the VR device’s Menu Button, to remove the Equipment attached to the cube.
Game View Unity Editor Simulator

Game View Unity Editor Simulator

Once you’ve used the Unity editor simulator to get a feel for what you intend to do, let’s use the local preview tool to see how it works.。

How to use the local preview tool to test your game

The Local Preview Tool is a tool that allows you to view assets created in Unity without having to upload them to STYLY to launch the STYLY VR APP.

It was previously available in an experimental version, but the official version has now been released. The instructions are the same as in the article below, so please refer to it.

 Check how it works with the local preview tool

Check how it works with the local preview tool

 

How to upload gimmick assets created by creating an Interaction SDK to STYLY

How to upload a prefab from Unity to STYLY

 

How to use the Unity scene uploader