ARFoundationでTimelineを使うには、、



#初心者目線！！
はじめに自己紹介。。
2020年の4月にたき工房という会社にエンジニアとして新卒入社しました。主に、touchdesignerとかunityとか使って、インタラクティブコンテンツやAR,VRなどのプロトタイプを制作しています。

こんなん作りました。
https://lab.taki.co.jp/gaikan/


今は何もわからないことだらけなので、この記事もなるべく優しく分かりやすいよう書いているつもりです。難しい部分はカット！というか別のリンク貼ります。

#ARFoundationでTimelineを使う
<b>ARFoundation</b>とは 
から入りますが
>AR Foundationとは、Unityが作っているARアプリケーション開発用のパッケージです。
ARに関する共通な基本機能をひとまとめにし、各プラットフォーム向けARアプリ開発を最小限の変更で行う ことを目的としています。

てな感じで要は、unityでARアプリやゲームを開発する際には絶対必要てことです。

そして<b>Timeline</b>ですが
こんなやつ
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Learn more about Timeline, our new powerful visual tool 4 creating cinematic content, from the <a href="https://twitter.com/hashtag/UniteEurope?src=hash&amp;ref_src=twsrc%5Etfw">#UniteEurope</a> keynote <a href="https://t.co/D0GVcTtPWB">https://t.co/D0GVcTtPWB</a> <a href="https://t.co/ORIHAv0cUf">pic.twitter.com/ORIHAv0cUf</a></p>&mdash; Unity (@unity3d) <a href="https://twitter.com/unity3d/status/880092194786430976?ref_src=twsrc%5Etfw">June 28, 2017</a></blockquote>
animationのclipをドラックアンドドロップで簡単に演出できる機能です。
adobeのpremiere proとかafter effectsに近い感じでやりやすいなと思っていたが、、、

#Timelineだけどコードは書かなければならない
コードは書かないのが取り柄なのに書かないといけないんかい
という矛盾。。。
大丈夫、概念自体は少し難しいですが、コード自体は**そこまで難しくありません**。
手順は主に4つに分かれます。

**1.ARの開発準備する
2.Timelineを作る
3.演出のコードを書く
4.コードをTimelineに実装
5.実機ビルド**

#開発環境
macOS Catalina:バージョン10.15.5
unity:2020.1.6f.1
iphone11:ios14
xcode:12
#1.ARの開発準備をする
projectを作成したら
まず、main cameraを削除し、
window → package managerを開き、ARFoundationをinstallします。
もしARFoundationが出てこない場合は、Packages:をUnity Registryにしてみてください。

ヒエラルキー上で右クリック → XR → AR Session Origin と AR Session を追加
![スクリーンショット 2020-09-23 20.01.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d9711fc1-a48a-4f43-8a73-5abc865b0574.png)

**AR Session OriginにAdd ComponentからAR Plane Manager と AR Raycast Managerを追加**
![スクリーンショット 2020-09-24 17.04.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/fbcc7d61-97ee-1d9a-4c0c-b67077649886.png)

Cubeと空のGameobjectを作成し、名前をTimelineに変更
project上で右クリック→Create→C# Script で名前を「ARtimeline」に変更
![スクリーンショット 2020-09-24 17.04.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/de21ce51-cef2-6069-223a-4a030f05b528.png)

ARtimelineスクリプトを下記に書き換え。

```C#:ARtimeline.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.XR.ARFoundation;
using UnityEngine.XR.ARSubsystems;
using UnityEngine.Playables;

namespace ARtimeline{
    public class ARtimeline : MonoBehaviour
    {
        public GameObject timelineobj;
        private ARRaycastManager raycastManager;
        private static List<ARRaycastHit> hits = new List<ARRaycastHit>();
        private bool active = false;

        public GameObject playablesobj;
        private PlayableDirector director;

        // Start is called before the first frame update
        void Start()
        {
            raycastManager = GetComponent<ARRaycastManager>();
            timelineobj.SetActive(active);

            director = playablesobj.GetComponent<PlayableDirector>();
        }

        // Update is called once per frame
        void Update()
        {
            if(Input.touchCount > 0)
            {
                Vector2 touchPosition = Input.GetTouch(0).position;
                if(raycastManager.Raycast(touchPosition, hits, TrackableType.Planes))
                {
                    var hitPose = hits[0].pose;

                    if(active)
                    {
                        timelineobj.transform.position = hitPose.position;
                        
                        director.Play();
                    }
                    else
                    {
                        active = true;
                        timelineobj.SetActive(active);
                    }
                }
            }
        }
    }

}

```

何をしているかというと、簡単には、
画面をタッチするとCubeが表示され、その位置が画面でタッチしたAR上で検出した平面ポジションに配置
その後timelineを動かす
ってな感じ。


引用
>https://qiita.com/shun-shun123/items/1aa646049474d0e244be
**スクリプトとGameobjectのアタッチお忘れなく!**
![スクリーンショット 2020-09-28 19.48.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/245df6cc-4f1b-ad10-2bdb-4fffdc83d38f.png)


