【Unity】テキストにルビを表示する
追記
コードが更新されたので新しい記事。 toriden.hatenablog.com
やること
UnityのUI.Text
にルビを表示する。
ルビ表示テスト pic.twitter.com/IRpOPGLTnm
— enu@遊宴雀2 雀-17 (@_enu) 2019年7月10日
コード
Unity 2019.1
使い方
リポジトリは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
コンポーネントなんだけど、各文字を良い感じの位置に移動させてやればルビっぽく見えるという寸法。