【Unityゲーム制作Tips】Animationで2Dキャラクターをまばたきさせる

Hierarchyウインドウに配置した「キャラクターの基本の立ち絵」を選びます。
※下図では「SampleImage」を選んでいます。

Assetsフォルダ内に「Animations」などのわかりやすい名前でフォルダを新規作成し、その中に保存するとわかりやすいでしょう。
※下図では、新しいAnimation Clipを「SampleBlink」の名前で保存しています。拡張子は「.anim」。

Imagesフォルダ内に保存してある3つの画像を、Animationウインドウのタイムラインにドラッグ＆ドロップして配置します。
Animationウインドウは、ProjectタブやConsoleタブと同じようにタブになっている場合がありますが、掴んで移動することができるので、Imagesフォルダから画像をドロップしやすい位置に動かしてください。

今回は、0.08秒間隔で画像をタイムラインに置きました。画像を置くと、タイムライン上に「キーフレーム」と呼ばれる点が打たれます。

• 縦の三点リーダーをクリックすると、タイムラインの設定を「時間（秒）単位」か「フレーム単位」に変更できます。
• タイムラインの右下のバーを左右に動かすことで、タイムライン全体の表示範囲を拡大・縮小できます。

Animation Clipは自動保存されますが、念のため、ゲームを手動保存しておくと安心です。

もしくは、Hierarchyウインドウで対象のGameObject（今回は「SampleImage」）を選択した状態で、メニューから「Animation」＞「Animator」を選んでクリックします。

Animatorウインドウが開くと、既に「SampleBlink」という「State（ステート）」が作成されています。Stateとは、このAnimation Controllerと紐付いているGameObjectが、どんな状態でいるのか（どんな動きをしているのか）を管理する部品のようなものです。

Inspectorウインドウの「Motion」に、先ほど作成した「Animation Clip：SampleBlink.anim」がセットされていることを確認します。もし、セットされていない場合は、Projectウインドウからドラッグ＆ドロップしてください。

Animatorウインドウに「ステート：SampleBlink」がない場合は、下記手順で作成してください。

• Animatorウインドウ内で右クリックし、表示されたコンテキストメニューから「Create State」＞「Empty」を選んでクリックする。「New State」が作成される。
• 「New State」を選んでクリックし、Inspectorウインドウで名前を変更する。
  ※今回は「SampleBlink」に名前を変更。
• 「Motion」にAnimation Clipをドラッグ＆ドロップしてセットする。
  ※今回は「SampleBlink」をセット。

Animatorウインドウ内で右クリックし、表示されたコンテキストメニューから「Create State」＞「Empty」を選んでクリックすると「New State」が作成されます。
「New State」をクリックして選び、Inspectorウインドウで「Idle」に名前を変更します。

更に「ステート：Idle」を右クリックし、表示されたメニューから「Set as Layer Default State」を選んでクリックします。

すると「ステート：Idle」が黄色くなり、自動的に「ステート：Entry」と矢印で繋がります。こうすることで、アニメーションの開始地点を明確にでき、アニメーションの発動条件（トリガー）を設定したりできるようになります。

「ステート：Idle」を右クリックし、表示されたメニューから「Make Transition」を選んでクリックします。すると、マウスポインタに追従する白い矢印が伸びてくるので、そのまま「ステート：SampleBlink」をクリックします。これで「ステート：Idle」から「ステート：SampleBlink」へ、アニメーションの遷移が設定されました。

同様に「ステート：SampleBlink」から「ステート：Idle」も、白い矢印を繋げます。
これで「ステート：Idle」→「ステート：SampleBlink」→「ステート：Idle」というアニメーションの流れができました。

Triggerパラメータは、特定のAnimation Stateを発動させるスイッチのようなものです。このTriggerパラメータをスクリプトで制御して、アニメーションを実行させます。

Parametersタブを選択し、右の「+」をクリックして表示されるメニューから「Trigger」を選んでクリックします。

「New Trigger」が作成されるので「SampleBlinkTrigger」に名前を変更します。
右側のラジオボタンにはチェックを入れません。

「ステート：Idle」から「ステート：SampleBlink」へ繋がる矢印（Transition）をクリックして選択します（矢印が青くなります）。inspectorウインドウのConditionsプロパティにある「+」をクリックします。

プルダウンメニューから「SampleBlinkTrigger」を選んでクリックします。これで「ステート：SampleBlink」のトリガー（発動条件）として「SampleBlinkTrigger」がセットされました。

「ステート：SampleBlink」から「ステート：Idle」へ繋がる矢印（Transition）をクリックして選択します（矢印が青くなります）。アニメーションの遷移について、InspectorウインドウのSettingsセクションで設定していきます。

Assetsフォルダ内のスクリプトを保存しているフォルダ（例えば、Scriptsフォルダ）の中で右クリックし、表示されるコンテキストメニューから「Create」＞「Scripting」＞「MonoBehaviour Script」を選んでクリックします。

すると、C#スクリプトファイルが新規作成されるので、名前を付けて保存します。
※今回は「SampleBlink」としました。

「スクリプト：SampleBlink」を開いて、下記のようにコードを書きます。

1 using UnityEngine;
2
3 public class SampleBlink : MonoBehaviour
4 {
5     // キャラクターの立ち絵と接続
6     [SerializeField] GameObject SampleImage;
7
8     // SampleImageから取得したAnimatorコンポーネントを取り込む変数   
9     private Animator sampleAnimator; 
10
11    void Start()
12    {
13       // SampleImageにアタッチされているAnimatorコンポーネントを取得
14       sampleAnimator = SampleImage.GetComponent<Animator>();
15
16       // アニメーションのループを開始
17       BlinkRepeatedly(3f); // 3秒ごとに繰り返す
18    }
19
20    // アニメーションをintervalの間隔で実行する
21    void BlinkRepeatedly(float interval)
22    {
23       InvokeRepeating("PlayBlinkAnimation", 0f, interval); // 一定間隔で実行
24    }
25
26    // Triggerを発動して、アニメーションを実行
27    void PlayBlinkAnimation()
28    {
29       sampleAnimator.SetTrigger("SampleBlinkTrigger");
30    }
31 }

「メソッド：PlayBlinkAnimation」で「トリガー：SampleBlinkTrigger」を発火させています。
「SetTrigger関数」は、Animation Controller で設定したTriggerパラメータをONにします。これにより、Animatorで設定したアニメーションの遷移条件が満たされ、ステートが遷移します（＝ままばたきが再生されます）。

ただ、これだけでは、アニメーションがループしないので、もうひと手間が必要です。

そこで「メソッド：BlinkRepeatedly」で「メソッド：PlayBlinkAnimation」をループさせています。
「InvokeRepeating関数」は、特定のメソッドを一定間隔で繰り返し実行します。これにより「メソッド：PlayBlinkAnimation」をループさせることができます。

最終的に、Startメソッドに「BlinkRepeatedly(3f); 」と書くことで、SampleImageが有効になったら（表示されたら）キャラクターが3秒ごとにまばたきするという内容になっています。

作成した「スクリプト：SampleBlink.cs」を「ゲームオブジェクト：SampleImage」にアタッチします。更に、Sample Blink（Script）コンポーネントのSample Imageプロパティに「SampleImage」をセットします。

再生ボタンをクリックして、再生モードでアニメーションを確認します。