#2.Timelineを作る
Timelineを選択し、window→Sequencing→Timeline でTimelineの画面を出し
Createボタンを押します。
![スクリーンショット 2020-09-24 17.53.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d71fd0ac-d803-89a9-9ee7-dd8ec057f9a6.png)

すると、Playable Directorというコンポーネントが追加されます。
**このPlay On Awakeのチェックを外します。**
![スクリーンショット 2020-09-28 16.44.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/e848362f-f942-017d-04ca-f683316c878c.png)


#3.演出のコードを書く
Timelineの演出をコードでつくるわけだが、そのスクリプトはオブジェクトにアタッチする必要がなく**project内にあれば良い。**

その必要なスクリプトは3つ。

**・1つめが「ControllTrack」**
主にTimelineのトラックを設定する。
project内にC# Scriptを作って名前を「ControllTrack」にします。
下記コードに変更

```C#:ControllTrack.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;

namespace ARtimeline{
    [TrackClipType(typeof(ControllAsset))]
    [TrackBindingType(typeof(GameObject))]
    public class ControllTrack : TrackAsset{}
}
```

ちなみに

```
[TrackBindingType(typeof(GameObject))]
```
はGameObjectだけでなく

```
[TrackBindingType(typeof(コンポーネント名))]
```
でもOK
例えば、Light入れたり、Transform入れたりなんでも

**・2つめが「ControllAsset」**
これはTimeline内で動きを格納する箱みたいなもん
コードはこちら

```C#:ControllAsset
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;

namespace ARtimeline{
    public class ControllAsset : PlayableAsset
    {
        public override Playable CreatePlayable(PlayableGraph graph, GameObject owner)
        {
            var playable = ScriptPlayable<ControllBehaviour>.Create(graph);

            var ControllBehaviour = playable.GetBehaviour();
            
            return playable;
        }
    }
}
```


**・3つめが「ControllBehaviour」**
これが実際に**動きをつけたり、いろいろいじれるスクリプト**
同じように、C# Script作って、コードは下記


```C#:ControllBehaviour
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;
using UnityEngine.Timeline;

namespace ARtimeline{
    public class ControllBehaviour : PlayableBehaviour
    {
        private GameObject timelineobj;
        
        public override void ProcessFrame(Playable playable, FrameData info, object playerData)
        {
            timelineobj = playerData as GameObject;
            timelineobj.transform.position += timelineobj.transform.forward * 0.1f * Time.deltaTime;
        }
    }
}
```
これは

```
timelineobj.transform.position += timelineobj.transform.forward * 0.1f * Time.deltaTime;
```
ここで、GameObject(ここで言うならCube)を動かしています

PlayableAPIについて詳しく知りたい方は下記から。
>https://qiita.com/hadashiA/items/566f0d0222cb9a4e209b

**このチュートリアルが一番いい**
>https://blogs.unity3d.com/jp/2018/09/05/extending-timeline-a-practical-guide/


#4.コードをTimelineに実装する
右クリック→ARtimeline→Controll Trackでトラックを作ります
![スクリーンショット 2020-09-28 12.31.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/ee927dcc-79d9-8f07-c81a-3a56338f61de.png)

トラックの右の●3つからAdd Controll Assetを選択
![スクリーンショット 2020-09-28 12.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/9f9c9d47-062c-1c9c-c2ce-720867b37235.png)

最後にCubeをトラックにアタッチします。
![cubeattach.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/abe21031-cf13-3a49-b84d-981e8aceb46a.gif)


Timelineを再生すると、Cubeが動くのが確認できます。
![cubetrans.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/5dd70bc6-cf6b-a07e-294a-5aa763be4627.gif)


#5.実機ビルド
File→Build settingから
Add Open Scenesボタンを押して、sceneを追加
![スクリーンショット 2020-09-28 17.15.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/d9f7dc7a-fb0f-b2d2-d533-abc4832a59de.png)

platformをiosに変更して、switch platform
![スクリーンショット 2020-09-28 17.16.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/17c77081-bef7-47d5-b275-e0913529f71f.png)

Player Settingsを開き、OtherSettingsの中の、Camera Usage Discription(カメラ使用しますぞのメッセージ)を入力します。
同じくOther Settingsの中の、ArchitectureをARM64にします。
同じくOther Settingsの中のTarget minimum iOS Versionを11.0にします。

これでbuildしましょう。
すると、xcodeのファイルが作られるので、これを開き、signingのteamを設定し実機ビルドしましょう
https://uni.gas.mixh.jp/unity/unity-for-ios.html

#完成
![arplane.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704869/238437b0-e718-28d4-ebf7-dd182692638e.gif)
ここに音や他のTrackを入れれば、いい感じになるのでは、、、
あとは開発者次第ですね

#Timelineは奥が深い
Timelineを使えば**お手軽**に演出を作れるが、ARのように少し込み入ったことをしようとすると、ガッツリ拡張しないといけません。
そんな迷路に入りたい方はこちら
https://www.youtube.com/watch?v=6SPpjSKy9LI