Unity上でカメラが移動するアニメーションをPlayMakerで実装する

今回は、Unityでカメラが空間内を移動するアニメーションをPlayMakerを使って実装して、STYLYにアップロードする方法を紹介します。 この記事の流れを理解することができれば、以下のようなアニメーションを作ることができます。  

記事の終わりには、忙しい方やPlaymakerの仕組みはもう理解しているよ、といった方のためにカメラ検知のUnityパッケージを添付しております。

そちらのUnityパッケージを使えば、本記事のようにカメラを移動させたり、カメラを回転させるといった機能を簡単に作ることができます。

サンプル

STYLY GALLERYからカメラ移動の機能を発展させた「REM」をVRで体験できます。 

 

準備

Playmaker(有料)をインポートします。

記事執筆時：Playmaker 1.9.0 https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-36

Playmakerをインポートしたら、Unityの新規プロジェクトを開いて、PlayMakerをインストールしてください。

ここで注意ですが、PlayMaker1.9ver以降は今回使うiTweenというAssetが入っていないので手動でiTweenをインポートする必要があります。

1.9より前のPlayMakerを使用している方はPlayMakerインストール時にiTweenが入っているので、次の「iTweenのインポート（PlayMaker1.9以降をご利用の方向け）」は飛ばして大丈夫です。 iTweenが入ってるか否かはProjectウィンドウのAssetsから確認できます。

AssetsにiTween表示されてない場合はインポートする必要があるので、次の章を読んでインポートしてください。

iTweenのインポート（PlayMaker1.9以降をご利用の方向け）

まず、Asset Storehttps://assetstore.unity.com/packages/tools/animation/itween-84でiTweenをインポートします。

「Add to My Assets」をクリックするとUnityのアカウント情報を入力する画面が表示されるので、メールアドレスとパスワードを入力してサインインします。

UnityのAsset Storeを確認しましょう。「Asset Store」下の「My Assets」からiTweenがインストールされているのことを確認し、「インポート」をクリックします。

次にメニューバーの「PlayMaker」から「Welcome Screen」を選択します。

次に「Add-Ons」をクリックします。

一番下の「iTween Support」のインポートをクリックし、アラートが表示されるので「Yes」を選択するとインポートが開始されます。

ProjectウィンドウのAssetsを確認しましょう。PlayMakerフォルダの中にiTweenが入っていればOKです。

各種ヘッドセットに対応するための設定

今回の記事ではわかりやすく、以下のような２個のブロックの間をカメラが移動するアニメーションを作っていきます。

まずHierarchyウィンドウのCreateでCubeを２つ作成して、それぞれオブジェクト名を「block1」「block2」にしてください。 block1とblock2のInspectorビューでの設定は以下の画像のようにしてください。

次にHierarachyウィンドウで右クリックからCreateEmptyを選択し、オブジェクト名を「CameraController」にしてください。

このCameraControllerがカメラを動かすためのオブジェクトになります。

もう１つCreateEmptyで「Cube_target」を作成してください。 Cube_targetのInspectorビューの設定は、後ほど目的と一緒に説明するので、今は飛ばしてください。

CameraControllerを選択した状態でメニューバーの「PlayMaker」→「PlayMaker Editor」をクリックします。

PlayMaker内で右クリック→「状態を追加」をクリック。

変数タブで変数を追加します。

変数名を「camera」、変数の型をGame Objectにして「追加」をクリックしてください。

次にイベントタブで「CHECK_CAMERA_NEXT」を入力してEnterキーで追加してください。

イベントの作成ができたら、「遷移を追加」→CHECK_CAMERA_NEXTを選択してください。

同様に、FINISHEDも「遷移を追加」から追加してください。

次にState1を「Check VIVE」に名前を変更してください。 

次に状態タブでアクションブラウザから、「Find Game Object」と「Game Object Is Null」の２つのアクションを追加してください。

それぞれのアクションの設定は以下の画像のようにしてください。

これでCheck VIVEの設定は完了です。

Check “VIVE”とありますが、この設定でVIVEだけでなくMeta Questでも動作します。

次に、新しくステートを作成してステート名を「Check Studio」に変更し、「FINISHED」遷移を追加してください。

状態タブでアクションブラウザから「Get Main Camera」を追加してください。

Store Game Objectにはcameraを格納してください。

Check VIVEの「CHECK_CAMERA_NEXT」からCheck WebEditorに矢印で繋げます。

 

 

これで、ヘッドセットを検知しなかった場合、WebEditorに移るという設定が完了です。

次はいよいよカメラを動かすアニメーションを実装します。

