[Unity/Playmaker] How to make a simple VR space “dot.line-“.

   

An explanation of the scene “dot.line-” using Playmaker. 

Introduction

The “dot.line-” is a simple VR space composed of only black and white; dots and lines. By changing the movements randomly, you can experience a different visual space. In this article, I will explain mainly the implementation of Playmaker used in this scene. UnityProject is available on GitHub.

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/dotline

Preparation

First, download the STYLY-Unity-Examples repository as a clone or zip from GitHub.
https://github.com/styly-dev/STYLY-Unity-Examples

Open the obtained project in Unity 2019.3.x and import the Playmaker (paid). At the time of writing: Playmaker 1.9.0

Once you’ve imported & installed Playmaker, open Assets>STYLY_Examples> dotline> dotline scene and run Unity.

The space of dot.line- will be executed. This UnityProject does not include dot.man. 

Physical Settings for Spheres and Invisible Enclosures

The sphere jumping through space is an invisible box that surrounds the sphere flying randomly through zero gravity.

The space is enclosed by a Cube, and the range of movement of the ball is decided.

Place the Cube with BoxCollider as a board with a scale of 10 on each side and a thickness of 1, so that it encloses 6 sides. MeshRenderer is deactivated so that it doesn’t show up.

Make a ball

Create a Sphere Prefab and configure it as follows Add SphereCollider. Add RigidBody. Turn off UseGravity to make it weightless.

Setting up a collision in PhysicsMaterial

We set the friction coefficient to 0 and the rebound coefficient to 1 so that the velocity of the ball and the enclosure does not degrade when the ball and the enclosure collide and set the collider of the enclosure and the ball.

Place 50 balls in Playmaker to give the first speed

The control of object creation at scene execution is implemented by PlaymakerFSM of DotLineManager. Check it out in the Playmaker Editor.

50 balls are generated and placed in the GenerateDots state, with transitions at runtime, and the initial speed is set

Arrange the balls in a random manner.

Generate a dotSphere prefab, set the Position randomly with Action Random Float to generate a random number of ranges that fall within the enclosure, and set it to the Position of the generated dotSphere.

Set the initial velocity of the ball

Generate a vector of initial velocity randomly in the range of -4 to 4 and set the initial velocity to the sphere object with SetVelocity.

The generated dotSphere GameObjects are added to the “dotarray” array for later reference. Also, the generated GameObject needs to be a child of DotLineManager so that it is deleted from STYLY at the end of the scene. Get the GameObject(=DotLineManager) with this FSM set in GetOwer and set it as a child with SetParent.

Repeat to generate 50 spheres.

The GenerateDots state transitions to the same state after a FINISHED event (the end of all actions), and the sphere generation process is repeated. For the detection when 50 spheres aer generated, one count variable is added at each time, and when it reaches MAX_Count(50), a FinishGenerate event and transitions to the next state “GenerateLines” are issued.

Generate 50 cubes to connect balls in Playmaker

The line connecting the two spheres is achieved by placing a Cube between the two spheres and varying the transform. In the GenerateLines state, 50 cubes will be generated to connect the spheres.

Create a Cube

The cubes that hit the line are Prefabs>lineCube.

The action to create a LineCube and add it to the “linearray” array is as follows. The generated lineCube’s lineFSM component is passed the two connecting spheres from the dotarray array.

The generation process is repeated until 50 lineCubes have been generated, and when 50 lineCubes have been generated, it comesto the End state. * The repetition and end detection actions are the same as those for GenerateDots.

In the end state, set the first and last spheres of the dotarray in the last LineCube so that all the spheres are in a continuous loop.

Change the transform of the Cube so that the two spheres are connected in Playmaker

In LineFSM of lineCube, the transform is changed every frame so that dot1 and dot2 passed at the time of generation are connected by a line. Open LineFSM in LineCube.

LineFSM state transition diagram

In the SetDistanceAndRotation state, LineCube transforms to connect two spheres. Scale value Get the distance between dot1 and dot2 with GetDistance and set it as follows. Scale: (thickness, girth, distance of two balls)

