第11回 アニメーションの基本のき！ライセンスマークを頭上で回そう
武装展開やド派手な演出もまずはここから！
さて、そろそろ皆さんちらほらとアバターの武装を展開したりCGのような驚き演出を見つけているころかもしれません。
今回はそんなかっこいい演出の要となるアニメーションの基礎について紹介していきましょう。
第11回はこんな流れで進めていきますよ
～STEP1.回転させるライセンスマークを作ろう～
まずは回転させたいものを作りましょう。
腕章やロゴマークなど既に回転させたいものが手元にある場合はSTEP2.まで進んでください。
Hierarchyで右クリック、3D ObjectからCubeを選択します。
今回はマークを薄い板に見立てて回転させるためCubeの厚さを薄くしましょう。
ScalsのZ軸の値を小さくすることで薄くできます。
次にさっき作った薄い板に割り当てるマテリアルを作りましょう。
Project内で右クリック、CreateからMaterialを選択します。
これで新規のマテリアルが作成されました。
このマテリアルに回転させたいテクスチャを指定しましょう。
今回はユニティちゃんをImportしたときにセットでついてきたライセンスマークを使用します。
シェーダーもUnlit/Transparentに変更して透過処理を有効にしておきましょう。
あとは作成したマテリアルをSceneに表示されているCubeにドラッグ＆ドロップします。
これでCubeにマテリアルが適用されました。
ちなみにこのCubeにマテリアルを適用すると後ろから見るとライセンスマークがさかさまになってしまいます。
この問題は別途シェーダーを設定することで解決するのですが今回の回転アニメーションの都合上、こちらの方がわかりやすいためこのまま進めていきます。
～STEP2.回転させるアニメーションを作ろう～
回転させるアニメーション、といってもこれまでの第5回、第6回で学んだ方法と同じです。
動かしたいもの（今回はSTEP1.で作ったCube）を選択し、WindowからAnimationウィンドウを開きます。
Createからkaitenという名前でアニメーションファイルを新規で作成しましょう。
アニメーションファイルを作ったと同時に何やらAnimatorという作った覚えのないファイルが作成されました。
Animatorはアニメーションファイルを組み合わせて再生させたり現在再生されているアニメーションを確認したりすることができます。
つまり「走る」「ジャンプする」アニメーションを組み合わせて「走った後にジャンプする」アニメーションにすることがきるわけです。
今回は基本ということで組み合わせはやりませんが覚えておくと良いでしょう。
ちなみにAnimatorの中にどんなアニメーションファイルが適用されていますかは確認したいAnimatorファイルを選択した状態でSceneウィンドウの中にあるAnimatorをクリックすることで確認できます。
作成したkaitenアニメーションファイルが適用されていることがわかりますね。
ちなみに今まで作ってきた表情やお団子を取り出すアニメーションもユニティちゃんのAnimatorから確認することができます。
さて、Animatorについてはこのくらいにして回転するアニメーションを作りましょう。
Add Propertyから角度を調整するRotationを追加します。
録画の赤丸をクリック、InspecterのRotationの値を変化させる方法でもOKです。
今回は縦軸をくるっと一回転させたいのでy軸の値を360度に変更します。
さらに1:00にあったキーフレームを3:00まで移動させます。
これで「3秒間かけて360度回転させる」アニメーションが完成しました。
この状態でも回転することは回転しますがなぜか正面の位置で少し動きが止まってしまいます。
STEP3.でこの少し止まる回転をスムーズに回るように調整しましょう。
このアニメーションの回転はunity中央の上にある再生マークから確認することができます。
～STEP3.作ったアニメーションを調整しよう～
Animationウィンドウの下側にあるCurvesをクリックしましょう。
キーフレームの表現が変化します。
時間に対して□が置かれていた状態から曲線を用いた表現に変化しましたね。
この状態では黄色の曲線がy軸の変化を表しています。
「360度回転した状態から0度に変化していく」ということが視覚的にわかりやすく表されていますね。
アニメーションを曲線表現に変えた時点で勘のいい人は気づいたかもしれませんね。
回転の始まる地点と終わる地点がゆるやかなカーブになっていることに気づいたでしょうか？
始まりと終わりが緩やかに変化するため、回転が一時停止したように見えていたんですね。
つまりこの始点、終点のゆるやかなカーブを直線にしてしまえばライセンスマークは安定して回転するわけです。
始点にあるマークを右クリックしてBoth TangentsからLiner（直線に）を選択します。
始点がカーブから直線に変化しましたね。同じように終点も直線に変更しましょう。
これでアニメーションの調整は完了です。等間隔の速度でy軸の値が変化するようになりました。
途中で一時停止するようなことはありませんね。
あとはアップロードするユニティちゃんのHierarchyの中に入れてあげるだけです。
VRchat上で確認してみましょう。
～コラム アニメーションオーバーライドと何が違うの？～
「アニメーションオーバーライドの時は色々な設定をしたのに今回はなぜそのままでも動くの？」という疑問をいただきましたので追加コラムです。
アニメーションオーバーライドはアニメーションを再生するための条件をつけるためにいくつか設定していました。
「コントローラーでピースサインの操作をしたら笑顔にする」などが条件ですね。
通常ではAnimatorに適用したアニメーションは無条件で再生されてしまいます。
この無条件に再生されてしまうところをオーバーライドでは任意のタイミングで再生されるように設定しているわけですね。
今回は無条件で常に回転していてほしいためオーバーライドの設定などはせずにそのままhierarchyに移動させています。
頭上にユニティちゃんライセンスがしっかりと回転しています！
これであなたはもう「アバターの周辺にモノを浮かせる」ことができるようになりました！
宇宙をテーマにしたアバターの周りを衛星が周回している、なんて表現ができるようになったわけですね
常に耳をピコピコ動かす、なんてことももちろん可能です。表現の幅をアニメーションで広げましょう！
1件の返信
[…] animatorがピンと来なかったらアニメーション解説回を一度読んでおきましょう。 […]