こんにちは、 フーシャ です。
今回は主にUnity初心者向けに UIのポップアップアニメーション の作り方についてお話しします。
ゲームにおけるUIのアニメーションはゲーム全体の見た目の印象にかなり影響します。
Unity では Animator Controller, Animation Clip を用いることでエディタ上で比較的簡単にアニメーションを作成することが出来ます。
今回の作成方法はすごく簡単なものなので、初めての方でも簡単にアニメーションを作ることが出来ます。
また、UIのアニメーションの作り方を学ぶことで、 2Dゲームのアニメーションを作る参考にもなるかもしれません。
ということで、今回は Unity で UI の ポップアップアニメーション の作り方についてお話しします。
今回作るアニメーション
今回作るアニメーションは、シンプルだけどよく見る形のアニメーションです。
環境
- Unity 2022.3.5f1
手順
Prefab の準備
まずは、アニメーションさせたいPrefabの準備をします。
今回自分の方では無料のアセットを使っていきます。
同じように進める方はこちらをダウンロード＆インポートしてください。
「Assets/Puzzle stage& settings GUI Pack/DemoScenes」の「SampleScene」を開いて、「Game stage」をPrefab化します
「Game stage」プレハブを開いて、ルートオブジェクトに Canvas Group と Animator コンポーネントをAdd Componentします。
Canvas Group は UI の透明度を一括で操作するのに使い、
Animator はアニメーションの管理を行うコンポーネントです。
アニメーションの作成
上部のメニューのWindow/Animationから、Animationウィンドウを開きます。
先ほどAnimatorコンポーネントをAdd Componentしたオブジェクト(Game stageオブジェクト)を押した状態だと、上の画像のようにCreateボタンがアクティブになるので、Createボタンを押して新規Animation Clipのファイルを作成します。
名前は「Popup」にしておきます。
Animation Clipファイルを作成すると同時にAnimaton Controllerも作成され、デフォルトで「Popup」アニメーションが再生される設定になっています。
今回のアニメーションは ループ 再生はさせないので、ループしない ように
「Popup」アニメーションを押して、Loop Timeにチェックがついていたら外します。
Animationウィンドウ上部の赤丸を押して、キーフレームのレコードモードを開始します。
フレーム数が0の部分を選択して、ScaleのXとYを0.5、CanvasGroupのAlphaを0にします。
同様に
15フレームでScaleのXとYを1.1
20フレームでScaleのXとYを1、CanvasGroupのAlphaを1にします。
終わったら左上の赤丸ボタンを押して、レコードモードを終了します。
これでアニメーションの作成は完了です。
Animationビュー上部の再生ボタンで アニメーション を プレビュー を再生できます。
(フレーム数少ないのでかなり速いですが…)
コンポーネントのアタッチ
もしアタッチされてなければ、Animatorコンポーネントに先ほど自動で作成されたAnimaton Controllerをアタッチします。
これでアニメーションの作成作業は完了です。
確認
今回行った方法では、
オブジェクトがアクティブになったタイミングで自動でアニメーションが再生されるようになっているので、
Playモードにした上でオブジェクトのアクティブを切り替えれば、最終的にどんな見た目になるかが確認できます。
別オブジェクト への 使いまわし について
ルートアニメーション だけの場合
今回のアニメーションはAnimatorコンポーネントがついてるオブジェクト(ルートオブジェクト)の変更だけなので、同様のコンポーネントをAdd Componentするだけで、同じアニメーションをつけることができます。
試しにGame stageオブジェクト以外に反映してみます。
Goods_coin,Goods_jelly,Home,Post,Friends,Ranking,Settingをまとめて選択
→Canvas GroupとAnimatorコンポーネントをAdd Component
→Animatorコンポーネントに先ほど作成したAnimaton Controllerをアタッチ
Canvasごとオブジェクトを切り替えると、それぞれ同じアニメーションをしてるのが分かります。
子オブジェクトのアニメーションも含む場合
子オブジェクトのアニメーションを含む場合はオブジェクトの構造に注意が必要です。
それは
- 子オブジェクトの名前は重複してはいけない
- アニメーションを使いまわす場合、子オブジェクトの名前は同じ名前じゃないといけない
ということです。
試しにGame stage内の星にアニメーションをつけようとしてみると、
現在は「Star」「Star」「Star (1)」となっているため、名前が重複しているというエラーが出ます。
リネームして名前が被らないようにすると、エラーは解消されます。
そして先ほどCanvas_pink内のGame stageで作成したアニメーションをCanvas_red内のGame stageオブジェクトにアタッチしてみると、
今度は「Star2」「Star3」という名前のオブジェクトが無いため、Missingエラーが出ます。
ちなみに「Game stage」オブジェクトはルートオブジェクトのため、名前は変更しても問題ありません。
今回は「Game stage2」としていますが、エラーが出ていないことが分かります。
終わりに
今回初めてアニメーションを作成された方、どうでしたか？
思ったより簡単にアニメーションが作成できたんじゃないでしょうか。
突き詰めていくとまだまだ学ばなきゃいけないことは色々あると思いますが、
このくらい簡単なアニメーションがあるだけでも大分UIの見た目の印象はよくなったかと思います。
UIアニメーション未経験って方いましたら、この機会に試してみてください！
また、今回の記事でよく分からないところなどありましたらコメントなどで教えてください。
それでは最後まで読んでいただきありがとうございました！
コメント