How to add interactive function to STYLY with PlayMaker

This time, I explain how to implement an interactive function with PlayMaker to rotate and shake an object by touching it with the controller, and how to upload it to STYLY.

Preparations

This time, as an exercise, we create a simple animation of rotating Cube on the Y-axis when it’s touched with the controller.

GIF – Rotating Cube

View the sample asset by WebEditor

View the sample asset by WebEditorLaunch the WebEditor

※If you have your STYLY account, you can view the sample asset created in this article by WebEditor. If you don’t, create a new STYLY account and then press the button above.

You can create a new STYLY account >>
Click here

 

Import Playmaker(a paid asset).
At the time of writing: Playmaker 1.9.0 https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-36

After importing and installing PlayMaker, create a Cube in the Hierarchy window.

Screenshot – create a Cube

This time, we want to rotate the Cube on the Y-axis. Stretch the Cube in the Y direction to make the rotation more visible when the animation is running.
In the Inspector window, set the parameters for the Cube as shown below.

Screenshot – the Inspector window when the Cube is selected.

To detect that the Cube touches another object, add Rigidbody by ‘Add Component’ at the bottom of the Inspector window.

Set the parameters of the Rigidbody as shown below. Check the ‘Is Kinematic’ box.

Screenshot – set Rigidbody

Next, to add a function to the Cube, click ‘PlayMaker > PlayMaker Editor’ with the Cube selected.

Screenshot – Launch PlayMaker

Set the ‘Trigger Enter’ Event

When PlayMaker Editor is opened, right-click on the window and select ‘Add Transition’.

Screenshot – Add Transition

Now, add an event to rotate the Cube at first.

Right-click and select ‘Add State’ and rename the state ‘Rotating’.
Next, right-click ‘Rotating’ and select ‘Add Global Transition > System Events > TRIGGER ENTER’.

This ‘TRIGGER ENTER’ detects the collision with something and triggers the next event.

Screenshot – Add ‘TRIGGER ENTER’.

In this tutorial, we make an animation to rotate a Cube on the Y axis when the controller touches the Cube.

So, in the Action window, add the ‘Rotate’ action with the ‘Rotate’ state selected.

Screenshot – add the ‘Rotate’ action.

Set the Rotate action as shown below.
Click the two-line icon next to the ‘Y Angle’ field to enable the direct number input, and enter the speed of the rotation. Set it to 45 this time.

Screenshot – Set the ‘Rotate’ action.

It finishes the setting for the animation of rotating a Cube.

But, in the current state, the collision with ANY object triggers the rotation.
This time, we rotate the Cube only when the controller touched it, so we set up the controller accordingly in the next chapter.

The setting for the controller

With the ‘State1’ state selected, add the ‘Find Game Object’ action in the Action window.

Now, enter ‘Controller (right)’ in the Object Name field.
※There is a space between ‘Controller’ and ‘(right)’. Note that it requires the 100% precise spelling to detect the controller.

For the ‘Store’ field, select ‘New Variable’ and enter ‘controller’.
We use this ‘controller’ variable next.

Screenshot – Set ‘Find GameObject’.

Add the ‘Trigger Event’ action.

For the ‘Game Object’ field, select ‘Specify Game Object’ and then select ‘controller’, the variable created earlier.

Set ‘Send Event’ to ‘TRIGGER ENTER’.

Screenshot – Set ‘Trigger Event’.

That’s all for the setting of the controller.
When the controller touches the Cube, State1 detects ‘TRIGGER ENTER’ and triggers the ‘Rotating’ animation set in the previous chapter.

All settings for state1

 

Upload to STYLY and place the asset

Download and import UnityPlugin from the download site of STYLY.

※Plese see the download site to learn about the initial setting for UnityPlugin.

DOWNLOAD

You need to convert the created Cube into a prefab when you upload it to STYLY.

Drag the Cube in the Hierarchy window onto the Project window to convert into a prefab.

Convert into Prefab

Right-click the prefab to upload and select ‘STYLY > Upload prefab or scene to STYLY’.
After a while, the ‘Upload succeeded’ window pops up.

Screenshot – upload Prefab

 

The ‘Upload succeeded’ window

Open STYLY Editor on a web browser and click the ‘Select Asset’ icon and select ‘3D Model > My Models’ to display the asset uploaded.

Screenshot – Web Editor

Clcik it to place in the Scene.

GIF –  Rotating Cube

Now you can see the cube starts rotating on the Y-axis as soon as the controller touched it.
It’s completed now.

If you have a VR environment, you can taste this interactive function from the gallery shown below.
http://gallery.styly.cc/Hitori/f6620cda-bd73-11e8-b34d-4783bb2170d0

By the way, you can implement the function shown below by changing the action of the ‘Rotating’ state.

Screenshot – Random value generator

GIF – Random movement

You can view it from the gallery:
http://gallery.styly.cc/Hitori/da16b9db-b7db-11e8-b34d-4783bb2170d0

Screenshot – The setting for a gigantic cube

GIF – Gigantic Cube

You can view it from the gallery:
http://gallery.styly.cc/Hitori/3db790ff-bd58-11e8-b34d-4783bb2170d0

It finishes the introduction of how to implement a function with PlayMaker to rotate and shake an object when it’s touched with the controller and upload its asset to STYLY.

Please try it by yourself! If you can interact with VR space by using the controller, your expression would be enriched more.

 

 

(Appendix) The setting for the case the controller cannot be detected

※ This chapter shows how to solve a well-known problem. Skip this if you didn’t find any problems with the implementation.

The implementation created in this tutorial is difficult to find problems until you upload it to STYLY.

The reason is as follows.

Since STYLY has a ‘controller’ object built in by default, it detects the controller when the asset is uploaded as long as the setting has been done correctly. On the other hand, Unity doesn’t have any ‘controller’ object, so the controller cannot be detected when you are working on Unity. Therefore,

  • Did it really detect the controller?
  • Is the ‘Rotating’ action triggered properly when it’s touched with the controller?

Those conditions are difficult to test on Unity.
So, make it easier to find whether the controller is detected in the first place by adding the setting for the case that the controller is not detected.

With the Cube selected, create a new state on the PlayMaker Editor, and then add the ‘Rotate’ action to it.
The action when the Cube touched the controller is the rotation on the Y-axis at 45deg/s, so set up this new ‘Rotate’ action so that the Cube rotates on the X-axis at 90deg/s when the state doesn’t detect the controller.

Screenshot – Set the ‘Rotate’ action

Right-click the ‘State1’ state and select ‘Add Transition > FINISHED’.

Screenshot – Add the FINISHED event

Next, add the ‘Game Object Is Null’ Action to the ‘State1’ state.

This action sets up the event when State1 cannot detect the object specified in the ‘Find Game Object’ field (This time, it’s the controller you use).

Set ‘Find Game Object’ as shown below.

Screenshot – the setting for ‘GameObject Is Null’

Then, connect the ‘State1’ state to the ‘State2’ state.
It makes the Cube rotate on the X-axis at 90deg/s when the controller is not detected.

Rotation on the X axis