さけのさかなのブログ

同人ゲーム開発やってます。Unity使ったりする。

トップ > Unity > 【Unity】TextMeshProでルビ表示

【Unity】TextMeshProでルビ表示

Unity

やること

　TextMeshProのラベルにルビを表示する。

コード

Unity2019.1.10

github.com

使い方

インポート

  • TextMeshPro（2.0.1）をインポートする。
    • PackageManagerを使ってインポート
    • メニューのWindow->TextMeshPro->Import TMP Essential Resources
    • メニューのAssets->Create->TextMeshPro->FontAssetで日本語フォントを作成しておく（まあ動かすだけなら英字フォントでもいいんですが）
  • Unity_TSKT_UIとUnity_TSKT_Containerをインポートする
    • manifest.jsonに↓を追記すれば良い
{
  "dependencies": {
    "com.github.enue.tskt_ui": "https://github.com/enue/Unity_TSKT_UI.git",
    "com.github.enue.tskt_container": "https://github.com/enue/Unity_TSKT_Container.git",
  }
}

実行

  • 本文用の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 = StringWithRuby.Parse(message);
    ruby.Set(stringWithRuby);
    body.text = stringWithRuby.body;
}

文字送りのやり方

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

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

        yield return new WaitForSeconds(0.05f);
    }
}

開発中です

  • 既知のバグとして、FontSizeをAutoにしているとルビの位置がおかしくなります。
  • TextMeshProの機能を追いきれてないので多分ほかにもなんかある