Cocos Creator 3 カンタン2Dゲーム制作(4)【アニメーションクリップの使い方】

# ページ一覧

__Cocos Creator 3 導入編__
- [Cocos Creator 3 ダウンロード](https://qiita.com/Hiro256/items/941b196f2e3f0db9e7da)
- [Cocos Creator 3 インストール](https://qiita.com/Hiro256/items/056e922af7821e482e88)

__Cocos Creator 3 カンタン2Dゲーム制作__
- [プロジェクト作成と画面の説明](https://qiita.com/Hiro256/items/ee21f1aa5dc452f8e992)
- [(1)【トゥイーンの使い方】](https://qiita.com/Hiro256/items/872f82fe7c875106faaf)
- [(2)【プレハブの使い方】](https://qiita.com/Hiro256/items/26c4da8b46565e319471)
- [(3)【衝突判定（コライダの使い方）】](https://qiita.com/Hiro256/items/153777d22a3e24e4bb5a)
- (4)【アニメーションクリップの使い方】 ← __本記事__
- [(5)【パーティクルの使い方】](https://qiita.com/Hiro256/items/4b91f426d88cfd9e2e82)
- [(6)【ラベルアトラスの使い方】](https://qiita.com/Hiro256/items/a0716a722a709414afe6)

# アニメーションクリップの作成
ここでは次の効果を追加します。
- 手裏剣が回転しながら降ってくる
- 手裏剣に当たりダメージを受けると、一瞬黒っぽくなる。

# 手裏剣の回転アニメーション
アセットパネルから、`Assets`右クリック→`Create`→`Animation Clip`で新しいスクリプトを作成します。名前を`Scroll`とします。
`Anime`というフォルダを作成し、その中に入れます。

`Prefab`の中の`Syuriken`をダブルクリックします。
アニメーションパネルを選びます。`Add Animation Clip`ボタンをクリックします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/82e8ac6c-7c55-0983-b913-d273dba46657.png">

インスペクターパネルに`Animation`コンポーネントが追加されます。
アニメーションパネルの`Select animation clip`をクリックします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/5160dd7e-6bb2-6dca-f288-2fc14026b38f.png">

別の小窓が出るので先ほど作成した`Scroll`を選択する。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/bb412c25-9a15-6af1-7271-3e4293f7ba4f.png">

インスペクターパネルに選択したアニメーションがセットされます。
`Play On Load`チェックボックスをONにします。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/e0efe237-e221-f880-b63c-c7f6206635a5.png">

アニメーションパネルが編集モードに切り替わります。
図に示す「＋」ボタンをクリックし、`rotation(eulerAngles)`を選択します。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/889271e3-edb0-0811-3362-e9d15cbd1ad6.png">

新たに`rotation(eulerAngles)`のトラックが追加されます。
赤い縦線（タイムコントロールライン）が`0`にあることを確認し、図に示す◇マークをクリックします。タイムラインキーフレームが追加され◆マークが表示されます。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/1dd2fd4e-25b1-7cad-43fa-a8e49086ddbf.png">

:::note
タイムラインは「`ctrl`＋マウスホイール」でスケールの変更、「マウス右クリック＋マウス移動」で表示範囲の変更ができます。
:::

タイムコントロールラインの上部のスライダを使って、1.8s付近にタイムコントロールラインを移動します。先ほどと同様に◇マークをクリックし、キーフレームを追加します。
図に示す`Z`の値を`360`にします。
これらの編集により、1つ目のキーフレームで0度から始まり、1.8秒かけて360度回転する、というアニメーションができました。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/e9afd07a-9c99-0162-fa4e-cea7c7800599.png">

:::note
キーフレームにセットする値を変更する場合は、◆マークをダブルクリックして、タイムコントロールラインと◆が重なっていることを確認してから値を入力してください。
:::

`WrapMode`を`Loop`にします。
パネル上部の▶ボタンをクリックすると、シーンパネル内でアニメーションの動きが確認できます。（■ボタンで停止します。）

図に示す、保存ボタン（`Ctrl+S`）クリックで保存します。
編集モードを終了（`ctrl+E`）します。

アニメーションパネルの編集モードが終了したら、`Ctrl+S`を押し、プレハブ`Syuriken`に対する変更を保存します。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/7f66e00c-f34d-1802-3a80-1d7e13f0b3fc.png">

:::note
アニメーションクリップを再編集する場合は、必ずヒエラルキーパネルでノードを選択します。アセットパネルでクリップのファイルを選択しても編集モードになりません。
:::

# 魚のダメージアニメーション

先ほどと同じ手順で、今度は`Damage`という名前でアニメーションクリップを作り、`Fish`ノードに対して`Damage`のアニメーションコンポーネントを追加します。
なお、今回は`Play On Load`チェックボックスはOFFのままです。

アニメーションパネルを編集モードにし、「＋」ボタンから`cc.Sprite`→`Color`を選択します。
<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/161b8ce7-02a0-06e5-ccb3-298a1a0402df.png">

`0s`と`0.17s`付近にキーフレームを追加します。
__1つ目の__ キーフレームの◆マークをダブルクリックします。
タイムコントロールラインが1つ目の◆マークに重なっていることを確認し、図に示す白い部分をクリックします。
別窓でカラーピッカーが表示されるので、`RGBA`の値を画面の通りに入力します。
再生ボタンで動きを確認します。
保存し、編集モードを終了します。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/ab76b3eb-75a5-71c9-92a0-e2d11d757986.png">

## スクリプト(FishCollision.ts)の変更

アセットパネルから`Script`→`FishCollision`をダブルクリックし、VSCodeを立ち上げます。
`onBeginContact`メソッド内の次に示す部分を書き換えます。（コメント行「ダメージアニメーション」の次の2行を追加する。）

```ts:FishCollision.ts(一部)
case CG.obstacle:
    // 障害物にヒットした場合
    this._score -= 100;
    // ダメージアニメーション
    const anime = this.node.getComponent(Animation);
    anime.crossFade('Damage', 0.2);
    break;
```

### クラス名の補完機能
書き換えた直後では`Animation`に赤線が出ると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/2a7f437f-e9fb-c0d8-3749-ce75545cf271.png)
このような場合は`Animation`の末尾1文字を`BS`で削除し、再度`n`を入力すると候補のクラス名等が列挙されます。
矢印キーで __オレンジ色のアイコンの`Animation`__ を選択し、`Tab`キーを押すと、自動でクラスが取り込まれ、赤線が出なくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271948/c5c68b89-b973-4ec5-f6ea-ceefaf701d9d.png)

ファイルの1行目を見ると、`import`で、`Animation`が追加されていることが確認できます。
```ts:
import { _decorator, /* 省略 */, Animation,  } from 'cc';
```

## アニメーションの確認
CocosCreatorに戻り、デバグボタン(`Ctrl+P`)をクリックします。
手裏剣の動きと、ダメージを受けた時の動きを確認しましょう。