unity初心者がアニメーションを触ってみる話！

## :robot: はじめに :robot:

簡単なアイテムが作れるようになった初心者が、
調子に乗って動くアイテムを作ってみました:star2:

※去年に引き続き、VCIに精通されている方には未熟な記事であるかと思います。何卒ご了承ください:bow_tone1:

## 何を動かすの？
今回動かすのはこちら！竹とんぼのようなプロペラです。
誰もが知っている某国民的アニメとは関係はありません。
![プロペラ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/f2c791e9-90f0-a8ef-7b71-16b0993b242d.jpeg)
羽部分を稼働させ、空を自由に飛べるようにしたいと思います:sunny:


## どうやって動かすの？

unityのAnimationを使います。

## 動かし方

#### ①動かす対象を用意しよう！

プロペラは下記のような構成。
今回は「VCI Object」や「VCI Sub item」などの追加方法は省きますね。

■unityのHierarchy
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/f9bc363b-2ed2-aebc-64ab-14d7d05c1a8c.png)

■パーツ別
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/2ee36a44-4782-ad60-bf40-fb908ab2463f.png)

#### ②Animationをつくろう！

[VCI Sub item]としている「プロペラSUB」を選択した状態で
上のメニュー[Window]より、Animation　＞　Animation　と進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/bcb709a9-3403-746b-63f2-7e81bc8352dc.png)
Animationウィンドウが表示されるので、[Create]を押します。

保存画面が出てくるので、Assets内に[任意のフォルダ]を作成し、
その中に[任意の名前]を入れて保存してください。

下記のような画面に移行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/ba375e9c-6c90-65b0-19a6-e0af12c2528e.png)
[Add Property]を押すと、
プロペラを構成しているアイテムたちが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/c8f66da3-9c0f-f1cb-80f4-32aebff7acb7.png)
ここで、<font color='red'>何を動かしたいか</font>を選ぶのです。
今回私はプロペラの羽を動かしたいので[center]をせんたーく！

さらに項目が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/ebd894bc-88e7-1d4d-a3a9-056505f9d0cb.png)

ここでは、[Transform]を選び、<font color='red'>どのように動かしたいか</font>を選ぶのです。

※動かす内容※
Position　：　位置が移動します
Rotation　：　回転します
Scale　　 ：　大きさが変わります

プロペラの羽は[回転させたい]ので、[Rotation]の右側の[+]を押す。

<font color='blue'>----------</font>:bangbang:重要:bangbang:<font color='blue'>-------------------------------------</font>
[Rotation]を選択した際に必ず行う必要があります。
追加されたRotationの右側にある「〇」を押し、
interpolation ＞ Quaternionにチェックを入れてください。
<font color='blue'>-----------------------------------------------------------</font>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/d669826f-4224-67e7-9f39-7d7cc3e51123.png)

次に、どんだけの速さで回転させるかを決めます。

<font color='blue'>----------</font>:bangbang:超重要:bangbang:<font color='blue'>-----------------------------------</font>
右上のレコーディングボタンを必ず押してください。
<font color='blue'>-----------------------------------------------------------</font>

0秒地点では、値は（0.0.0）

結構早めに回したいので、0.1秒後には180度回るよう設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/80aebfe1-00ae-62d4-7892-5ffbe370e2d7.png)
0.1秒の下付近で右クリックし[Add Key]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/1721c62f-0cdc-2679-9665-f36da0594188.png)
点が追加されました。
[Rotation.y]に180と入力してください。

さらに、このままだと動きの強弱があるので、
点のうえで右クリックして[Both Tangents]から[Linear]を選んでください。

ある程度設定したら、再生ボタンを押し、unityの画面上で確認しましょう。

なお、複数のKeｙを追加して細かく設定してあげるとぬるぬる動いておもしろいです！

ここまでの作業で、アニメーションの設定は終了です！

[VCI Sub item]としている「プロペラSUB」に
[Animator]のコンポーネントが自動的に入ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/aeebcb02-f95d-136d-d6b3-4181e569ac06.png)


#### ③USEでON/OFF切り替えるようにしよう！

[VCI Object]の[Inspector]内に[Scripts]という項目があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/bd702692-4627-a998-9948-48f0b2b69e4b.png)

[Size]欄に「1」を入れると、[Source]欄が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/ed3716fb-2e4a-61ec-b9c1-d6776b19f4b6.png)

この[Source]欄に下記内容を入れてください。
※1行目[プロペラSUB]部分には、[VCI Sub item]の名前を入れる。
※8行目[プロペラ.]部分には、作成した[アニメーション]の名前を入れる。

```
local Anime = vci.assets.GetTransform("プロペラSUB")
local SubitemAnime = Anime.GetAnimation()
function onUse(use)
    if SubitemAnime.IsPlaying()
    then
        SubitemAnime._ALL_Stop()
    else
        SubitemAnime._ALL_PlayFromName('プロペラ.', true)
    end

end
```

入れ終わったら、VCIをエクスポートして、
シードオンラインに上げて完成です！

おつかれさまでした:clap_tone1::sparkles:

## :military_medal:さいごに:checkered_flag:

ここまでお付き合いいただきまして、ありがとうございました。

この記事がまったくわからん勢の助けに少しでもなることを祈っています。

それでは、よいバーチャルライフをお過ごしください:hamster:

![2022121711233528.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2333296/d1e75a72-dcb1-a812-6394-5cf33c2d415a.jpeg)


## 参考
■バーチャルキャスト公式Wiki » VCIでアニメーションを再生する
https://virtualcast.jp/wiki/vci/sample/animation/tutorial2