====== VCIでアニメーションを再生する ======

**アニメーション（Animation）**を組み込むことで、動きのあるVCIを作成できます。\\
[[https://developer.virtualcast.jp/vci-docs/api/classes/ExportAnimation/PlayFromName.html|PlayFromName]]を使用します。\\
Unityでの操作や、アニメーションとスクリプトの作成について詳しく説明します。

他のサンプル：[[vci/sample/ongrab/no1]]

==== 必要なもの ====

{{ :vci:sample:animation:animation_image01.png?640&direct }}

UnityのHierarchyビューで、次のようなオブジェクトの並びになります。
<WRAP center round box 95%>
**①VCI Object(root)**\\
⇒VCIの情報を記入します。
</WRAP>
<WRAP center round box 95%>
**②SubItem**\\
⇒個別にVCIのオブジェクトとしての機能を付けます。\\
今回はAmimationを追加して、③に動かしたい3Dモデルを配置します。
</WRAP>
<WRAP center round box 95%>
**③動かしたいGameObject**\\
3Dモデルを配置します。
</WRAP>

==== 手順 ====
<WRAP center round box 95%>
<WRAP group>
<WRAP half column>
**1. VCI Objectの作成**

空のGameObjectを作成します。

作成したGameObjectを分かりやすい名前に変更して、[AddComponent]から[VCI Object]を追加します。\\
ここでは**AnimationVci**とします。
</WRAP>
<WRAP half column>
{{:vci:sample:animation:animation_image02.png?400&direct}}
</WRAP>
</WRAP>

</WRAP>

<WRAP center round box 95%>
<WRAP group>
<WRAP half column>
**2. SubItemを作成**

空のGameObjectを作成します。

作成したGameObjectを分かりやすい名前に変更して、[AddComponent]から[Animation]を追加します。\\
ここでは**AnimationObjects**とします。

また、[AddComponent]から[SubItem]を追加し、[Rigidbody]のUseGravityのチェックを外し、IsKinematicにチェックを入れます。

<wrap round important>この時、VCI Objectの子になるように配置してください。</wrap>

</WRAP>

<WRAP half column>
{{:vci:sample:animation:animation_image03.png?400&direct|}}
</WRAP>
</WRAP>
</WRAP>
<WRAP center round box 95%>
<WRAP group>
<WRAP half column>
**3. 動かしたいGameObjectを作成**

空のGameObjectを作成します。\\
ここでは**Cube**を使用しています。

<wrap round important>この時、手順2で作成したGameObjectの子になるように配置してください。</wrap>

</WRAP>
<WRAP half column>
{{:vci:sample:animation:animation_image12.png?400&direct|}}
</WRAP>
</WRAP>
</WRAP>

<WRAP center round box 95%>
<WRAP group>
<WRAP half column>
**4. Animationウィンドウを開く**

<wrap em>手順2で作成したGameObjectを選択した状態で</wrap>、メニューから[ Window > Animation > Animation ]を選択して、Animationウィンドウを開きます。

<wrap round info>ショートカットキー[ Ctrl + 6 ]でもAnimationウィンドウを開くことが出来ます。</wrap>

</WRAP>

<WRAP half column>
{{:vci:sample:animation:animation_image05.png?400&direct|}}
</WRAP>
</WRAP>
</WRAP>

<WRAP center round box 95%>
<WRAP group>
<WRAP half column>
**5. アニメーションクリップを作成**

Animationウィンドウ中央の、[Create]ボタンでアニメーションクリップを作成します。

分かりやすい名前で保存してください。\\
ここでは**CubeAnimation**とします。

<wrap round important>手順2で作成したGameObjectが選択されているか確認してください。</wrap>

<wrap round important>GameObjectを選択していない場合、[Create]ボタンを押せません。</wrap>
</WRAP>
<WRAP half column>
{{:vci:sample:animation:animation_image06.png?400&direct|}}
</WRAP>
</WRAP>
</WRAP>

<WRAP center round box 95%>
<WRAP group>
<WRAP half column>
**6. keyframe recording modeをOnにする**

Animationウィンドウの左上の◎ボタンをおして、keyframe recording modeをOnにします。

<wrap round info>
keyframe recording modeをOnにすると簡単なアニメーションが手軽に作成できます。\\
詳しく使い方を知りたい場合は[[https://docs.unity3d.com/ja/2018.4/Manual/animeditor-AnimatingAGameObject.html|こちら]]を参照してください。
</wrap>


</WRAP>
<WRAP half column>
{{:vci:sample:animation:animation_image09.png?400&direct|}}
</WRAP>
</WRAP>
</WRAP>

<WRAP center round box 95%>

**7. 上昇するキーフレームを作成**

①フレームを30に指定。今回は１秒間に１回上下するアニメーションを作成したいので、30で上昇、60で元に戻るように設定します。

②Cubeの[Transform]の[Position]のYを2に変更します。


{{ :vci:sample:animation:animation_image10.png?direct |}}

</WRAP>

<WRAP center round box 95%>

**8. 元の位置に戻るキーフレームを作成**

①フレームを60に指定。

②Cubeの[Transform]の[Position]のYを0に変更します。

<wrap round info>
Animationウィンドウを選択した状態でspaceを押すと、現時点でのアニメーションの動きの確認が出来ます。
</wrap>

{{ :vci:sample:animation:animation_image11.png?direct |}}

</WRAP>

<WRAP center round box 95%>

**9. 元に戻るキーフレームを作成**

①フレームを60に指定。

②Cubeの[Transform]の[Position]のYを0に変更します。

<wrap round info>
Animationウィンドウを選択した状態でspaceを押すと、現時点でのアニメーションの動きの確認が出来ます。
</wrap>


{{ :vci:sample:animation:animation_image11.png?direct |}}

</WRAP>


===== スクリプト =====
**VCI Object**のコンポーネントから、[[vci/script/tutorial| スクリプト]]を入力します。\\
作成したアニメーション名を指定して、アニメーションを再生することができます。\\
VCIを取り出すと、自動的にアニメーションが再生されます。

<file lua main.lua>
local Anime = vci.assets.GetTransform("AnimationObjects")
local SubitemAnime = Anime.GetAnimation()
SubitemAnime.PlayFromName("CubeAnimation", true)
</file>