Unityでyoutubeのコメントを降らせたい！

どこぞやでみた配信のコメントをUnityに降らせるやつを自分でもやってみたかったので最近見つけたアセットを組みあわせてやってみました．

# 使用アセット
- [YoutubeComment](https://booth.pm/ja/items/1902935)(フリー)
- [Modular 3D Text](https://assetstore.unity.com/packages/3d/props/tools/modular-3d-text-in-game-3d-ui-system-159508?locale=ja-JP)(24.99$)

それぞれのアセットの詳解はせず，使う機能のみに絞って解説していきます．

# YoutubeComment
boothでありがたいことに無償販売されている便利なアセットです．
詳解は省きますが，APIKEYとライブURLを指定するだけでコメントとスパチャをその他の情報と合わせて取得してくれる優れものです．
コメントを取得したとき，スパチャを取得したときそれぞれでイベントを登録できるようになっています．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/50998a44-5a15-3212-e3fc-3c24c7d6d320.png)

# Modular 3D Text
メッシュ化されたテキストを生成することのできるアセットです．
デフォルトで50のフォントが用意されている上，エディタ上で任意のフォントからメッシュデータを作成することも可能です．また，blendファイルが同梱されており，そちらからフォント生成を行えばより高速だそうです．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/df904b90-9658-8341-9beb-b9f345116eaf.png)

# フォントの準備
今回はRictyを用意しました．
Unity上で，`Tools`->`Tiny Giand Studios` ->`Modular3DText`からmodular3D用の設定ウィンドウを開きます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/3d19fe60-9504-f0d5-9696-0e50887e0882.png)
`Font Creation`タブからフォントを作成します．
`Create Font`のすぐ下のプルダウンメニューから作成する文字範囲の指定方法を選べます．
今回は`Unicode Sequence`とし，`3040-309F`の範囲を指定します．これはunicode上で平仮名を指定するものです．漢字を含めていないのは下手に全てを指定すると生成にとんでもない時間がかかってしまうからです．実際に利用する際は適宜任意のunicode範囲を指定してください．
指定ができたら`Create Font`ボタンを押します．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/6429847a-1fca-72fe-612e-ce3846565b32.png)
エクスプローラーが開くので任意のttfファイルを指定します．
続いてobjファイルの生成先を聞かれるので，任意の場所に保存します．(プロジェクト内が好ましいです)
生成ができるとさらにassetファイルの生成先を聞かれるので他のフォントが保存されている`Assets`->`Tiny Giant Studios` -> `Modular 3D Text` -> `Fonts`に保存をします．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/ef5f2d06-6275-bf63-26e0-8392d056ccc1.png)
生成が成功すると，Fontsフォルダ内に以下の二つのアセットが生成されるはずです．
上が設定ファイルで，下にメッシュオブジェクトが格納されています．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/18750552-5dbd-5825-32dd-77499f6cca89.png)

# コメントを降らせる準備
## Modular3Dの設定
ヒエラルキーからModular3DのTextオブジェクトを作成します．
名前は適当にTextDropperなどとしておきます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/10fba15f-ef49-0c72-2553-469e0ef61719.png)
TextDropperのModular3DTextのインスペクタからいくつかセッティングをしていきます．
まずは`Main Settings`の`Font`に先ほど作成したフォントのアセットファイルを指定します．
次に，`Modules`から`Add New Module`ボタンを押し，`Add Gravity`を指定します．
さらに，`Adovanced Settings`から`Reposition old Chars`のチェックを外します．
ここまでの設定で以下の状態になっていることを確認してください．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/2901975d-1912-35a2-0847-e4804338109c.png)

作成したオブジェクトに以下のスクリプトを作成してアタッチします．

```c#
using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.CompilerServices;
using MText;
using UnityEngine;

public class Text3DDroper : MonoBehaviour
{
   [SerializeField] private int maxMessagesLength = 300;
    private string message;
    [SerializeField] private Modular3DText modular3DText = null;

    public void OnComment(List<Comment> comments)
    {
        foreach (var comment in comments)
        {
            message += comment.Message;
        }
        modular3DText.UpdateText(message);
    }

    public void Update()
    {
        if (message != null && message.Length > maxMessagesLength)
        {
            message = System.String.Empty;
        }
    }
}

```

`modular3DText`にはインスペクタから同じオブジェクトのコンポーネントである`Modular3DText`をD&Dします．
`maxMessagesLength`にはstring型のmessageが取得したコメントを合計何文字まで記憶しておくかを指定します．制限を超えた場合は初期化することで，メモリの消費を抑えます．文字を出現させる処理は`modular3DText.UpdateText(message);`の部分です．内部で差分チェックをしているようで，messageを連結して渡しても，前フレームのUpdateText()で実行された分については再度出現しないようになっているため，UpdateTextには追加された分ではなく直前までのコメント+追加のコメント分を渡します．
ここまでの作業で以下のようになっていれば大丈夫です．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/2516e2d5-a8b2-86a5-1942-da60603d97fe.png)


## YoutubeCommentの設定
ヒエラルキーから空のゲームオブジェクトを作成し，`Youtube Comment`スクリプトをアタッチします．APIKEYやVideoIDの設定の仕方は公式ドキュメントを参照してください．また，youtubeの1日のリクエスト上限はすぐに枯渇するので，反応しなくなったと思った場合にはリクエスト上限の確認をしましょう．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/588e5ca5-aea2-62e0-d646-9ced1af1733a.png)

`On Comment`に先ほど作成したTextDropperをD&Dします．
指定ができたら，`Runtime Only`となっている部分を`Editor And Runtime`に変更し，No Functionの箇所をOn Commentにします．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/b88c6443-324f-178a-5c34-d398c274a014.png)

# 準備完了！
あとは実行するだけでYoutubeLiveのコメントを拾って文字を降らせてくれます．![output-palette.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/731773bd-d3cd-f23a-6826-f3e6e4322751.gif)
有名配信者のコメントから拾ってきたので一気に沢山のコメントが降ってきましたね笑