Create animation to move camera by PlayMaker in Unity

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.

Sample GIF



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

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.

The Project window(in the case with iTween included)

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:

Import iTween from Asset Store

When clicking ‘Add to My Assets’, the sign-in window for Unity is displayed. Enter your email address and password registered to sign in.

window

Select the ‘Asset Store’ tab in Unity. Check whether iTween is installed in ‘My Assets’ and then pressing the ‘Import’ button.

Asset Store

Next, select ‘PlayMaker’ > ‘Welcome Screen’ in the menu bar.

Welcome Screen

Then, click ‘Add-Ons’.

Select ‘Add-Ons’

Click the ‘Import’ button for iTween at the bottom. It brings up an alart window. Select ‘Yes’ to start importing.

Import iTween

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.

The completion image by GIF

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.

The seeting for ‘block1’

The seeting for ‘block2’

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.

The Hierarchy window

With ‘CameraController’ selected, click ‘PlayMaker’ > ‘PlayMaker Editor’ in the menu bar.

In the PlayMaker window, right-click and select ‘Add State’.

Add a new 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.

Add a variable.

Next, move to the Event tab. Enter ‘CHECK_CAMERA_NEXT’ in the ‘Add Event’ box, and hit the Enter key to add it.

Add an Event.

After creating the event, select ‘Add Transition’ > ‘CHECK_CAMERA_NEXT’.

In the same way, add ‘FINISHED’ by ‘Add Transition’.

Add a 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.

Settings for the actions of ‘Check Oculus’

It completes the settings for the ‘Check Oculus’ State.

Next, make another four States in the same way.

Create more States.

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.

The setting for ‘Check VIVE’

The setting for ‘Check GearVR’

The setting for ‘Check Daydream’

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’.

Set up the ‘Check WebEditor’ State

After completing the settings for all States, connect them by ‘→’.

Transition Layout #1

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 setting for iTween

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.

The setting for ‘Cube_target’.

Once the settings are completed, connect those five States to ‘Move State’ by arrows as shown below.

Transition Layout #2

Save and run the Scene.

The completion image by GIF

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.

Convert into a Prefab

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.

The upload finished successfully.

Open STYLY Editor in web browser. Click the ‘Assets’ icon on the top and select ‘3D Model > My Models’ to display the asset uploaded.

My Models

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.