This time, I explain how to create an animation to move camera in VR space by PlayMaker in Unity, and upload it to STYLY.
By understanding the workflow explained in this article, you will be able to create an animation like the shown below.
You can taste ‘REM’, an advanced camera-view navigation in VR space at STYLY GALLERY.
Import PlayMaker(A paid software).
As of when this article is written：Playmaker 1.9.0 https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-36
After importing PlayMaker, create a new Unity project and install PlayMaker.
Note that PlayMaker 1.9 or later doesn’t include an asset called iTween, which I use this time. So you need to import it manually.
The version earlier than 1.9 included iTween in the default installation so skip the next section, ‘Import iTween (for PlayMaker 1.9 or later)’.
You can check if there is iTween under the Assets folder in the Project window.
If you cannot find iTween under ‘Assets’, please import it as instructed in the next section.
Import iTween (for PlayMaker 1.9 or later)
Firstly import iTween from Asset Store: https://assetstore.unity.com/packages/tools/animation/itween-84.
When clicking ‘Add to My Assets’, the sign-in window for Unity is displayed. Enter your email address and password registered to sign in.
Select the ‘Asset Store’ tab in Unity. Check whether iTween is installed in ‘My Assets’ and then pressing the ‘Import’ button.
Next, select ‘PlayMaker’ > ‘Welcome Screen’ in the menu bar.
Then, click ‘Add-Ons’.
Click the ‘Import’ button for iTween at the bottom. It brings up an alart window. Select ‘Yes’ to start importing.
Check the Assets tree in the Project window. You should find iTween under the PlayMaker folder.
The settings for HMDs
In this article, we create an animation of camera flying between two blocks as a simple example.
Firstly, create two Cubes in the Hierarchy window. Name the cubes ‘block1’ and ‘block2’.
In the Inspector window, set the parameters for block1 and block2 as shown below.
Next, in the Hierarchy window, right-click and select ‘CreateEmpty’. Name the object ‘CameraController’.
This ‘CameraController’ object moves the camera.
Create another object by ‘CreateEmpty’ and name it ‘Cube_target’.
In the Inspector window, leave the setting for Cube_target as is. I explain later how to set them and what is this object for.
With ‘CameraController’ selected, click ‘PlayMaker’ > ‘PlayMaker Editor’ in the menu bar.
In the PlayMaker window, right-click and select ‘Add State’.
In the ‘Variables’ tab, add a variable.
Enter ‘camera’ in the ‘New Variable’ box and set ‘Variable Type’ to ‘Game Object’. Then, click the ‘Add’ button.
Next, move to the Event tab. Enter ‘CHECK_CAMERA_NEXT’ in the ‘Add Event’ box, and hit the Enter key to add it.
After creating the event, select ‘Add Transition’ > ‘CHECK_CAMERA_NEXT’.
In the same way, add ‘FINISHED’ by ‘Add Transition’.
Rename State1 ‘Check Oculus’.
※I explain why it should be renamed later.
Next, in the State tab, add two actions, ‘Find Game Object’ and ‘Game Object Is Null’ by Action Browser.
The settings for those actions are shown below.
It completes the settings for the ‘Check Oculus’ State.
Next, make another four States in the same way.
You can see that each State name is described in the format, ‘Check + (VR HMD name)’.
This is because we need to prepare different setting for each HMD when the animation to move the camera is started.
Let’s set up each State.
‘Check Oculus’, ‘Check VIVE’, ‘Check GearVR’ and ‘Check Daydream’ State share almost same setting.
Only the State name and the ‘Object Name’ specified in ‘Find Game Object’ are to be set differently for each HMD. Please set up them by yourself, referring to the screenshot shown below and the workflow how I set up the ‘Check Oculus’ state above.
By the way, ‘Object Name’ should be set by 100%-precise spelling to work with the corresponding HMD. Please type in carefully.
Finally, I will show the setting to start the animation in WebEditor.
Only this State doesn’t have the ‘CHECK_CAMERA_NEXT’ event.
This is because there isn’t any HMD to set up any more.
For Actions, unlike other four States, there is no ‘Find Gane Object’ or ‘Game Object Is Null’. But, please note that you need to add an Action, ‘Get Main Camera’ instead.
Store ‘camera’ in ‘Store Game Object’.
After completing the settings for all States, connect them by ‘→’.
Next, we finally create the animation to move camera.
The setting to move camera
Add a new State and name it ‘Move State’.
In the States tab, add an Action, ‘iTween Move to’.
This ‘iTween Move to’ Action adds an animation.
Set the parameters for ‘iTween Move to’ as shown below.
The meaning of the main parameters are briefly explained here:
|Game Object||The GameObject to add motions to|
|Transform Position||The target position to move GameObject to.|
|Time||Time to complete the animation|
|Delay||The waiting time before starting the animation|
|Speed||Instead of setting the Time parameter, this parameter can also control the speed of GameObject. Once this parameter is set, the Time parameter is ignored.|
|Ease Type||The trajectory shape of the easing curve applied to the animation.|
|Loop Type||The type of loop applied when the animation finished.|
|Move To Path||The flag to set whether to generate a curve automatically from GameObject’s current position to the beginning of the path. It’s set to ‘True’ by default.|
|Look Ahead||It sets how much of a percentage (from 0 to 1) to look ahead on the path to influence how strictly ‘Orient To Path’ is applied and how much the object anticipate each curve.|
|Start Event||The Event to be triggered when iTween starts.|
|Finish Event||The Event to be triggered when iTween finishes.|
|Stop On Exit||The flag to set whether to stop iTween when the current State finishes.|
|Loop Dont Finish||The flag to set whether a looping iTween send the Finish Event.|
I set ‘Transform Position’ to ‘Cube target’ to move camera towards it.
Therefore, viewing from the Main Camera, ‘Cube target’ should be placed between the two blocks to make the camera flying between them.
By referring to the settings for block1 and block2 in the Inspector window, set the parameters for Cube_Target.
I set them as shown below.
Once the settings are completed, connect those five States to ‘Move State’ by arrows as shown below.
Save and run the Scene.
Now the camera going through between two blocks.
That’s all tasks you need to do in PlayMaker.
Upload to STYLY and place the asset
Download and import UnityPlugin from the STYLY’s download site.
※Please refer to the download site about the initial settings for UnityPlugin.
To upload the ‘Camera Controller’ created, you need to convert it into a Prefab.
Store block1, block2 and Cube_target in CameraController.
In the Project view, create a Prefab by selecting Create > Prefab. Drag the ‘Camera Controller’ object in the Hierarchy window onto the Prefab just created.
Right-click the ‘Camera Controller’ Prefab and select STYLY > ‘Upload prefab or scene to STYLY’.
After a while, the ‘Upload succeeded’ window pops up.
Open STYLY Editor in web browser. Click the ‘Assets’ icon on the top and select ‘3D Model > My Models’ to display the asset uploaded.
Click it to place in the Scene.
※ Be carefull. The moving camera-view could give you a ‘VR-sickness’. If you feels sick with HMD on, put it off immediately and take a rest.
Congratulations! That’s all you need to create an animation to move camera by PlayMaker and upload it to STYLY.
Once you got familiar with the workflow shown in this article, you will be able to make a camera work like ‘It’s a Small World’ by yourself. So please try creating various camera works with PlayMaker.