In this article, I am going to introduce how to create many rubber balls in Unity, and how to import that setup to a scene in STYLY.
![2_capture - STYLY](https://styly.cc/wp-content/uploads/2018/08/2_capture.gif)
The sample scene we are going to create in this tutorial
- 0.1 Sample
- 0.2 Preparation
- 0.3 Placing a object in a random position
- 0.4 Changing the material of an object
- 0.5 Repeating a certain process using event transitions
- 1
- 2 Create a floor
- 3 Creating a rubber ball
- 4
- 5 Make a Prefab from the ball
- 6 Create balls with PlayMaker
- 7 Create 100 balls
- 8 Set the ball color randomly
- 9 Set the balls to fall down
- 10 Set the balls to bounce
- 11
- 12
- 13 Uploading to STYLY
Sample
You can see what the scene looks like in STYLY from the URL below.
The sample project in Unity https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/SuperBall
Preparation
In this tutorial, we are going to use Playmaker to create the rubber balls.
https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368
What you can do with PlayMaker
In this article, we use Playmaker for the following settings. ・Placing a object in a random position ・Changing the material of an object ・Selecting a material randomly ・Repeating a certain process using event transitions
Placing a object in a random position
You can place a object in a random position each time you execute an action by using Playmaker.
![img_5ba2d364c9844 - STYLY ランダムな位置にオブジェクトを出す](https://styly.cc/wp-content/uploads/2018/09/img_5ba2d364c9844-1024x205.png)
Placing a object in a random position
I used the following Playmaker actions
- Create Object
- Random Float
- Set Vector3 XYZ
Changing the material of an object
You can change the material of an object randomly by using Playmaker.
![img_5ba2d47362e2e - STYLY マテリアルを差し替える](https://styly.cc/wp-content/uploads/2018/09/img_5ba2d47362e2e-1024x163.png)
Changing the material of an object
I used the following Playmaker actions
- Set Random Material
Repeating a certain process using event transitions
You can repeat a process by using Playmaker.
![img_5ba2d5d35e9b2 - STYLY オブジェクトを作る処理を100回繰り返す](https://styly.cc/wp-content/uploads/2018/09/img_5ba2d5d35e9b2-300x245.png)
Repeating a object creation process
I used the event transition fucntion of Playmaker for this process
Create a floor
First, let’s create a floor.
![floor_sample - STYLY これから作る床](https://styly.cc/wp-content/uploads/2018/08/floor_sample.png)
The floor we are going to create
Create a Plane object
Click the Create button in the Hiearchy, select 3D Object > Plane, and create a Plane object.
![4_create_plane - STYLY Planeの作成](https://styly.cc/wp-content/uploads/2018/08/4_create_plane.png)
Creating a Plane
Set the Plane scale to (4,4,4).
![5_plane_scale - STYLY Planeのスケール変更](https://styly.cc/wp-content/uploads/2018/08/5_plane_scale.png)
Changing the Plane scale
The creation of the floor is complete!
![floor_sample - STYLY 作成した床](https://styly.cc/wp-content/uploads/2018/08/floor_sample.png)
The created floor
Creating a rubber ball
Next, let’s create a rubber ball.
![3_ball_sample - STYLY これから作るスーパーボール](https://styly.cc/wp-content/uploads/2018/08/3_ball_sample-e1537194402723.png)
The ball we are going to create
Create a Sphere object
Click the Create button in the Hiearchy, select 3D Object > Sphere, and create a Sphere object.
![6_create_sphere - STYLY Sphereを作成](https://styly.cc/wp-content/uploads/2018/08/6_create_sphere.png)
Creating a Sphere
A white Sphere object is created.
![7_sphere - STYLY 作成されたSphere](https://styly.cc/wp-content/uploads/2018/08/7_sphere-300x222.png)
The created Sphere
Setting a color to the ball
To set a color to the ball, let’s create a material. By using a material, we can set a color to the ball.
![img_5b8880b3c2958 - STYLY これから作る予定の色付きボール](https://styly.cc/wp-content/uploads/2018/08/img_5b8880b3c2958-300x298.png)
The colored ball we are going to create
Right click in the Hierarchy window, and select Create > Material.
![9_create_material - STYLY マテリアル作成](https://styly.cc/wp-content/uploads/2018/08/9_create_material-e1535673102475.png)
Creating a material
First, we are going to create a material for a blue ball, so let’s name the material “Ball_Blue”.
![img_5b8883c406f7c - STYLY 作成したマテリアル](https://styly.cc/wp-content/uploads/2018/08/img_5b8883c406f7c.png)
The created material
Setting the material color to blue
The created material is white by default, so we need to change it to blue. Select the Ball_Blue material, and check the Emission checkbox in the Inspector window.
![10_click_emission - STYLY Emissionにチェックを入れる](https://styly.cc/wp-content/uploads/2018/08/10_click_emission.png)
Check the Emission checkbox
A color setting option will appear, so click it and set the color.
![11_click_color - STYLY 色をクリック](https://styly.cc/wp-content/uploads/2018/08/11_click_color.png)
Click the Color
![img_5b9e3e3de692d - STYLY 色の設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9e3e3de692d.png)
Color settings
A blue material is created.
Check the material
Drag and drop the material to the Sphere, and check how the ball looks like with the material attached.
![drag_material - STYLY マテリアルをSphereに登録](https://styly.cc/wp-content/uploads/2018/09/drag_material.gif)
Setting the material to the ball
Preparing 4 more color materials
Repeat the process and create 4 more different color materials.
![img_5b9e3fa2147f4 - STYLY マテリアルを用意](https://styly.cc/wp-content/uploads/2018/09/img_5b9e3fa2147f4.png)
Create 4 more materials
I created a blue, green, pink, red, and yellow material for this tutorial.
Make a Prefab from the ball
In order to use the ball with Playmaker, we need to create a Prefab from the ball. Drag and drop the Sphere from Project to Hierarchy, and create a Prefab.
![drag_sphere - STYLY Prefab作成](https://styly.cc/wp-content/uploads/2018/09/drag_sphere.gif)
Prefab作成
Change the name to SuperBall.
![img_5b9f13742dacf - STYLY Sphereの名前をSuperBallにする](https://styly.cc/wp-content/uploads/2018/09/img_5b9f13742dacf.png)
Change the name of the Sphere to SuperBall
Set the SuperBall scale to (0.4,0.4,0.4).
![img_5b9fc244c5c20 - STYLY Scaleを(0.4, 0.4, 0.4)にする](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc244c5c20.png)
Set the scale to (0.4, 0.4, 0.4)
The Prefab editing is done! Let’s move on to PlayMaker.
Create balls with PlayMaker
Next, let’s create balls with PlayMaker.
Open PlayMaker
Choose PlayMaker / PlayMaker Editor from the menu, and open the PlayMaker editor.
![img_5b9e416ce56c0 - STYLY PlayMakerエディタの起動](https://styly.cc/wp-content/uploads/2018/09/img_5b9e416ce56c0-e1537098132787.png)
Opening the PlayMaker editor
Open the Action Browser too.
![img_5b9e42649deaf - STYLY Action Browserの起動](https://styly.cc/wp-content/uploads/2018/09/img_5b9e42649deaf.png)
Opening the Action Browser
I tend to place the windows like below for accessiblity.
Add a FSM
Select the Plane in Hierarchy, right click once in the PlayMaker window, and click “Add FSM”.
![make_statemachine - STYLY FSMの作成](https://styly.cc/wp-content/uploads/2018/09/make_statemachine.gif)
Add FSM
A FSM is created. An FSM is needed to run processes in PlayMaker. It starts from the START state, then moves on to State 1, and so on.
Set a Create Object Action
For this tutorial, we are going to add a “Create Ball” process to State 1. When you want to add a process to create an object (for this tutorial, a ball), we use the “Create Object” action. Select State 1, and drag and drop the Create Object from the Action Browser to the State tab.
![img_5b9f0fa234341 - STYLY Create Objectアクションの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f0fa234341.png)
Add a Create Object action
The Create Object action is registered to State 1. This Create Object action will become a “create object” process.
Set a Prefab to the Create Object action
A Create Object action is added now, but we also have to register what object we want to create with the action. Drag and drop the SuperBall prefab from the Hierarchy to the GameObject box, and register it.
![img_5b9f176555119 - STYLY SuperBallをCreateObjectアクションへ登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f176555119.png)
Registering the SuperBall to the CreateObject action
When we play the scene after we register the SuperBall prefab, a SuperBall object is created. The created object name will become the Prefab name + “(Clone)”.
![img_5b9f18046f185 - STYLY ゲーム再生時に作成されるSuperBall](https://styly.cc/wp-content/uploads/2018/09/img_5b9f18046f185.png)
The SuperBall that is created
Changing the spawn position
Next, let’s try to move the spawn position of the ball upwards.
Prepare variable “pos”
Drag and drop the “Set Vector3 Value” from the Action Browser to the space above Create Object.
![drag_set_vector3_value - STYLY Set Vector3 Value アクションの登録](https://styly.cc/wp-content/uploads/2018/09/drag_set_vector3_value.gif)
Registering the Set Vector3 Value
Next, let’s create a variable named “pos” to store the 3-dimention position value.
![make_variable_position - STYLY 変数posの用意](https://styly.cc/wp-content/uploads/2018/09/make_variable_position.gif)
Creating value pos
The pos variable is going to be used to store the position value (x, y, z) of the ball.
Set up the pos value
Next, add (0,2,0) to pos.
Set the ball spawn point to pos
Click the Position in the CreateObject action, and choose pos from the popup menu.
![img_5b9f4e7810efe - STYLY Positionをクリック](https://styly.cc/wp-content/uploads/2018/09/img_5b9f4e7810efe.png)
Click Position
![img_5b9f4ed90d221 - STYLY posを選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9f4ed90d221.png)
Choose pos
Now, the ball is set to be created at the pos position(currently 0,2,0).
Check that the ball is correctly created at (0,2,0)
Click the Play button, and check the spawn position of the ball.
Set the spawn point to random
Next, let’s change the ball spawn point to be chosen randomly. The Set Vector3 Value action we just created is no longer needed, so delete it.
Adding a Random Float action
Add a Random Float action by drag and drop from Action window. Repeat this process 2 times (Create 3 Random Float actions).
![img_5b9f542fe7cc6 - STYLY Random Floatを3回登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f542fe7cc6.png)
Create 3 Random Float actions
Random Float action is a process that creates a value by random.
Add a Set vector3 XYZ action
Next, add a Set Vector3 XYZ action in between RandomFloat and Create Object.
![img_5b9f54e871f94 - STYLY Set Vector3 XYZの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f54e871f94.png)
Add a Set Vector3 XYZ action
The Set Vector3 XYZ action is a process that sets the position to (X, Y, Z).
Check the registered actions
Check that your actions line up as below.
![img_5b9f557897392 - STYLY 登録したアクションの確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f557897392.png)
The registered actions
Set up the Random Float action
Set the RandomFloat action as below. Variable X, Y, Z does not exist, so we need to create the variable by clicking “New Variable…”.
![img_5b9f51c27cbe7 - STYLY Random Floatの設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9f51c27cbe7.png)
Random Float Settings
Set up the Set Vector3 XYZ action
Set the Vector3 XYZ action as below.
![img_5b9f5651927cb - STYLY Set Vector3 XYZの設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9f5651927cb.png)
Set Vector3 XYZ settings
A position pos with random parameters is created. Variable pos is used by the CreateObject, so the created ball will now appear in the position pos(a random position).
Check that the ball is created in a random position
Click the play button and check that the ball is created randomly. Each time you click the play button, the ball should appear in a random position.
![img_5b9f571cb0e22 - STYLY ボールがランダムな位置に生成されていることの確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f571cb0e22.png)
Check that the ball is created in a random position
Create 100 balls
We completed setting up the “Create ball” process with PlayMaker. By repeating this process 100 times, we can create 100 balls in random positions.
Sort and close the states
Sort and close the states so you can easily see the states you have created.
![img_5b9f586b0b104 - STYLY 三角形アイコンをクリックして折りたたむ](https://styly.cc/wp-content/uploads/2018/09/img_5b9f586b0b104.png)
Click the triangle icon to close the states
Implement the repeat process
The steps to repeat the processes
STEP1. Create a counter with a 0 value STEP2. Add 1 to the counter STEP3. Create a ball STEP4. If the counter is smaller than 100, return to STEP2 STEP5. END the process if the counter is equal to 100 In programming, a for loop is used for repeating processes. We will create a similar process with PlayMaker.
Creating a counter variable
First, select the “Variables” tab in the PlayMaker window. Select New Variable, and create a variable and name it “loop_counter”, and set the Variable Type to Int. By pressing the Add button, an Int variable loop_counter is created.
![img_5b9f5934322ba - STYLY カウンタ用の変数の追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f5934322ba.png)
Adding a counter variable
![img_5b9f59e171040 - STYLY 登録された変数の確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f59e171040.png)
Check the registered variable
Create an action that adds 1 to the counter
We will use the Int Add action to add 1 to the counter. Drag and drop the Int Add action to the State tab.
![img_5b9f848455c73 - STYLY Int Addの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f848455c73.png)
Register Int Add
Set “loop_counter” to Int Variable, “1” to Add.
![img_5b9f852401788 - STYLY loop_counter設定後のステート](https://styly.cc/wp-content/uploads/2018/09/img_5b9f852401788.png)
Settings after loop_counter is registered
We have completed the process to add 1 to loop_counter.
Adding an event transition
Next, let’s add a event so that if the counter value is smaller than 100, the process returns to the START state. Events are used to set up how the process moves on depending on the conditions. Click the Events tab in the PlayMaker window, type “スーパーバール作成”(or Create Ball) to the Add Event text box, and press Enter.
![img_5b9f87bb7e205 - STYLY Eventの追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f87bb7e205.png)
Add an Event
An event will be added to the Events list.
Next, right click State 1, select Add Transition > スーパーバール作成, and add a Transittion.
![add_transition - STYLY State1へEvent追加](https://styly.cc/wp-content/uploads/2018/09/add_transition.gif)
Adding an event to State 1
Drag the スーパーボール作成 to State 1, and a arrow will appear.
![transition_to_state1 - STYLY 遷移の設定](https://styly.cc/wp-content/uploads/2018/09/transition_to_state1.gif)
Transition setting
Now, whenever the “スーパーボール作成” event is called, the process returns to State 1. We will use this event to choose which transition the process follows.
Create a repeat process
In order to create a repeat process, we will setup the following. ・If the loop counter is smaller than 100, the process returns to the first ・If the loop counter equal to 100, the process finishes We use the Int Compare action to create this transition. This action is similar to the if or if else function in programming.
Add an Int Compare action
First, drag and drop the Int Compare action from the Action browser.
![img_5b9f860b43908 - STYLY Int Compareの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f860b43908.png)
Register the Int Compare action
Next, let’s set up the Int Compare action. For Integer 1 set “loop_counter”, for Integer 2 set 100, for Less Than set “スーパーボール作成”.
![int_compare - STYLY Int Compareの設定](https://styly.cc/wp-content/uploads/2018/09/int_compare.gif)
Int Compare settings
The repeating process is complete now! The process returns to State 1 if loop_counter value is smaller than 100, and will not (and stops) if not.
Check that 100 balls are created in the scene
Check that 100 balls are created when the play button is pressed.
![img_5b9f8e9bcded5 - STYLY 作成されるスーパーボールの確認](https://styly.cc/wp-content/uploads/2018/09/img_5b9f8e9bcded5.png)
Check the created balls
Set the parent of the ball
The objects will get messed up if they are created directly under Hierarchy, so let’s use the SetParent action to set a parent. Set the ball to StoreObject, and set the parent by setting the Game Object in SetParent.
![img_5b9fb7b9ee8e1 - STYLY 作成したスーパーボールの親を設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9fb7b9ee8e1.png)
Set Parent
Click the play button, and check that the created balls are created under Plane.
![img_5b9fb73b24430 - STYLY Planeの中にスーパーボールが作成される](https://styly.cc/wp-content/uploads/2018/09/img_5b9fb73b24430.png)
Balls are created under Plane
Set the ball color randomly
Next, let’s set the ball material randomly and make it colorful.
![img_5b9f91838a541 - STYLY マテリアルをランダムにしたスーパーボール](https://styly.cc/wp-content/uploads/2018/09/img_5b9f91838a541.png)
Balls with random materials
Add a FSM to the balls
Select the ball Prefab, and right click in the PlayMaker window, choose Add FSM.
![img_5b9f8fb60563a - STYLY SuperBallプレハブへFSM追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f8fb60563a.png)
Add a FSM to the SuperBall prefab
Select State 1, and register a Set Random Material action. The Set Random Material action selects a material randomly and sets the model’s material to it.
![img_5b9f9032eae91 - STYLY Set Random Materialアクションの追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f9032eae91.png)
Set Random Material action
Register materials to the SetRandomMaterial action.
![img_5b9f909d6f7df - STYLY 使用したいマテリアルを登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f909d6f7df.png)
Registering materials
Check that the ball colors are set randomly
Click the play button and check the ball colors.
![img_5b9f91838a541 - STYLY 実行結果](https://styly.cc/wp-content/uploads/2018/09/img_5b9f91838a541.png)
Executed result
Set the balls to fall down
By attaching a Rigidbody component to the balls, the balls will fall down according to gravity.
![img_5b9f924d7bf0e - STYLY Rigidbodyコンポーネントの追加](https://styly.cc/wp-content/uploads/2018/09/img_5b9f924d7bf0e.png)
Add Rigidbody component
Click the play button and check that the balls fall down.
![rigidbody_result - STYLY 実行結果](https://styly.cc/wp-content/uploads/2018/09/rigidbody_result-1.gif)
Executed result
CAUTION: If the ball positions cross over when the balls are created, the balls will burst apart.
![rigidbody_result - STYLY ボールが重なっている場合、はじけ飛ぶ](https://styly.cc/wp-content/uploads/2018/09/rigidbody_result.gif)
The balls bursting apart
Set the balls to bounce
Set PhysicsMaterial so that the balls bounce.
Create Physics Material
Right click upon the Project window, and create a Physics Material.
![img_5b9f93fca4825 - STYLY Physics Materialの作成](https://styly.cc/wp-content/uploads/2018/09/img_5b9f93fca4825.png)
Create Physics Material
Set up Physics Material
Set up the PhysicsMaterial as below.
![img_5b9f957d76757 - STYLY Physics Materialの設定](https://styly.cc/wp-content/uploads/2018/09/img_5b9f957d76757.png)
Physics Material settings
I set Friction to 0.0, and Bounciness to 1.0. If you want to make the balls less bouncy, please set the Bounciness smaller.
Registering Physics Material
Register Physics Material to the SuperBall prefab.
![img_5b9f94e3a5c6b - STYLY Physics Materialの登録](https://styly.cc/wp-content/uploads/2018/09/img_5b9f94e3a5c6b.png)
Register Physics Material
Do the same for the floor(Plane).
You can check the settings by playing the scene.
![physics_material_result - STYLY 実行結果](https://styly.cc/wp-content/uploads/2018/09/physics_material_result.gif)
Execution result
That will be all for setting up the balls!
Uploading to STYLY
Create Prefab
To make things simple, change the Plane object name to “SuperBallPlane”.
![img_5b9fbc077fdfd - STYLY 名前を変更して"SuperBallPlane"にする](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbc077fdfd.png)
Change name to “SuperBallPlane”
Drag and drop the SuperBallPlane to the Project window, and create a Prefab.
![img_5b9fbc44679ff - STYLY Prefabの作成](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbc44679ff.png)
Create Prefab
Upload the prefab to STYLY
Right click the prefab, and select Upload prefab to STYLY.
![img_5b9fbcbe67633 - STYLY アップロードの実行](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbcbe67633.png)
Uploading to STYLY
A window will popup, so wait for the upload to complete.
![img_5b9fbd0f06944 - STYLY アップロード中ウィンドウ](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbd0f06944.png)
Uploading window
Once the upload is complete, a Upload succeeded message will popup.
![img_5b9fbfc0f1ae8 - STYLY アップロード完了ウィンドウ](https://styly.cc/wp-content/uploads/2018/09/img_5b9fbfc0f1ae8.png)
Upload complete window
Check in STYLY
Click the SuperBallPlane in 3D Models in STYLY, and place the prefab into your scene.
![img_5b9fc0847b740 - STYLY 3D Modelsの選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0847b740.png)
Select 3D Models
![img_5b9fc0b26f376 - STYLY My Modelsの選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0b26f376.png)
Select My Models
![img_5b9fc0d8b2f60 - STYLY SuperBallPlaneの選択](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0d8b2f60.png)
Select SuperBallPlane
![img_5b9fc0fdb7eef - STYLY STYLY上でスーパーボールが出現](https://styly.cc/wp-content/uploads/2018/09/img_5b9fc0fdb7eef.png)
The balls appear in STYLY