VIDEをつかって、Unityでの会話シナリオを作る。

# VIDEとは

[VIDE (Versatile Interactive Dialogue Editor) ](https://www.assetstore.unity3d.com/en/#!/content/69932)は2016年8月に公開された、会話シナリオをノード形式（いわゆるグラフ）で編集できる**無料の**Unityアセットです。発言と選択肢の条件分岐しか入力できませんが、その分、シンプルで使いやすいのがありがたいです。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/8868c4d1-d438-039d-c039-8e9e2bb7d2e1.png)

## VIDEの使い方



## ノードグラフを作る。

VIDEを使うには、まず任意のゲームオブジェクトにVIDE_Assignコンポーネントをアタッチします。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/6b91ae84-88d9-2510-7ca3-5b6fb100f4f4.png)

Open VIDE Editorをクリックすると、VIDE Editorが出てきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/883078f0-6532-be33-4206-826e5a272bc5.png)

この画面では、Charlieという付属のダイアログが表示されます。新しく作るには、Add New dialogueボタンを押します。名前を入力すると（ここではTestUtage）、ブランクのダイアログが出てきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/fe652e88-b4b9-91aa-2c91-01557d07b73b.png)

ここからは、nodeを入力し、つなげていきます。nodeには二種類あります

* NPC dialogue node：comment(発言）を一つだけ登録できます。
* Player dialogue node：commentを複数登録し、選択肢として使うことができます。

クイズ番組でいうなら、NPCが出題者、Playerは解答者、になります。

NodeにはEnd hereというオプションがあり、それがTrueの時は、そこが最後になります。Falseの時にはそれに続くNodeを付けられます。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/e10f196b-d6de-09b5-2fdb-b2cb4cc95fa5.png)

上図の「○」ボタンで線を引いて、他のノードにつなげます。こんな感じでつなげてみました。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/f80bab11-6a76-5daa-87bd-dbbeff31c4e6.png)

作業が終わったらセーブします。データは\Assets\VIDE\Resources\DialoguesフォルダにJSON形式で保存されます。

## スクリプトからノードグラフを読みだす

VIDEのノードグラフの状態は、VIDE_Dataコンポーネントから取得します。適当なゲームオブジェクトにVIDE_Dataをアタッチして、AssignedにVIDE_Assignコンポーネントを入力してください。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/cb284a63-c770-b7c1-cb02-db934263f38c.png)

次に、ゲーム用のGUIを準備します。ここでは、VIDEのサンプルスクリプトを改造したものを使います。

```csharp:VideLegacyGUITest

using UnityEngine;

public class VideLegacyGUITest : MonoBehaviour
{

    public VIDE_Data _VIDE_Data;
    public VIDE_Assign _VIDE_Assign;

    void Start()
    {
        _VIDE_Data.BeginDialogue(_VIDE_Assign); // [1]　シナリオ開始
    }

    void OnGUI()
    {
        var data = _VIDE_Data.nodeData;

        if (!_VIDE_Data.isLoaded) return;

        if (data.currentIsPlayer) // プレイヤーノードの場合
        {
            for (int i = 0; i < data.playerComments.Length; i++)
            {
                if (GUILayout.Button(data.playerComments[i]))
                {
                    data.selectedOption = i; //[3]　選択肢の情報
                    _VIDE_Data.Next(); //[4]　次のノードへ　
                }
            }
        }
        else {  // NPCノードの場合
            GUILayout.Label(data.npcComment[data.npcCommentIndex]);

            if (GUILayout.Button("次へ"))
            {
                _VIDE_Data.Next(); //[2]　次のノードへ
            }

            if (data.isEnd)
            {
                _VIDE_Data.EndDialogue();
            }
        }
    }
}

```

実行するとこんな感じです。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/27d4b3e9-57d2-f5b7-db5f-b480979dba8a.png)

エディタ上でVIDE_Data, VIDE_Assignシナリオは、VIDE_DataのBeginDialogue(VIDE_Assign)メソッドで開始します（コード内[1]）。NPC dialogue nodeの場合は選択肢がないので、「次へ」ボタンを押したらVIDE_DataのNext()メソッドで次のノードに進みます（コード内[2]）。Player dialogue nodeの場合は選択肢があるので、押されたボタンに応じてVIDE_Data.nodeData.selectedOptionにインデックスを渡してから（コード内[3]）VIDE_DataのNext()メソッドで次のノードに進みます（コード内[4]）。

## TagとExtra Data

上では触れませんでしたが、NPC dialogue nodeにはTagとExtra dataを入力できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/58503/18d19e84-9585-f0ca-2b18-52c1cfca251b.png)

これらは、VIDE_Data.nodeData、VIDE_Data.nodeData.extraDataからアクセスできます。Tagは、どのNPCの発言かを示すのに、Extra DataはNPCの発話中の行動（アイテムを渡すなど）を指定するのに使えます。もちろん、それ以外の使い方も可能です。

# おわりに

発表して一か月も経っていないので、いろいろ細かい改善ポイントはありますが、シンプルで使いやすいアセットだと思います。今後のアップデートに期待したいですね。