【Playmaker】AnimatorControllerのアニメーション制御で自動ドアを作成する方法

本記事では、アニメーションを制御するAnimatorControllerとPlaymakerを使用し、カメラが近づくと開く自動ドアを作成する方法を紹介します。

サンプルGIF

サンプルGIF

Playmakerを使ってアニメーションを切り替えられるようになるので、表現の幅が広がると思います!

事前準備

本記事ではPlaymakerを使用します。
UnityのプラグインであるPlayMakerをあらかじめインストールしておきましょう。

はじめてPlayMakerを使用する方は、あらかじめ以下の記事を一読することで、理解を深められます。

ドアを作成

まず空のGameObjectを作成します。

この中に左右のドアのオブジェクトを子として作成します。

Ceate Emptyを選択

Ceate Emptyを選択

3D ObjectからPlaneを選択し、床を作成します。

PlaneのPositionは画像のようにY座標を‐1にしておきましょう。

HierarchyとPlaneのPosition

HierarchyとPlaneのPosition

次にキューブを1つ生成させ、大きさを画像のように変更します。

右側のドアと分かるように「RightDoor」と名前を付けます。

RightDoorを作成

RightDoorを作成

複製して左側のドアも作り「Left Door」と名前を付けます。

これを隣り合うように並べると、ドアが準備できました。

LeftDoorを作成して並べます

LeftDoorを作成して並べます

GameObjectが画像のように親子関係になっていることを確認してください。

GameObjectの親子関係

GameObjectの親子関係

アニメーションを作成

ドアが開いたり閉じたりするアニメーションを作成します。
Unityのアニメーションについて理解したい方は先に以下の記事をご覧ください。

自動ドアに必要なアニメーションは以下の3つあります。

  • ドアが開くアニメーション
  • ドアが閉じるアニメーション
  • ドアが静止しているアニメーション

左右のドアを合わせて6つのアニメーションを順番に作っていきます。

右側のドアのアニメーション

R_Openアニメーション

右側のドアが開くアニメーションを作成します。

まずシーンビューからRight Doorを選択し、アニメーションエディタを開きます。

「create」ボタンを押し、「R_Open」という名前でアニメーションを作成します。

createボタンを押してアニメーションを作成

createボタンを押してアニメーションを作成


R_Openアニメーション

R_Openアニメーション

Positionプロパティを追加し、「Position.x」の0:00にあるキーの◇マークをクリックし0と入力します。

0:00の数値

0:00の数値

次に、1:00の「Position.x」キーをクリックして1と入力します。

1:00の数値

1:00の数値

最後にアニメーションのinspectorを開き、アニメーションがループしないようにLoop Timeのチェックを外します。

Loop Timeのチェックを外す

Loop Timeのチェックを外す

R_Closeアニメーション

右側のドアが閉じるアニメーションを作成します。

Creat New Clipから新しい「R_Close」アニメーションを追加します。

Creat New Clipからアニメーションを追加

Creat New Clipからアニメーションを追加

Positionプロパティを追加し、「Position.x」の値を入力します。

先ほどと反対の動きとなるので、0:00では1、1:00では0と入力します。

0:00の数値

0:00の数値


1:00の数値

1:00の数値

R_Open同様ループしないようにLoop Timeのチェックを外します。

R_Idleアニメーション

最初の状態、ドアが静止しているアニメーションを作成します。

Creat New Clipから「R_Idle」アニメーションを作成し、Positionプロパティを追加します。

ですが、動きを付ける必要がないので、値は初期設定の0のままにします。

0:00の数値

0:00の数値

左側のドアのアニメーション

次はシーンビューから「Left Door」を選択し、アニメーションエディタを開きます。

LeftDooのアニメーションを作成

LeftDooのアニメーションを作成

右側のドアと同様の手順で3つのアニメーションを作成します。

L_Openアニメーション

画像のようにPositionのプロパティの数値を設定します。

0:00の数値

0:00の数値


1:00の数値

1:00の数値

忘れずにアニメーションのLoop Timeのチェックを外します。

L_Closeアニメーション

画像のようにPositionのプロパティの数値を設定します。

0:00の数値

0:00の数値


1:00の数値

1:00の数値

アニメーションのLoop Timeのチェックを外します。

L_Idleアニメーション

画像のようにPositionのプロパティの数値を設定します。

0:00の数値

0:00の数値


1:00の数値

1:00の数値

アニメーターの設定

自動ドアのアニメーションが完成したので、次はAnimatorControllerを使用し、アニメーションを切り替えられるように設定します。

UnityのAnimatorControllerについて理解したい方は先に以下の記事をご覧ください。

アニメーションが切り替わるためには「トリガー」というものが必要になります。

自動ドアで考えると、ドアに「近づく」と開き、ドアから「離れる」と閉まる、ということです。

今回は「近づく」と「離れる」の2種類のトリガーがあるということを理解してください。

右側のドア

Projectビューから「Create」→「Animator Controller」と選択しAnimatorControllerファイルを作成します。

右側のドアのアニメーションの切り替えと分かるようにファイルに「Right」と名前を付けておきましょう。

アニメーターファイルを作成

アニメーターファイルを作成

AnimatorControllerファイルをダブルクリックすると、Scene画面内にAnimatorの画面が表示されます。

先ほど作ったR_Open、R_Close、R_Idleの3つのアニメーションステートを画像のように配置します。

アニメーションステートの配置図

アニメーションステートの配置図

トリガーを追加

Parameterタブの+ボタンからTriggerをクリックするとトリガーを追加できます。

追加したものに「Open Trigger」と名前を付けておきましょう。

