PlayMaker, afjk,

 

This article introduces a “dot.line-” scene using Playmaker.

 

Introduction

“dot.line-” is a simple VR space that is made from only dots and lines in black and white.

Setting the movement to random results in a fresh experience each time you start the scene.

This article mainly talks about the implementation of the Playmaker used in this scene.

This UnityProject has been published in GitHub.

Please refer to it from here.

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

Confirm sample assets with WebEditor

Confirm sample assets with WebEditor
Launch the WebEditor

* If you  register STYLY, you can check the sample assets created with this TIPS with WebEditor.
If you do not register an account, please register again and click this button again.

Register for account from here
Click here

 

Preparation

First of all, you need to download the zip file or clone the STYLY-Unity-Examples repository from GitHub.

https://github.com/styly-dev/STYLY-Unity-Examples

Open the project in Unity 2017.4.x, and import Playmaker(Purchase needed).

Version used in this article:Playmaker 1.9.0

https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368

After you import and install Playmaker, open the scene from

Assets>STYLY_Examples>dotline>dotline and press the play button.

The dot.line- scene will run.

※ This UnityProject does not include dot.man.

 

The physical settings for the ball and its surroundings

The balls in the scene jump around in zero gravity, and are surrounded by an invisible box.

 

Surround the sphere by a Cube, and determine the range of movement for the sphere

Surround the ball by a Cube, set BoxCollider, and set the scale for each side to 10, thickness to 1.

Set the MeshRenderer to non-active, so the Cube will not be displayed.

Making the ball

Make a Prefab for a Sphere, then add SphereCollider to it.

Next, add RigidBody, and unselect UseGravity to make the sphere unaffected from gravity.

Using PhysicsMaterial for collision settings

In order to stop the ball from losing speed when it collides into the Cube, make a PhysicsMaterial, set the Dynamic Friction to 0, Bounciness to 1, and add it to the colliders of the sphere and the cube.

Creating, arranging, and setting speed of 50 balls using Playmaker

The object creations at the execution of the scene is controlled by the PlaymakerFSM of DotLineManager.

Check the Playmaker Editor for details.

The creation, arrangement, and initial speed setting of 50 balls is set at the GenerateDots state, which is called upon execution.

Placing balls randomly

This Action creates a dotSphere prefab, and sets Position at random.

Make random numbers by Random Float, and use them to set a Position inside the cube for the created dotSphere.

Set the initial speed for the ball

Randomly create a initial vector in the range -4 to 4, and set the initial velocity at SetVelocity.

The GameObject of the created dotSphere is needed for future reference, so add it to the array “dotarray”.

The created GameObject has to be set as a child of DotLineManager, so that it will be deleted when the scene is stopped.

You can get the GameObject(DotLineManager) that uses this FSM at GetOwner, and you can set it as the parent at SetParent.

Repeating the creation of 50 balls

When the GenerateDots status reaches the FINISHED event, it transitions to the same state again, and repeats the ball creation process.

In order to detect if the creation of 50 balls has completed, add 1 to the count variable each time, and when it reaches MAX_Count(50),
a FinishGenerate event is issued, and the state transitions to the next “GenerateLines” state.

Creating 50 Cubes that connect spheres using Playmaker

The lines that connect spheres are made by placing a Cube between them, and transforming them.

At GenerateLines state, 50 Cubes that connect a sphere with another sphere are created.

Making a Cube

The Cube used for this is located at Prefabs>lineCube

I will explain the actions to create a LineCube, and add it to the array “linearray”.

Take 2 spheres from the dotarray, and set them as Fsm Game Objects for the created LineCube.

Repeat the creation process until 50 lineCubes are created, and when finished, change to End status.

※ The detection of the repeat process and end process is the same as GenerateDots.

At the End process, connect the last created LineCube with the first sphere and the last sphere in dotarray, so that all the spheres become connected like a circle.

Set the transform for the Cube to connect 2 spheres using Playmaker

At the lineFSM of the lineCube, the transform is changed every frame in order to connect dot1 and dot2 with a line.

Open the LineFSM of the LineCube.

State transition of LineFSM

Set the transform so that at SetDistanceAndRotation status, the LineCube connects 2 spheres.

Scale value

Get the distance between dot1 and dot2 using GetDistance, and set it for the Scale.

Scale X:Thickness Y:Thickness Z:distance (between dot1 and dot2)

Position value