Value of Position The position of two balls is obtained by Vector3, and the position of the center is calculated and set by Vector3 Operator (Add) and Vector3 Operator (Divide 2).

Set the value of Rotation to face the direction of dot1 in LookAt.

Change the thickness of the Cube at a certain period

The thickness of the cube was adjusted to balance the smooth switching between points and lines and the display time. The sin curve as shown below was shifted by 1/4 in the negative direction, 0 or less was changed to 0.

The formula to express the thickness is as follows tickness = sin(lifetime/FPS)*LINE_TICKNESS*2 – LINE_TICKNESS if(tickness < 0 ) then tickness = 0 In this sample, the thickness change was set to a period of about 4 seconds and the following parameters were used

 

• LIFETIME: Elapsed time, increased by LIFETIME_STEP(=π/2) per frame.
• FPS: Frame Per Second, assuming a 60FPS environment
• LINE_TICKNESS: Maximum thickness of the line

You can adjust each parameter as you like. This is implemented in Playmaker as follows.

If the thickness is less than or equal to 0, it shifts to the SetTicknessTo0 state and sets it to 0.

Switch between black and white all at once in Playmaker

Switches between black and white in a fixed period. The ColoSwitcher is a black and white sphere that alternately inflates and reverses the black and white when it covers your vision. The FSM of ColorSwitcher is as follows.

Run time starts with a black background and the white ColorSwitcher starts to expand after 4 seconds.

When it transitss to the Grow state, the ColorSwitcher_White Scale is increased every frame, and when the size exceeds 10, an EXPIRE event is issued and it transits to the End state.

In the End state, it issues a START GROWING event to pass control to the black ColorSwitcher, and then issues a SET BG WHITE event to all PlaymakerFSMs at BroadcastAll to notify them of the background color change.

When ColorSwitcher_Black receives the START GROWING event, it transitss to the Wait state, and the following processes are similar to those of ColorSwitcher_White. When it expands, it sends a START GROWING event to ColorSwitcher_White in the End state. BroadcastAll will issue a SET BG BLACK event to all PlaymakerFSMs to notify them of the background color change.

The background color change event SET BG WHITE/BLACK will be received by dotSphere, lineCube, and BGSphere. Add PlaymakerFSM to each of them, get its own material when it receives it, and change the color with SetMaterialColor.

How to make “dot.man”

Lastly, I’ll explain how to make dot.man. I didn’t use Playmaker, I used Animation. Obtain the underlying Raw Mocap Data formMecanim assets from the Asset Store. 

https://assetstore.unity.com/packages/3d/animations/raw-mocap-data-for-mecanim-5330

Place the DefaultAvater model in Hierarchy and apply D&D to any animation from Animations.

Edit the AnimationController to make the animation play back a loop. Doubleclick on the AnimationController to open the Animator window. Right click on the Animation you added (Idle_Naturel_1) and select MakeTransition.

Set the transmission destination to the same State (Idle_Natura_1). Run it and make sure that the animation plays in a loop.

Once the animation is set up, we will set up the dotSphere as a child of each of the DefaultAvater joints.

Finally, deactivate the model’s meshes Geo_grp, LeftEye, and RightEye game objects to complete the “dot.man”.

Please try moving it with various animations.

Upload and place on STYLY

Download and import the UnityPlugin from STYLY’s Download site
UnityPlugin 

See the download site for the initial settings of UnityPlugin.

Right-click on the dot.line-Base(Upload to STYLY) prefab→STYLY→Upload prefab or scene to STYLY. After a while, the Upload Success pop-up will appear.

Open the STYLY Studio in your browser and open the 3D Model > My Models tab in your asset selection to see your uploaded assets.

Click to place it in the scene.

Follow the same procedure and upload dot.man with Prefab.

In the end

That’s all for the dot.line- commentary. With Playmaker in STYLY, you can do a lot of different things, so you can broaden your expression. You can see the space of dot.line- at this URL on STYLY.

You can also watch it on Youtube 360° video.

Click here to see a sample project.
https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/dotline