ComonyAnimatorについて

あるオブジェクトをクリックした時や、あるエリアにアバターが入った時など、特定の条件を満たした場合に、シーン内のオブジェクトを動かすアニメーションを実装したい場合に使用するコンポーネントです。

ComonyTriggerを使用することでアニメーションのギミックの機能を動作させます。

トリガーやギミック、イベントの仕組みがわからない場合はComonyTriggerのページをご覧ください。

Gimmickシーンを確認

Gimmickシーン(Assets > ComonySDK > Samples > Gimmick)の中に配置されているAnimatorという名前のオブジェクトを使ってご説明いたします。

Animatorは赤いスフィアの下に配置されている3つのキューブのいずれかをクリックすると、赤いスフィアがそれぞれ異なるアニメーションが動作するギミックです。

ComonyAnimatorの仕組み

では、どのような仕組みになっているか見てみましょう。

HierarchyでAnimatorオブジェクトの中を見てみると複数のオブジェクトが入っていますが肝心なオブジェクトは各Trigger_clickとAnimオブジェクトです。

Trigger_clickはそれぞれ、トリガーとなるComonyTriggerコンポーネントがアタッチされたキューブのオブジェクトです。

Tiggerによるギミックの発動

ComonyTriggerの説明ページで紹介したWalkと同様に、ComonyTriggerのActionKeyに設定した文字列と、ギミックのコンポーネントにあるRecvActionに設定された文字列が一致している機能が発動されます。

WalkではComonyBasicというギミックのコンポーネントが使用されていましたが、今回はオブジェクトの表示や非表示ではなくアニメーションを行いますので代わりにComonyAnimatorというギミックのコンポーネントを使用します。

ComonyAnimatorはAnimatorサンプルのオブジェクトの中にあるAnimオブジェクトにアタッチされています。

このAnimオブジェクトの実態はComonyAnimatorコンポーネントがアタッチされた赤いスフィアです。

Itemsには使用したいアニメーションの種類の数を指定してください。

このサンプルでは左のキューブをクリックした時のアニメーション(ActioKeyはanimation_1)、真ん中のキューブをクリックした時のアニメーション(ActioKeyはanimation_2)、右のキューブをクリックした時のアニメーション(ActioKeyはanimation_3)、の3種類が設定されています。

ここまではComonyTriggerのご説明した内容とほとんど同じです。

ですが、ComonyTriggerの説明で出てきたComonySwitchObjectActiveコンポーネントとは異なり、ComonyAnimatorにはRecvActionの下にEnableとDisableがありませんので、イベントを発動させた時にそれぞれどのようなアニメーションをさせるのかという指示が必要です。

その指示となる目印になるのがRecv Actionの下にあるTriggerという枠です。

Triggerという名前の通り、ActionKeyと同様にここで設定されている文字列と一致している文字列が設定されているアニメーションが動作します。

アニメーションの詳細

ではこのアニメーションの場所ですが、オブジェクトとは異なる場所に存在します。

メニューバーからWindow > Animation > Animatorと選択して下さい。

次にHierarchyからAnimオブジェクトを選択すると、以下のような画面になります。

state1は赤いスフィアが左右に動くアニメーション、state2は大きさが変わるアニメーション、state3は上下に動くアニメーションが入っています。

Any Stateは赤いスフィアが何もアニメーションしていない状態です。

Any Stateからそれぞれのstateに対して矢印が出ていますが、ComonyAnimatorのTriggerに設定した文字列と同じ文字列をこの矢印それぞれ設定することで、どのアニメーションを動作させるかを分岐させています。

state1に繋がっている矢印をクリックしてInspectorを見てみましょう。

Conditionsにtri1と記載されています。

これは赤いスフィアがAni Stateの状態の時にtri1を受け取った場合、state1のアニメーションを動作させることを意味しています。

ただ、ここで注意しなくてはいけないのが『ComonyAnimatorのTriggerに記入した文字列が自動的にこのConditionsの選択欄に出てくるわけではない』ということです。

つまり、ComonyAnimatorのTriggerに設定した文字列はあくまで『tri1という名前のTriggerを探して発動』という命令をするだけなので、実際にtri1という名前のTrigger本体を作成する必要があります。

難しくはありませんのでご安心ください。

Animatorタブの真下にあるParamatersタブをクリックして更にその下にある『＋』をクリックしてください。

4つの選択肢が出てきますがTriggerを選択しましょう。

