見出し画像

【初心者向け】UnityでuGUIのボタンを使用してアニメーションを操作する。

この記事ではUIのボタンを押すことでアニメーションを動かす方法をご紹介していきます!
初心者向けということで細かく項目分けをしていますが、知りたい部分だけを見ても問題ないかと思います。


1.動かすオブジェクトを作成

アニメーションを操作する前に、まずは動かすオブジェクトがないと始まりません。ということでまずはオブジェクトを作成していきましょう!

画像1

画像4


HierarchyのSampleSceneの下の空白で「右クリック→UI→作りたいオブジェクト選択」の順番にクリックすると作成することができます。
色やサイズに関しては自由に調整してください。


2. AnimationとAnimatorの作成

アニメーションは単体で動かすのではなく、Animatorというものを使用してコントロールします。
※アニメーション単体でも動きますが、現在のunityでは非推奨です。

画像4

Assetsフォルダ内で右クリックし「Animator Controller」を選択し作成します。同じようにし、「Animation」を選択し作成。

画像5

下のようになればOK。


3.動かしたいオブジェクトにコンポーネントを追加

画像6

動かすオブジェクトの「Move_Image」に「Animator コンポーネント」を追加します。

画像6

追加したコンポーネントの「Controller」に先ほど作成した「New Animator Controller」をドラッグ&ドロップします。

これでコンポーネントの追加は完了です。


4.実際にアニメーションを作成

ようやくアニメーションの作成に入ります!
まずは「New Animator Controller」に「New Animation」を登録します。


画像12

「New Animator Controller」をダブルクリックし、表示した画面に「New Animation」をドラッグ&ドロップするとこのような画面になると思います。
これで登録完了!


次にアニメーションを記録していきます。
Assetsにある「New Animation」をダブルクリックするとAnimationウィンドウが出てきます。

画像10

赤い録画ボタンを動きを記録していきます。

画像12

今回は1秒間かけて、青色のオブジェクトを下に動かします。

これで一度Animationウィンドウにある再生ボタンを押してみてください。
下のようになれば完了です。

画像12


5.ボタンを押してアニメーションをコントロールする

「Button」に新しいコンポーネント「AnimationControll」を作成します。
作成したコンポーネントのEdit Scriptを選択しスクリプトを編集します。

画像14

これがスクリプトのコードです。

using UnityEngine;


public class AnimationControll : MonoBehaviour
{

   [SerializeField] Animator MoveObject;
   void Start()
   {
       MoveObject.speed = 0; // 最初の速度を0にすることで実行時動かない状態からスタートします
   }

   public void OnClickMove() // ボタンをクリックした時に実行するメソッド
   {
       MoveObject.speed = 1; 
       MoveObject.Play("New Animation"); //Animationの名前を変更している場合はその名前に変更
   }
}


最後にButtonコンポーネントのOnClickとAnimationControllコンポ―ネントに必要なものを登録し、実行をしてみてボタンを押してみてください。「Move_Image」が下に移動するはずです。

画像12


6.おわりに

いかがでしたか?
初心者向けということで「少ないコードで実装できるもの。」をベースに考え、記事を書いてみました。

他にも方法はたくさんあるので別の方法で実装するほうが扱いやすい場合も多々あります。いろいろ調べてみてくださいm(_ _)m

この記事が気に入ったらサポートをしてみませんか?

コメント

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。
【初心者向け】UnityでuGUIのボタンを使用してアニメーションを操作する。|ぐみまろ
word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word word

mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1
mmMwWLliI0fiflO&1