PlayMaker,

今回は、Unityでカメラが空間内を移動するアニメーションをPlayMakerを使って実装して、STYLYにアップロードする方法を紹介します。

この記事の流れを理解することができれば、以下のようなアニメーションを作ることができます。

 

見本GIF

 

準備

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から確認できます。

Projectウィンドウ(iTweenあり)

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

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

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

iTweenインポート画面

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

サインイン画面

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

Asset Store

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

Welcome Screen

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

Add-On選択画面

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

iTweenインポート画面

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

iTween

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

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

完成GIF

まずHierarchyウィンドウのCreateでCubeを2つ作成して、それぞれオブジェクト名を「block1」「block2」にしてください。

block1とblock2のInspectorビューでの設定は以下の画像のようにしてください。

block1設定

block2設定

次にHierarachyウィンドウで右クリックからCreateEmptyを選択し、オブジェクト名を「CameraController」にしてください。
このCameraControllerがカメラを動かすためのオブジェクトになります。

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

Hierarchyウィンドウ

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

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

状態遷移の追加画面

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

変数追加画面

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

イベント追加画面

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

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

遷移追加画面

次にState1を「Check Oculus」に名前を変更してください。
※この名称変更が必須である理由は後述します。

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

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

Check Oculusアクション設定画面

これでCheck Oculusステートの設定は完了です。

次に同様のステートを4つ作成します。

ステート作成画面

それぞれステート名が「Check + VRヘッドセット名」になっていますね。
これは、各ヘッドセット毎に今回のカメラを動かすアニメーションを起動する際の設定が異なるためです。

それぞれのステートを設定していきましょう。
「Check Oculus」〜「Check Daydream」までの4つは設定がほぼ一緒です。
ステート名と、Find Game Objectで指定するObject Nameのみ異なるので、以下の設定画面と上述したCheck Oculusを設定した流れを参考に、それぞれ設定してみてください。

なお、Object Nameの欄の名前は一字でも間違えると当該のヘッドセットで正常に動かなくなる可能性があるので、慎重に入力してください。

Check VIVE設定画面

Check GearVR設定画面

Check Daydream設定画面

最後にWebEditorで起動する際の設定です。

これだけ、CHECK_CAMERA_NEXTイベントがありません。
これはこれ以上設定するヘッドセットがないからです。

アクションも、今までの4つと違ってFind Game ObjectとGame Object Is Nullがなく、代わりにGet Main Cameraというアクションを追加するので注意してください。
Store Game Objectにはcameraを格納してください。

Check WebEditor設定画面

それぞれのステートの設定が完了したら、各アクションを→でつなぎましょう。

遷移画面

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

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

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

状態タブで「iTween Move to」アクションを追加します。
このiTween Move toがアニメーションをつけるためのアクションです。

iTween Move toの設定は以下のようにしてください。

iTween設定画面

ここで、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に向かって動くためです。

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

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

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

Cube_target設定画面

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

遷移画面2

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

完成GIF

2つのブロックの間を通るように動かすことができましたね。

これでPlayMakerの設定は完了です。

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

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

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

作成した”Camera Controller”オブジェクトをSTYLYにアップロードするには、Prefabにする必要があります。

block1、block2、Cube_targetをCameraControllerに格納してください。

Prefab化画面

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

Camera Controller Prefabを右クリック→STYLY→Upload prefab or scene to STYLYを選択。
しばらくすると、Upload Successポップアップが表示されます。

アップロード成功画面

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

My Models

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

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

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

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

yuriesky

yuriesky

大学3年です。普段はAdobe PremiereProとAfterEffectsを使った動画制作をやっていて、今はVRの勉強もしています。

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLYは、VR空間を駆使した新たな表現・体験を生み出せるクリエイティブプラットフォームです。 STYLYを活用することで、コンセプチュアルなショップ空間やインスタレーション、ギャラリーなど クリエイターのイマジネーションを際限なく表現した多彩な空間を構築できます。 またその空間を通じて、今までの現実では成し得なかった体験をインターネットの世界へシェアすることができます。
 

Unity

Unityで制作されたコンテンツをお持ちの方へ
Unityシーンアップロード機能を活用すれば簡単にVR化が可能に!

Click here

×