しゅふみん日記

家庭と会社とその他もろもろ

Unityでスライドインのアニメーションを作る!(超初心者)


UnityのAnimatorについて勉強させていただけるというありがたい機会がありました!

ただ、何もかもは理解しきれなかったので教わったことを、まずは自分のレベル(超底辺レベル)で復習していこうと思います。

なので、本格的な技術記事ではありません。本当に個人レベルの内容です。

(下準備)UnityでAnimatorとAnimationウィンドウを表示する

まずwindowからAnimatorとAnimationを取り出してきます。

f:id:yuumin5220:20180131220527p:plain

 

今回は、この四角形が右側からスライドインするアニメーションを作ってみます。
Hierarchyで右クリック→UI→Imageで以下の四角形を作ります。↓

f:id:yuumin5220:20180131220855p:plain

 

1.Animator Controllerを作る

ProjectのCreate▼→Animator Controllerをクリック。以下のようなコントローラーが作られます。名前はtestと変更してみました。

f:id:yuumin5220:20180131221452p:plain

 

2.Image(四角形)にコントローラーを取り付けます。

f:id:yuumin5220:20180131224118p:plain

このほかにも

f:id:yuumin5220:20180131224252p:plain

などの方法があるみたいです。コントローラーの準備はここで完了です。

 

 3.アニメーションクリップを作る

・・・AnimatorControllerやAnimationClipなど、なんだか頭ががこんがらがってきたので、いろいろググった結果、現時点での私なりの解釈を書いて整理してみます。

(※個人のイメージです。)

f:id:yuumin5220:20180131230116p:plain

 

こんな感じでした(^-^;それでは、AnimationClipを作ります!
ProjectのAssetsウィンドウ上で右クリック→Create→Animationを選択!

f:id:yuumin5220:20180201213659p:plain

これでAnimationClipが作成できました。今回名前は「box」と付けました。

 4.AnimationClipをアニメーションステートとして配置する

アニメーションステート・・・State(状態)という意味。いまいちちゃんと理解できなかった言葉です(;´Д`)調べ方が悪かったのかな・・・。(アニメーション作成において必要な要素のこと?)と、かなりふわっとしていますがそういうイメージですすめていきます。いつかきっと理解してやる・・・。

 

以下のようにClipをAnimatorウィンドウにもっていくと、オレンジ色の「box」ステートが生成されます。

f:id:yuumin5220:20180201215208p:plain

 

5.動かすぞ

今回は、黄緑色の画像が画面の外(右側)からスライドインしてくるアニメーションをつ作ります。まずはAnimationウィンドウのPreviewの隣にいる録画ボタンを押します。

f:id:yuumin5220:20180201220654p:plain

0:00・・・などのタイムライン?が赤くなったのを確認したら、黄緑色の画像(image)を選択して、Inspectorウィンドウを見ましょう。横の移動のみなので、PosXの項目をマウスでドラッグ/数字を入力します。

 

→これで、0秒のとき黄緑の箱は画面の外にいる、という状態を録音したことになります。お次は1秒のとき箱が画面の中央にいますよー!という状態を設定します。

 

Animationウィンドウのタイムラインに居る白い線をマウスでつかんで1:00の目盛までもっていきます。

f:id:yuumin5220:20180201221734p:plain

そして、InspectprウィンドウのPosXの数字を変更します。

シーンビューを見ながら、黄緑の箱の位置を決めてあげます。

f:id:yuumin5220:20180201223304p:plain

 

変更が終わったら、Animationウィンドウの録音ボタンを再度押します。

録音終了です。この状態にしてから、シーンビューの上にある再生ボタンを押します。

f:id:yuumin5220:20180201223731p:plain
すると、箱が右からスライドインしてきました!やったー( ;∀;)うれしい。

 

 

今日はここまでにしておきます。アニメーションの部分も、まだまだできることが沢山あるようなので、これからも少しずつunityに触って挫折→理解できた時の達成感を糧に勉強していきます。