This article shows how to trigger an event when the controller collides with an object.
Using collide function, it enables you to cause a variety of interactions, such as changing color, rotating, or changing size of the objects.
Two main types of collisions are; the TRIGGER EVENT and the COLLISION EVENT.
This issue helps you to figure out about COLLISION EVENT.
TRIGGER EVENT is here.
- 1 Advanced preparation
- 2 Overview
- 3 About COLLISION EVENT
- 4 Conditions for using COLLISION EVENTS in STYLY
- 5 Prepare a 3D model
- 6 Granting Collider to the colliding 3D model
- 7 Set up interaction with 3D models in Playmaker
- 8 Create an object for the STYLY controller
- 9 Attaching an object to a STYLY controller
- 9.1 Find game object to find the STYLY controller
- 9.2 Get the spatial coordinates of the controller with Get Position
- 9.3 Set Position sets the object’s position to the position of the STYLY controller
- 9.4 Attach these objects to the STYLY controller with Set Parent
- 9.5 Make the Controller object a child object of the empty GameObject (2021.10.11. added)
- 10 Upload to STYLY
Advanced preparation
First of all, install Playmaker, a plugin for Unity.
For the new users of Playmaker, please read the following articles for the better understanding.
Overview
In Unity, the interaction is triggered by firing an event when the controller and object hit each other.
This is implemented by Playmaker.
There are two types of events that are triggered by an object and a hit.
- TRIGGER EVENT: Events triggered by “Touch”. The interaction is triggered by the overlapping information between the controller and the 3D model.
- COLLISION EVENT: Events Caused by “Collisions”. The interaction is triggered by information about the physical action of the collision detection with the controller.
In this issue, the COLLISION EVENT will be explained.
About COLLISION EVENT
The conditions which a COLLISION event can be triggered are as follows;
- Rigidbody is assigned to the controller, one of the objects, or both.
- Both the controller and the object are given Collider.
- The Is Trigger of the Collider for both controller and object are off.
Controller | Objects | |
Rigidbody |
Necessary |
Necessary |
Colider | Necessary | Necessary |
Is Trigger in Collider | Unchecked | Unchecked |
When this condition is met, “COLLISION ENTER” will be triggered on the Playmaker.
Conditions for using COLLISION EVENTS in STYLY
In order to use COLLISION EVENTS in STYLY, the following settings are required;
The object which the event is to be triggered
The following settings are required for the object that you want to trigger the event;
- Granting Collider
- Unchecking the Is Trigger in Collider
STYLY’s controller
You need to add the following objects to your STYLY controller;
- Granting Rigidbody
- Granting Collider
- Unchecking the Is Trigger in Collider
See how to make it. Before going on furtherer, here are some explanations for the process flow;
- Prepare a 3D model
- Grant Collider to the colliding 3D model
- Set up interaction with 3D models in Playmaker
- Create an object for the STYLY controller
- Attach an object to a STYLY controller
Prepare a 3D model
Let’s prepare a 3D model to implement the interaction. This time we will use Cube.
Right-click in Hierarchy and select “Cube in 3D Object”.
This time, it will be a 3D model that implements the interaction.
Add a Collider to the Cube to give it a collider.
Granting Collider to the colliding 3D model
Collider is a component that calculates the collision detection. By assigning this information to the target 3D model, the “collision” information will be obtained when the target 3D model is touched by another 3D model.
Normally, Cube and Sphere created on a scene in Unity are granted by default, but imported 3D models need to be granted.
When you wish to add a component, add it from “Add Component” in the Inspector.
By adding Collider, the 3D model can now be judged as a collider.
To trigger a COLLISION EVENT, leave the Is Trigger checkbox unchecked in the Collider.
Set up interaction with 3D models in Playmaker
This time, when the controller hits a 3D model (Cube), a TRIGGER EVENT is triggered and the interaction changes color.
In advance, create a material to change the color.
Right click on Project and select ‘Create > Material’ to create a material.
Once you created the Material, name it RED.
Change the name and change the color within Inspector.
The material is now ready to be used.
The next step is to prepare the interaction in Playmaker.
With Cube selected, right-click on the PlaymakerEditor and select “Add FSM”.
State1 is added; rename State1 to “Waiting for Collision”.
With the State of Waiting for Collision selected, right-click and select [Add Transition > System Events > COLLISION ENTER].
Next, right-click on the PlaymakerEditor and select Add State. Set the action for this state to change the color.
State1 has been added. Let’s change the name to “Change Color”.
Set the action for Change Color, and select “Action Browser” in the lower right corner of the State tab to open the browser.
Select “Set Material” from the Action Browser and select “Add Action To State” at the bottom right to add the action.
Set the action of Set Material.
In the Set Material section, set the previously prepared “RED” material to “Material”.
Finally, connect the state of “Waiting For Collision” with the state of “Change Color”.
Now it is possible to set up the interaction with the Cube’s Collision Event.
Next, configure the Collider to be attached to the controller.
Create an object for the STYLY controller
Create an object for the STYLY controller that fires COLLISION events.
The controller is on the right and left, but the basic creation procedure is the same.
Proceed with the instructions for the right controller.
Create the following configuration objects;
- Granting Rigidbody
- Granting Collider
- Unchecking the Is Trigger in Collider
First of all, create an empty object in Hierarchy with “Create Empty”
Change the name to the following
Right Controller: RightControllerCollider
Left Controller : LeftControllerCollider
From Add Component, add Sphere Collider and set the Radius of Sphere Collider to 0.05.
The Is Trigger is unchecked, so leave it alone.
The Coliider is now set up.
From the Add Component, add a Rigidbody and uncheck Use Gravity.
An object for the STYLY controller that fires a COLLISION EVENT is completed.
Attaching an object to a STYLY controller
It is required to attach the object that fires the COLLISION EVENT to the STYLY controller.
Process Flow;
- Find game object to find the STYLY controller
- Get the spatial coordinates of the controller with Get Position
- Set Position sets the object’s position to the position of the STYLY controller
- Attach objects to the STYLY controller with Set Parent
- Make the Controller object a child object of the empty GameObject (2021.10.11. added)
Add an FSM to the ControllerColliderRight
From the Add Component, add the Playmaker FSM
Click on the Edit button in Playmaker FSM to open the PlaymakerEditor
Select State 1 and open it by selecting Action Browser on the bottom right of the State tab.
Add the Find Game Object / Get Position / Set Position / Set Parent from Action Browser.
Be sure to put them in the same order as the images. It may not work properly if they are in the wrong order.
Find game object to find the STYLY controller
Enter the following in the Object Name of the Find Fame Object (enter the bolded part).
- Attaching an object to the right controller: Controller (right)
- Attaching an object to the left controller: Controller (left)
As above, a half-size space will be placed between the Controller and (right).
With the wrong letter, even one, it won’t work, so be careful.
Next, open the Store menu bar and select “New variable…” and enter the following (please enter the bolded part).
- Right controller : right controller
- Left Controller:leftController
The controller in STYLY will be searched for and the rightController variable will contain the controller information in STYLY.
Since we don’t use With Tag, use Untagged instead.
You’re done setting up the Find Game Object.
Get the spatial coordinates of the controller with Get Position
Click the ↕ button on the Game object in Get Postion to change it from Use Owner to Specify Game Object.
Click the = button on the menu bar and the ↕ button in the order of ↕, and specify the variable rightController in the Find Game Object’s Store.
Click the ↕ button on the Vector menu bar, select “New variable…” and enter the following (enter the bolded part).
- For the right controller : rightControllerPosition.
- For the left controller: leftControllerPosition.
The spatial coordinates of the STYLY controller will now be stored in the rightControllerPosition variable.
Space should be set to World.
Set Position sets the object’s position to the position of the STYLY controller
Click the ↕ button on the Game object in Set Postion to change it from Use Owner to Specify Game Object.
Click the = button on the menu bar and drag and drop the ControllerColliderRight from Hierachy into the None(Game Object) field.
Click the ↕ button on the Vector menu bar and select the rightControllerPosition set in Vector under Get Position.
Change Space to World.
The object is now set to the same position as the STYLY controller.
Attach these objects to the STYLY controller with Set Parent
Set Parent allows you to set the STYLY controller to be the parent and the object to be the child of the controller to follow it.
Click the ↕ button on the Game object in the Set Parent to change it from Use Owner to Specify Game Object.
Click the = button on the menu bar and drag and drop the ControllerColliderRight from Hierarchy into the None(Game Object) field.
Set the Parent.
= button click, ↕ button in that order, and select rightController.
Make the Controller object a child object of the empty GameObject (2021.10.11. added)
Finally, make the Controller object you created an empty child object.
If you do not do this process, a bug will occur where the object will not be reflected in the controller correctly.
Let’s create a Game Object. Let’s name it ColliderParent.
Set Transform in the same way as for RightControllerCollider.
In this case, it looks like the following.
Finally, let’s drag and drop the RightControllerCollider onto the ColliderParent to make it a child object.
You can now set the object to stick to the STYLY controller.
Upload to STYLY
Let’s pre-fabricate your object and upload it to STYLY.
Prefab to upload.
- ControllerColliderRight
- ControllerColliderLeft
- Cube
For more information on how to upload, please click here.
Sample Scene.
You can check the operation here.
Let’s implement a variety of actions!
You can use STYLY FORUM to solve the problem. STYLY FORUM is a place where people can discuss a service or technical issue on STYLY, or provide bug reports on STYLY.
https://en.forum.styly.cc/support/discussions