Get the positions of the 2 spheres at Vector3, calculate and set the center position at Vector3 Operator(Add) and Vector3 Operator(Divide 2).

Rotation value

Set dot1 as the target for the LookAt option.

Change the thickness of the Cube constantly

In order to change the cube’s thickness smoothly, this sample program uses the sin wave shifted 1/4 in the negative direction, and sets 0 for anything under 0.

The formula for thickness is:

thickness = sin(lifetime/FPS)*LINE_THICKNESS*2 – LINE_THICKNESS

if(thickness < 0 ) then thickness = 0

In this sample, the thickness change period is set as 4 seconds, and uses the parameters below.

  • lifetime: time elapsed. During 1 frame, LIFETIME_STEP(=π/2) increases
  • FPS:Frame Per Second。60FPS is expected
  • LINE_THICKNESS:The most recent thickness of the line

Please adjust each parameter as you prefer.

Implement this in Playmaker.

If the thickness is 0 or less, SetThickness is set to 0.

Switch black and white with Playmaker

Change black and white constantly.

ColorSwitcher inflates black spheres and white spheres one after the other, and switches color when it covers the whole screen.

The FSM for ColorSwitcher is set as below.

When executed, the scene starts with a black background, and the white ColorSwitcher starts expanding 4 seconds later.

At the Grow state, the scale value of ColorSwitcher_White increases every frame, and when the size becomes larger than 10, an EXPIRE event is issued, and the state changes to End.

At the End state, in order to give control to ColorSwitcher_Black, a START GROWING event is issued and BroadcastAll issues a SET BG WHITE event to every PlaymakerFSM and notifies the background color has been changed.

When the ColorSwitcher_Black recieves the START GROWING event, it enters the Wait state, and the process from there is the same as ColorSwitcher_White.

When it inflates to the limit and changes to End state, it notifies a START GROWING event to ColorSwitcher_White and
BroadcastAll issues SET BG BLACK event to every PlaymakerFSM and notifies the change of background color.

The objects that receives the background change event SET BG WHITE/BLACK are dotSphere, lineCube, and BGSphere.

A PlaymakerFSM is added to each object, and when it recieves the event, the object gets its own Material, and changes the color using SetMaterialColor.

How to create dot.man

Finally, I will introduce how to create dot.man.

For dot.man, Playmaker is not used, and the movements are set using Animation.

Please obtain the Raw Mocap Data formMecanim asset from the asset store, which will become the base.

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

First, place the DefaultAvatar model in the Hierarchy, and set any animation you prefer from the Animations list.

In order to set a loop for the animation, edit the AnimationController.

1. Double click the AnimationController, and open the Animator window.

2. Right click the Animation you added (in the example, “Idle_Neutral_1”), and choose MakeTransition.

3. Set the transition target to the same state(Idle_Neutral_1).

Click play, and check that the animation is looped.

Next, for each joint of the DefaultAvatar, create a dotSphere beneath them.

Finally, change the mesh of the Geo_grp, LeftEye, and RightEye gameObject to non-active, and “dot.man” setting is done!

Try moving the model in different animations.

Uploading and positioning in STYLY

Download and import the UnityPlugin from the STYLY Download site.

※ Please check the details for the initial setup settings at the download site.

https://styly.cc/download/?lang=ja

Right click dot.line-Base(Upload to STYLY) prefab → STYLY → Upload prefab or scene to STYLY

After some time, the Upload Success popup will show up.

Open the STYLY editor and in choose asset, open the 3D Model > My Models tab.
The uploaded asset will be located here.

Click it the place it in the scene.

Using the same process, make a prefab from dot.man and upload it too.

Conclusion

That will be all for the introduction for dot.line-.

By using Playmaker in STYLY, you will become able to do many new things, and your range of expression will expand tremendously.

You can check the dot.line- scene at STYLY from this URL.

http://gallery.styly.cc/afjk/515f798a-7126-11e8-b34d-4783bb2170d0

There is also a 360-degree video uploaded at Youtube, so please check it out too!

https://www.youtube.com/watch?v=nay01zJzcO4

※ sample project can be downloaded from here:https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/dotline

準備

まず、STYLY-Unity-ExamplesリポジトリをGitHubからクローンまたはZipでダウンロードしてください。

https://github.com/styly-dev/STYLY-Unity-Examples

入手したプロジェクトをUnity 2017.4.xで開き、Playmaker(有料)をインポートします。

