こんにちは、VRにクソハマり中のきくはなです。

つい先日、UdonSharpの勉強がてら新しくVRChatワールドを制作していました。

そこで、RPGやノベルゲームでよく見るようなテキストの表示をしてみたいと思った矢先、NukoTweenというU#用の開発パッケージが使えると知りました。
とても便利な開発ツールだと感じたので、備忘録もかねて紹介記事を書くことにします。

そもそも：Tweenとは何か

私は今回のワールド制作までTweenアニメーション系アセットに触れたことが無かったので、勉強もかねて調べてみることにしました。

トゥイーン（tween）とは、between（中間）に由来する言葉で、2つのイラストが変化しながら繋がるアニメーションのことを「トゥイーンアニメーション」といいます。
引用元：http://juen-cs.dl.juen.ac.jp/html/flash/04/01/explanation.html

一般的にはこういった意味合いがあるようです。
Unityにおいては、物体の移動や回転、Audioやマテリアルの変更など様々な対象の変化を、ある時点から別の時点までのアニメーションとして実現できる仕組みのようです。

iTween や DOTween というアセットが主流のようですね。

NukoTweenとは

NukoTweenはUdonで実装されたTweenアニメーションエンジンです。
VRChatで使用する事を目的としています。

NukoTweenはnukoraさんが開発したUdon用のTweenアニメーション系アセットです。
さっそく使ってみましょう。

文字送りアニメーションを作る

インストールをして、README のサンプルコード"TweenCube"を実行したところから始めます。
まずは、TweenCube.csをテキスト表示機能を持つスクリプトに変更します。

TweenCube.cs

using UdonSharp;
using UnityEngine;
using UnityEngine.UI; //追加
using VRC.SDKBase;
using VRC.Udon;

public class TweenCube : UdonSharpBehaviour
{
    public NukoTween.NukoTweenEngine tween;
    public Text target;

    public override void Interact()
    {
        tween.TextTo(target, "これはテストです", 1.0f, 0.0f, 0);
        //インタラクト後、すぐにテキスト表示
        tween.TextTo(target, "2個目のコメントです", 1.0f, 5.0f, 0);
        //インタラクトの5秒後にテキスト表示
    }
}

Textを扱うため、using UnityEngine.UI;を追加しましょう。
テキストの文字送りアニメーションはtween.TextTo()で可能です。
第一引数はTextオブジェクト、第二引数は表示する文字列です。
第三引数は一文字ずつ表示するスピードに関わります。大きければゆっくり表示され、0にすると一瞬で表示されます。
第四引数はテキストを表示するタイミングです。
第五引数はイージング関数です。特にこだわりが無ければEaseLinear (線形変化) の0で良いでしょう。
GameObject->UI->Textから生成したTextオブジェクトをComponentに適用するのを忘れずに。

実行してみる

変更したスクリプトを実行すると次のような動作になります。

上手く動作できたか確認してみましょう！

あとがき

今回は文字送りアニメーションの実装としてNukoTweenを使いましたが、他にも様々な機能があります。
これらの機能を上手く使って、より独創的なワールドの制作を続けていきたいと感じました！