カメラを動かすための設定

新しく「Move State」ステートを追加します。

状態タブで「iTween Move to」アクションを追加します。

このiTween Move toがアニメーションをつけるためのアクションです。 iTween Move toの設定は以下のようにしてください。

ここで、iTween Move toの各設定の中で特に重要な設定の意味と目的を簡潔に説明します。

Game Object	動きをつける対象のGameObject
Transform Position	GameObjectを移動させる位置
Time	アニメーションが完了するまでの時間
Delay	開始前にアニメーションが待機する時間
Speed	Timeで指定した時間の代わりに、GameObjectの速度として使用できます。速度を定義するとTime変数は無視されます
Ease Type	アニメーションに適用されるイージングカーブの軌道
Loop Type	アニメーションが完了した後に適用するループのタイプ
Move To Path	GameObjectの現在の位置からパスの先頭までカーブを自動的に生成するかどうか。デフォルトではTrueです。
Look Ahead	Orient To Pathがどの程度厳密に影響するかを示すために、パス上をどのくらいの割合（0〜1）で表示するか。
Start Event	iTweenの起動時に発生させるイベント
Finish Event	iTweenが終了したときに発生させるイベント
Stop On Exit	現在の状態が終了したら、iTweenを停止します
Loop Dont Finish	ループするiTweenが終了イベントを送信するかどうかを設定します

Transform Positionに「Cube target」を設定しているのは、カメラがCube targetに向かって動くためです。

なのでカメラを２つのブロックの間を通るように動かすには、Main Cameraから見てCube targetを２つのブロックの間に配置すればいいことになりますね。

先ほどのblock1とblockのInspectorビューでの設定を確認しながら、Cube_TargetのInspectorビューも設定しましょう。

筆者はこのように設定しました。

設定が完了したら、Checkの５つのステートを「Move State」に矢印で繋いでください。

保存して、Sceneを実行してみましょう。

２つのブロックの間を通るように動かすことができましたね。 これでPlayMakerの設定は完了です。

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

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

※UnityPluginの初期設定はダウンロードサイト参照。 作成した”Camera Controller”オブジェクトをSTYLYにアップロードするには、Prefabにする必要があります。 block1、block2、Cube_targetをCameraControllerに格納してください。

ProjectビューのCreate→PrefabでPrefabを作成し、そこにHierarchyウィンドウのCamera Controllerオブジェクトをドラッグ&ドロップで挿入してください。

Camera Controller Prefabを右クリック→STYLY→Upload prefab or scene to STYLYを選択。

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

ブラウザでSTYLYエディタを開き、アセット選択で 3D Model > My Modelsタブを開くと、アップロードしたアセットが表示されます。

クリックしてSceneに配置してください。

※　カメラ移動は気をつけないとVR酔いを起こすので、ヘッドセットを装着しているときに気分が悪くなったらすぐにヘッドセットを外して休んでください。

おつかれさまでした、以上でカメラを移動するアニメーションをPlayMakerで実装して、STYLYにアップロードする方法の紹介は終わりです。

この記事の流れを理解することができれば、イッツ・ア・スモールワールドのようなカメラワークを自分で実現できるようになるので、色々試してみてください。

 

カメラ検知のUnityパッケージ

ここまで説明したカメラを検知するという機能を、Unityパッケージで共有します。リンク先からダウンロードしてください。

https://drive.google.com/file/d/1FbmGCSooFsbrsfyedj9LZXlg0p8W4z1I/view

カメラを動かしたり回転させたり、とカメラを検知して何か機能を作りたい方向けに、使い方を解説します。

Unityを開き、メニューバーの「Assets」→「Import Package」→「Custom Package」で今ダウンロードしたUnityパッケージを洗濯してください。

Unityパッケージの中身（２項目）が表示されるので、２項目ともチェックされていることを確認してからインポートしてください。

ProjectビューにインポートされたUnityパッケージが表示されるので、「Move Template」シーンを開いてください。

「CameraCotroller」にPlayMakerがついているはずなのですが、まだUnityプロジェクトにPlaMakerをインポートしていないので、これからPlayMakerとiTweenをインポートします。

PlayMakerのインポート前は、下の画像のように「Nothing Selected」となっており、オブジェクトが選択されていない状態です。

上記の記事を参考に、PlayMakerとiTweenをインポートしてください。

インポートの手順は全く同じです。

CameraControllerにオブジェクトが選択されました。

今はカメラがまっすぐ動く機能になっていますが、「Move State」を編集すればスピードを調整したり、回転させたりといった機能に変えることが可能です。