すると名前を入力できますのでComonyAnimatorのTriggerに設定した文字列と同じ文字列の名前をつけてあげましょう(Animオブジェクトはサンプルなので最初からtri1とtri2とtri3が用意されていますが、本来はこのようにComonyAnimatorのTriggerと同名のTriggerをここで作成する必要があります)。

すると先ほど見たConditionsの一覧に作成したTriggerが追加されています。

更に理解を深めるためにstate1に繋がっている矢印に今回新しく作成したこのTestを設定してみましょう。

するとシーンを再生して一番右のキューブのオブジェクトをクリックしても赤いスフィアが動かなくなりました。

理由は簡単です。

一番右のキューブに設定しているTriggerの文字列は何になっているでしょうか？

答えは『tri1』です。

もう少し補足しますと、一番右のキューブのActionKeyはanimation_1ですが、animation_1と一致しているコンポーネント(赤いスフィアにアタッチされているComonyAnimator)には次の処理の行先としてTriggerにtri1と設定されています。

なので次に赤いスフィアのAnimatorの中でtri1が設定されている矢印を探しますが、先ほどtri1の代わりにTestを設定したので行先を見失い、何も起きません。

ですので、ComonyAnimatorのTriggerに設定されているtri1をTestという文字列に書き換えるとまた動くようになります。

ComonyAnimatorの基本的な仕組みは以上となります。

アニメーションの詳細(アドバンス)

実際にご自身で任意のオブジェクトにアニメーションを付けたい場合にはもう少し理解を深める必要があります。

ここからは少しアドバンスな内容になりますが簡単にご説明いたします。

サンプルの赤いスフィアには最初からアタッチされているのですが、実はアニメーションさせたいオブジェクトに対してComonyAnimatorだけではなくAnimatorというコンポーネントもアタッチする必要があります。

これはアタッチされているオブジェクトがアニメーションできるようにするためのUnity標準のコンポーネントです。

このAnimatorコンポーネントのControllerの欄に設定されているShereAnimationControllerというのが先ほどWindow > Animation > Animatorで開いた画面に出てきた画面に表示されていた画面そのものです。

試しにこのShereAnimationControllerをダブルクリックしてみると先ほど見た画面と同じ画面が出てくるはずです。

サンプルではShereAnimationControllerと名前がついているこのAnimationControllerは複数作ることも可能です。

例えば動かしたいオブジェクトが複数あってそれぞれ異なる条件で異なる動きをさせたい場合、別々のAnimationControllerを作成して別々に設定すれば実現可能となります。

そのような使い方もできるのでもちろん作成したAnimationControllerはデータとしてプロジェクト内に保存されていて、Projectウインドウからも確認できます(サンプルで使用しているAnimationControllerはAssets > ComonySDK > Samples > Gimmick > Animationに保管されています)。

サンプルでは左右に動くアニメーション、大きさが変わるアニメーション、上下に動くアニメーションの3種類でしたが、もちろんそれしかできないわけではなく、どのようなアニメーションをさせるかもご自身で作成して設定させることが可能です。

動きそのものを記録しているコンポーネントをAnimationといいます。

Animatorと名前が似ていますがAnimatorはAnimationをどのような条件で分岐させるかを設定するものであり、Animationはどんな動きをするかという動きそのものを記録しているアニメーションのデータであり、それぞれ異なるものです。

今回は設定方法のご説明に焦点を当てておりますのでこのAnimationの作り方の詳細は割愛させていただきますが『Unity アニメーション 作り方』などで調べていただければ様々な記事が見られると思います。

サンプルで使用しているAnimationはAnimationControllerと同じ場所に保管されていて、緑色の三角形のアイコンのものです。

説明用にAnimTestという名前のAnimationを作っておきました。

こちらをAnimator Window内にドラッグ&ドロップしてみると以下のようになります。

ご自身で作成したAnimationを用意するのが難しければサンプルで用意されている『SphereAnimation1』をドラッグ&ドロップしても問題ありません。

ではAny StateとAnimTestを矢印で繋げましょう。

Any Stateにカーソルを合わせて右クリックして『Make Transition』を選択します。

そのままカーソルをAnimTestに合わせて左クリックすると繋がります。

あとはこの新しく繋げた矢印(Transition)をクリックして先ほど説明したようにInspectorのConditionsにTriggerを設定して完了です。

なお、Transitionは新しく作成されたものなのでConditionsには何も設定されておらず『List is Empty』と記載されています。

右の方にある『＋』をクリックするとTrigger名を指定できるようになります。

あとは前半でご説明した通りとなります。