+ボタンからTriggerをクリック

+ボタンからTriggerをクリック

同様に「Close Trigger」トリガーを追加します。

2つのトリガーを追加

2つのトリガーを追加

R_Openへの遷移設定

R_IdleからR_Openへの矢印を選択し、inspectorを表示させます。

Has Exittimeのチェックを外し、Conditonの+から「Open Trigger」を設定します。

これでOpen Triggerがトリガーするとドアが開くアニメーションが開始されるようになりました。

R_Openへの遷移設定

R_Openへの遷移設定

R_Closeへの遷移設定

R_OpenからR_Closeへの矢印を選択し、inspectorを表示させます

Has Exit timeのチェックを外し、Conditonの+から「Close Trigger」を設定します。

R_Closeへの遷移設定

R_Closeへの遷移設定

オブジェクトにアニメーターを設定

最後にRightDoorのinspectorからRightアニメーターファイルを設定します。

inspectorの設定

inspectorの設定

左側のドア

右側のドアと同様の手順でアニメーターファイルを作成し、「Left」と名前を付けましょう。

アニメーターファイルを作成

アニメーターファイルを作成

右側と同様にアニメーションステートを配置します。

トリガーを追加

「Open Trigger」と「Close Trigger」を追加します。

2つのトリガーを追加

2つのトリガーを追加

L_Openへの遷移設定

L_IdleからL_Openへの矢印を選択し、Has Exit Timeのチェックを外し、Conditonの+から「Open Trigger」を設定します。

L_Openへの遷移設定

L_Openへの遷移設定

L_Closeへの遷移設定

L_OpenからL_Closeへの矢印を選択し、Has Exit Timeのチェックを外し、Conditonの+から「Close Trigger」を設定します。

L_Closeへの遷移設定

L_Closeへの遷移設定

オブジェクトにアニメーターを設定

LeftDoorのinspectorからLeftアニメーターファイルを設定します。

inspecotの設定

inspecotの設定

Playmakerの設定

Playmakerでは自動ドアに近づいたり離れたりするとアニメーターで設定したトリガーが発動する仕組みを作っていきます。

具体的にはカメラの位置を取得し、ドアからの距離を計測し、距離によって発動するトリガーを切り替える仕組みとなります。

本記事ではアクションや変数の設定だけを紹介するので、Playmakerの基本的な仕組みを理解したい方はこちらの記事をご覧ください。

FSMの全体構造

はじめに完成図をイメージしておきましょう。

FSMの全体構造、イベント、変数の設定は以下の通りです。

FSMの全体構造

FSMの全体構造


イベントタブ

イベントタブ


使用する変数

使用する変数

 

Setステートの設定

GameObjectのPlaymakerウインドウで右クリックし、FSMを追加します。

FSMの追加

FSMの追加

ステート名をSetに変更します。

ステート名をSetに変更

ステート名をSetに変更

「Get Main Camera」アクションを追加

アクションブラウザを画像のように追加します。

追加したいアクションを検索し、選択するとステートに。

 

画像のように「maincamera」と変数を設定します。

これにより、カメラの位置を所得できます。

Setステートの設定

Setステートの設定

Idleステートの設定

右クリックをしてステートを追加し、ステート名をIdleに変更します。

「Get Distance」アクションを追加

これにより、GameObjectとmaincameraとの距離を計測し「Distance」という変数に設定されます。

「Float Compare」アクションを追加

Distanceが2より小さいときにイベントが起きるようになります。

つまりmaincameraがGameObjectに2mまで近づくとSTARTイベントに遷移します。

Idleステートの設定

Idleステートの設定

Openステートの設定

ステートを追加してステート名をOpenに変更します。

「Set Animator Trigger」アクションを2つ追加

RightDoorとLeftDoorの開くアニメーションが始まるように、先ほど設定した「Open Trigger」を発動させます。

「Get Distance」アクションの追加

再びGameObjectとmaincameraとの距離を計測し「Distance」変数に設定します。

「Float Compare」アクションの追加

maincameraがGameObjectに2mより離れた場合CLOSEイベントに遷移します。

Openステートの設定

Openステートの設定

Closeステートの設定

ステートを追加してステート名をCloseに変更します。

「Set Animator Trigger」アクションを2つ追加

RightDoorとLeftDoorの閉じるアニメーションが始まるように、先ほど設定した「Close Trigger」を発動させます。

「Get Distance」アクションを追加

GameObjectとmaincameraとの距離を計測し「Distance」変数に設定します。

「Float Compare」アクションを追加

maincameraがGameObjectに2mより離れているとSTARTイベントに遷移します

Close ステートの設定

Close ステートの設定

 

以上でカメラが近づくと開く自動ドアが完成しました!

Unityの再生ボタンを押してカメラを移動させるとドアが動きます。

完成したもの

完成したもの

STYLYにアップロードする方法

作成した自動ドアをSTYLYにアップロードする手順は、GameObjectをプレハブにする→プレハブを右クリックで「Upload prefab or scene」を選択 です。

UnityからSTYLYにプレハブをアップロードする方法は以下の記事で解説しています。

UnityからSTYLYにアップロードする方法

STYLYアカウントを作成する

アカウント作成方法

STYLYにアップロードする方法

アップロードするとこのようになります。

STYLYへアップロード

STYLYへアップロード

おわりに

本記事ではアニメーションを制御するAnimatorControllerとPlaymakerを使用して自動ドアを作成しました。

今回はカメラの移動によってトリガーを発動させましたが、Playmakerをうまく使えばいろんな表現が可能です。

ぜひ遊んでみてください!