UI Toolkit で StringTable のテキスト表示が簡単に！
はじめに
こんにちは。
Unity 6 の UI Toolkit はかなり便利になりランタイム UI としても使える雰囲気になってきたように感じます。
中でも Localization の StringTable からテキストを表示するバインディング設定がとても簡単で感動したので、今回はそのあたりを書きたいと思います。
※ この記事は Unity 6 (6000.0.22f1) の内容を記載しています。
※ 現在 Unity 6 は Preview 版なので今後変更が入る可能性があります。
固定なテキストをスクリプトでセットするのが面倒
たとえばこんな感じの UI を作ったとします。ドラクエっぽい見た目のステータス画面です。
ここでは「たいりょく」や「かしこさ」などといった各ステータスの表題テキストを UI Document の Text プロパティに直接書いてしまっています。
これでは後からローカライズのときに苦労しそうですね。
これを解消する事を考える場合、今までの UIToolkit では例えば下記のようなスクリプトを使って StringTable から読み込んだテキストを Text プロパティにセットするしかなかったと思います。
// Caption ラベルに LocalizedString をセット
public void SetCaptionText( LocalizedString localizedString )
{
var label = mRootVisualElement.Q< Label >( "Caption" );
label.text = localizedString.GetLocalizedString();
}
この処理の他にも LocalizedString をテーブルから取得する処理も必要で、さらに言語が切り替わったときにももう一度この処理を行う必要があったりと 1 ラベル毎にこれらの手間がかかるのはなかなか面倒です。
でも Unity 6 からの UIToolKit ではなんとこれが自動でできてしまいます。
uGUI だと LocalizeStringEvent や GameObjectLocalizer コンポーネントを使って TextMeshPro に直接 StringTable のテキストを表示できて重宝しましたが、それと同じ事が UIToolkit でもできるようになったというわけです。便利！
StringTable にテキストを用意
まず StringTable を用意しましょう。
Unity Localization のインストール方法や各種設定方法などは割愛します。
ここでは CommonText という名前で StringTable を作成し、それぞれのステータス用の英語と日本語のテキストを並べました。
ラベルに StringTable Entry をバインディング
ではいよいよバインディングの設定をしましょう。
UI Builder でラベルを選択して Text プロパティの左にある⋮ をクリックして Add binding... を選択します。
Add Binding ウィンドウの Type をクリックして UnityEngine.Localization -> Localize String を選択します。
Localized String の Select Entry... をクリックすると StringTable の一覧が表示されます。ここで「たいりょく」テキストの Key Status_Life を選択します。
ここの表示は Localize String Event コンポーネントとよく似ていて各言語分のテキストがプレビューできるので便利です。
選択したテキストの内容が良ければそのまま Add Binding ボタンを押します。
きちんと設定できていれば Text プロパティの左に紫のデータアイコンが表示されます。
これでバインディングが完了です。すごく簡単ですね！
このあと同じように「こうげきりょく」や「すばやさ」など他のラベルも同じようにバインディングを設定しました。
Localization Scene Controls で表示をチェック
ラベルがきちんとバインディングできているかを確かめてみます。
Window -> Asset Management -> Localization Scene Controls のウィンドウを開き、Active Locale で言語を切り替えてみます。
ちゃんとテキストが切り替わっていますね！
プレイ状態にしなくても UI Builder 上でテキストの表示が確認できるので、各言語のはみ出しチェックなども簡単に行うことができそうです。
String Table であれば後からのテキスト修正もラクラク
この Localize String のバインディングのおかげで固定テキストの表示がとても楽にできそうです。この便利な機能はたとえ多言語対応が必要ないプロジェクトの場合でも利用するメリットがあると思います。
たとえばステータスの名前の「こうげきりょく」が気に入らなくなったので「こうげき」に変更したいといった場合でも、各 UI にテキストが埋め込んであるとそれらをすべて修正する必要が出てきますが、String Talbe を使っておくことでテーブルのテキストを 1 個所修正するだけで済むようになります。
また StringTable を編集した結果がリアルタイムで UI Builder の表示にも反映されるので、テキスト変更によるレイアウト崩れのチェックも同時に行う事ができます。
Template 内の項目には Binding の Override ができない
これだけ便利なバインディングですが、Template の uxml の Instance にあるプロパティにはバインディングを設定することができませんでした。
たとえば先ほどの「たいりょく」と数値部分の1行を Template として保存しその Instance をいくつか並べて「こうげき」や「ぼうぎょ」を作ったとしても、その Instance 内にある Caption ラベルの Text プロパティにはバインディングを設定する事ができませんでした。 UI Builder からも設定出来ませんが uxml を書いて試しても出来そうになかったです。
これが出来るとかなり強力なんですけどね。ロードマップなどに載っているかは見つけられませんでしたが、将来対応される事に期待したいところです。
おわりに
今回は UI Toolkit のラベルに Localization の String Table をバインディングする方法をご紹介しました。 Localization の Binding Type には Localized String の他にも Localized Font や Localized Texture, Localized Sprite などといった項目もあるので Asset Table と組み合わせていろいろなものをバインディングできそうです。
これらの機能を利用して UI への固定的なスクリプト処理をどんどん減らしていけたら良いなと思います。
Discussion