記事執筆時:Playmaker 1.9.0

https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368

Playmakerをインポート&インストールしたら、

Assets>STYLY_Examples>dotline>dotlineシーンを開き、Unityを実行してください。

dot.line-の空間が実行されます。

※本UnityProjectにはdot.manは含みません。

 

球と見えない囲いの物理設定

空間を飛び跳ねる球は無重力中をランダムに飛び交う球を見えない箱で囲います。

 

空間をCubeで囲い、球の移動範囲を決める

BoxColliderを設定したCubeを、Scaleが1辺10、厚み1の板状にして6面を囲うように配置します。

MeshRendererは非アクティブにして表示されないようにします。

球を作る

SphereのPrefabを作り、以下のように設定します。

SphereColliderを追加

RigidBodyを追加。UseGravityをオフにして無重力にします。

PhysicsMaterialで衝突時の設定をする

球と囲いが衝突する際に速度が減衰しないように、摩擦係数0、反発係数1にしたPhysicsMaterialを作り、囲いと球のColliderに設定します。

Playmakerで球を50個配置して初速を与える

シーン実行時のオブジェクト生成の制御はDotLineManagerのPlaymakerFSMで実装しています。

Playmaker Editorで内容を確認してください。

実行時に遷移するGenerateDots状態で50個の球の生成と配置、初速設定を行っています。

球をランダムに配置する

dotSphereプレファブを生成し、Positionをランダムに設定するAction

Random Floatで囲いの中に入る範囲の乱数を生成し、生成したdotSphereのPositionに設定する。

球の初速を設定する

-4から4の範囲でランダムに初速のベクトルを生成し、SetVelocityで球オブジェクトに初速を設定する。

生成したdotSphereのGameObjectは後で参照するため、配列「dotarray」に追加する。

また、生成したGameObjectはシーン終了時にSTYLYから削除されるようにDotLineManagerの子にする必要がある。

GetOwerでこのFSMが設定されたGameObject(=DotLineManager)を取得し、SetParentで子に設定。

50個の球を生成するよう繰り返す

GenerateDots状態はFINISHEDイベント(すべてのAction実行終了)で同一状態に遷移し、球の生成処理を繰り返す。

50個の球を生成し終わったことを検出するため、毎回count変数に1加算し、MAX_Count(50)に達したらFinishGenerateイベントを発行し、次の状態「GenerateLines」へ遷移する。

Playmakerで球をつなぐCubeを50個生成する

球をつなぐ線は2つの球の間にCubeを配置し、transformを変化させて実現しています。

GenerateLines状態では、球同士をつなぐCubeを50個生成します。

Cubeを作る

線に当たるCubleはPrefabs>lineCubeである。

LineCubeを生成し、配列「linearray」へ追加するActionは以下の通り。

生成したlineCubeのlineFSMコンポーネントにdotarray配列からつなぐ球を2つ取り出して渡します。

50個のlineCubeの生成が終わるまで生成処理を繰り返し、50個生成が完了したら、End状態へ

※繰り返しと終了の検出ActionはGenerateDotsと同じ。

End状態で一番最後のLineCubeにdotarrayの最初と最後の球を設定し、全ての球が一続きの輪になるようにする。

Playmakerで2つの球を繋ぐようにCubeのtransformを変化させる

lineCubeのLineFSMでは、生成時に渡されたdot1とdot2を線で結ぶように毎フレームごとtransformを変化させます。

LineCubeのLineFSMを開いてください。

LineFSMの状態遷移図

SetDistanceAndRotation状態ではLineCubeが2つの球を繋げるようtransformを設定する。

Scaleの値

dot1とdot2の距離をGetDistanceで求め、以下のように設定する。

Scale:(太さ、太さ、2球の距離)

Positionの値

2球のPositionをVector3で取得し、Vector3 Operator(Add)、Vector3 Operator(Divide 2)で中心のPositionを算出、設定する。

Rotationの値

LookAtでdot1方向を向くように設定する。

Cubeの太さを一定周期で変化させる

Cubeの太さは点と線のスムーズな切り替わりと表示時間のバランス調整を行い、下図のようなsinカーブを1/4負方向にシフトし0以下を0とする変化としました。

太さ(tickness)を表す式は以下の通り。

tickness = sin(lifetime/FPS)*LINE_TICKNESS*2 – LINE_TICKNESS

if(tickness < 0 ) then tickness = 0

