さけのさかなのブログ

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

【Unity】テキストにルビを表示する

追記

コードが更新されたので新しい記事。 toriden.hatenablog.com

やること

 UnityのUI.Textにルビを表示する。

コード

Unity 2019.1

github.com

使い方

 リポジトリはUnity packageとして使えるのでmanifest.jsonに追記することでインポートできる。README.MD参照。まあ大したコードじゃないのでコピペでもいいんじゃないかな。

 インポートしたら

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

[SerializeField]
Text body;

void Start()
{
    var message = "{<color=red>上等</color>だ:ハイ・クラス}!! ";
    var stringWithRuby = StringWithRuby.Parse(message);
    rubyText.Set(stringWithRuby);
    body.text = stringWithRuby.TaggedBody;
}

 リッチテキストは使えません。 更新。本文のリッチテキストに対応しました。

仕組み

 ルビ表示にはBaseMeshEffectを使っている。描画はいつものTextコンポーネントなんだけど、各文字を良い感じの位置に移動させてやればルビっぽく見えるという寸法。

参考

leedcafe.com