TSKT_UI

• Unity Version : 2023.2

install

R3 https://github.com/Cysharp/R3

Unity Package Manager add package from git url

• https://github.com/enue/Unity_TSKT_UI.git?path=Assets/Package

機能

Textにルビを表示する

• 本文用のTextコンポーネントを作成する。
• ルビ用のTextコンポーネントを作成し、RubyTextをアタッチする。RubyTextは↑の本文用オブジェクトを参照しておく。
• 二つのオブジェクトのrectは一致させておく。（ルビと本文は親子関係ににしとくのが自然でしょう）
• コード実行

[SerializeField]
RubyText ruby;

[SerializeField]
Text body;

void Start()
{
    var message = "{吾輩:わがはい}は猫である。<color=red>名前はまだ無い</color>。\nどこで生れたかとんと{見<color=red>当:けんとう}がつか</color>ぬ。何でも薄暗いじめじめした所で<color=red>ニャーニャー</color>泣いていた事だけは記憶している。";
    var stringWithRuby = RichTextBuilder.Parse(message).ToStringWithRuby();
    ruby.Set(stringWithRuby);
    body.text = stringWithRuby.body;
}

テキストを1文字ずつ表示する

IEnumerator Start()
{
    var message = "{吾輩:わがはい}は猫である。<color=red>名前はまだ無い</color>。\nどこで生れたかとんと{見<color=red>当:けんとう}がつか</color>ぬ。何でも薄暗いじめじめした所で<color=red>ニャーニャー</color>泣いていた事だけは記憶している。";
    var text = RichTextBuilder.Parse(message)
        .WrapWithHyphenation(body, new HyphenationJpns.Ruler());

    for (int i = 0; i < text.body.Length; ++i)
    {
        if (text.body[i] == '\n')
        {
            continue;
        }
        var sub = text.Substring(0, i).ToStringWithRuby();
        ruby.Set(sub);
        body.text = sub.body;

        yield return new WaitForSeconds(0.05f);
    }
}

テキストを1文字ずつ表示する（フェードつき）

• 本文用のTextコンポーネントを作成する。
  • 本文用のオブジェクトにFadeInQuadByQuadをアタッチする
• ルビ用のTextコンポーネントを作成する
  • ルビ用のオブジェクトにRubyTextをアタッチする。
    • RubyTextは↑の本文用オブジェクトを参照しておく。
  • ルビ用のオブジェクトにTypingEffectをアタッチする
• 二つのオブジェクトのrectは一致させておく。（ルビと本文は親子関係ににしとくのが自然でしょう）
• コード実行

[SerializeField]
RubyText ruby;

[SerializeField]
Text body;

[SerializeField]
TypingEffect rubyTypingEffect;

[SerializeField]
QuadByQuad bodyTypingEffect;

IEnumerator Start()
{
    var message = "{吾輩:わがはい}は猫である。<color=red>名前はまだ無い</color>。\nどこで生れたかとんと{見<color=red>当:けんとう}がつか</color>ぬ。何でも薄暗いじめじめした所で<color=red>ニャーニャー</color>泣いていた事だけは記憶している。";

    var stringWithRuby = RichTextBuilder.Parse(message)
        .WrapWithHyphenation(body, new HyphenationJpns.Ruler())
        .ToStringWithRuby();
    var typingEffect = new RubyTextTypingEffect(stringWithRuby, ruby, body, rubyTypingEffect, bodyTypingEffect);

    var startedTime = Time.time;
    while (true)
    {
        var elapsedTime = Time.time - startedTime;
        typingEffect.Update(elapsedTime);

        if (elapsedTime > typingEffect.duration)
        {
            break;
        }
        yield return null;
    }
}

TextMeshProにルビを表示する

• 本文用のTextMeshProもしくはTextMeshProUGUIコンポーネントを作成する。
• ルビ用のTextMeshProもしくはTextMeshProUGUIコンポーネントを作成し、TMP_RubyTextをアタッチする。TMP_RubyTextは↑の本文用オブジェクトを参照しておく。
• 二つのオブジェクトのrectは一致させておく。（ルビと本文は親子関係ににしとくのが自然でしょう）
• コード実行

[SerializeField]
TMP_RubyText ruby;

[SerializeField]
TMPro.TMP_Text body;

void Start()
{
    var message = "{吾輩:わがはい}は猫である。<color=red>名前はまだ無い</color>。\nどこで生れたかとんと{見<color=red>当:けんとう}がつか</color>ぬ。何でも薄暗いじめじめした所で<color=red>ニャーニャー</color>泣いていた事だけは記憶している。";
    var stringWithRuby = RichTextBuilder.Parse(message).ToStringWithRuby();
    ruby.Set(stringWithRuby);
    body.text = stringWithRuby.body;
}

テキストを1文字ずつ表示する

IEnumerator Start()
{
    var message = "{吾輩:わがはい}は猫である。<color=red>名前はまだ無い</color>。\nどこで生れたかとんと{見<color=red>当:けんとう}がつか</color>ぬ。何でも薄暗いじめじめした所で<color=red>ニャーニャー</color>泣いていた事だけは記憶している。";
    var text = RichTextBuilder.Parse(message);

    for (int i = 0; i < text.body.Length; ++i)
    {
        var sub = text.Substring(0, i).ToStringWithRuby();
        ruby.Set(sub);
        body.text = sub.body;

        yield return new WaitForSeconds(0.05f);
    }
}

テキストを1文字ずつ表示する（フェードつき）

• 本文用のTextMeshProもしくはTextMeshProUGUIコンポーネントを作成する。
  • 本文用のオブジェクトにTMP_FadeInQuadByQuadをアタッチする
• ルビ用のTextMeshProもしくはTextMeshProUGUIコンポーネントを作成する
  • ルビ用のオブジェクトにTMP_RubyTextをアタッチする。
    • TMP_RubyTextは↑の本文用オブジェクトを参照しておく。
  • ルビ用のオブジェクトにTMP_TypingEffectをアタッチする
• 二つのオブジェクトのrectは一致させておく。（ルビと本文は親子関係ににしとくのが自然でしょう）
• コード実行

[SerializeField]
TMP_RubyText ruby;

[SerializeField]
TMP_Text body;

[SerializeField]
TMP_TypingEffect rubyTypingEffect;

[SerializeField]
TMP_QuadByQuad bodyTypingEffect;

IEnumerator Start()
{
    var message = "{吾輩:わがはい}は猫である。<color=red>名前はまだ無い</color>。\nどこで生れたかとんと{見<color=red>当:けんとう}がつか</color>ぬ。何でも薄暗いじめじめした所で<color=red>ニャーニャー</color>泣いていた事だけは記憶している。";

    var stringWithRuby = RichTextBuilder.Parse(message).ToStringWithRuby();
    var typingEffect = new TMP_RubyTextTypingEffect(stringWithRuby, ruby, body, rubyTypingEffect, bodyTypingEffect);

    var startedTime = Time.time;
    while (true)
    {
        var elapsedTime = Time.time - startedTime;
        typingEffect.Update(elapsedTime);

        if (elapsedTime > typingEffect.duration)
        {
            break;
        }
        yield return null;
    }
}