本サンプルでは太さの変化を約4秒周期に設定し、以下のパラメータを用いた。

  • lifetime:経過時間。1フレーム毎LIFETIME_STEP(=π/2)増加
  • FPS:Frame Per Second。60FPS環境を想定
  • LINE_TICKNESS:線の太さの最大値

各パラメータはお好みで調整して下さい。

これをPlaymakerで以下のように実装する。

太さが0以下の場合はSetTicknessTo0状態へ遷移し、0に設定する。

Playmakerで黒と白を一斉に切り替える

黒白を一定周期で切り替えます。

ColoSwitcherは黒と白の球が交互に膨張し、視界を覆うと黒白を逆転させます。

ColorSwitcherのFSMは以下の通り。

実行時は黒背景から始まり、白のColorSwitcherが4秒後に膨張を開始します。

Grow状態に遷移すると、ColorSwitcher_WhiteのScaleを毎フレームごと増加させ、サイズが10を超えるとEXPIREイベントを発行し、End状態へ遷移します。

End状態では、黒のColorSwitcherへ制御を渡すためSTART GROWINGイベントを発行し、

BroadcastAllですべてのPlaymakerFSMへSET BG WHITEイベントを発行し背景色の変更を通知します。

ColorSwitcher_BlackはSTART GROWINGイベントを受け取るとWait状態に遷移し、以降の処理はColorSwitcher_Whiteと同様です。

膨張しきるとEnd状態でColorSwitcher_WhiteへSTART GROWINGイベントを通知し。

BroadcastAllですべてのPlaymakerFSMへSET BG BLACKイベントを発行し背景色の変更を通知します。

背景色の変更イベントSET BG WHITE/BLACKを受け取るのはdotSphere、lineCube、BGSphereです。

それぞれにPlaymakerFSMを追加し、受信時に自身のMaterialを取得し、SetMaterialColorで色を変更しています。

dot.manの作り方

最後に、dot.manの作り方を解説します。

こちらはPlaymakerは使わず、Animationで動作をつけています。

ベースとなるRaw Mocap Data formMecanimアセットをアセットストアから入手してください。

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

DefaultAvaterモデルをHierarchyに配置し、Animationsから任意のアニメーションをD&Dで適用します。

アニメーションをループ再生にするため、AnimationControllerを編集します。

1.AnimationControllerをダブルクリックし、Animatorウィンドウを開く。

2.追加したAnimation(Idle_Naturel_1)を右クリックし、MakeTransitionを選択。

3.Transition先を同一のState(Idle_Natura_1)に設定。

実行してアニメーションがループ再生される事を確認してください。

アニメーションの設定が完了したら、DefaultAvaterの各関節の子としてdotSphereを設定していきます。

最後に、モデルのメッシュGeo_grp、LeftEye、RightEyeゲームオブジェクトを非アクティブにすれば「dot.man」の完成です。

色々なアニメーションで動かしてみてください。

STYLYにアップロードして配置する

STYLYのDownloadサイトからUnityPluginをダウンロード&インポートしてください。

※UnityPluginの初期設定はダウンロードサイト参照。

DOWNLOAD

 

dot.line-Base(Upload to STYLY)プレファブを右クリック→STYLY→Upload prefab or scene to STYLY

を選択。しばらくすると、Upload Successポップアップが表示されます。

ブラウザでSTYLYエディタを開き、アセット選択で

3D Model > My Modelsタブを開くと、アップロードしたアセットが表示されます。

クリックしてシーンに配置してください。

同様の手順でdot.manもPrefab化してアップロードしてください。

おわりに

dot.line-の解説は以上です。

STYLYでPlaymakerを使えば、様々な処理を実現できるので表現の幅が広がります。

dot.line-の空間はこちらのURLから、STYLYで見る事が出来ます。

http://gallery.styly.cc/afjk/515f798a-7126-11e8-b34d-4783bb2170d0

Youtube360°動画でも公開していますので見てみてください。

※サンプルプロジェクトはこちらから:https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/dotline

Leave a Reply

Your email address will not be published. Required fields are marked *

afjk

いつも何か作っています。 Twitter:@afjk01

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLY is a cloud-based service for creating high quality,beautiful VR spaces that doesn’t require any coding. By using STYLY, creators can express their imaginations indefinitely and build a variety of virtual spaces. Through these spaces, we can share experiences that are unachievable in the real world.