概要
TMPro で一部の場面に使うフォントを、より太いアウトラインにする方法を模索しました。
実用性がありそうな方法には 🌟 を付けています。
そして、Unity 標準の Outline を再現する方法を実現できるコンポーネントを作りました。
模索
Unity 標準の Outline を使う
TextMeshPro は非対応です。
TextMeshPro の Material 設定にある Outline を使う
太さに限界があります。
🌟 Dilate を下げて調整する
FontSize と Character を調整し Material の Dilate を下げれば、もう少し太く見えます。
この方法も良いですが、調整の手間や文字本体が細くなるといった問題があります。
Padding を大きくする
テクスチャが肥大化してしまいます。
🌟 Padding を大きくした Dynamic Font を Addressables で利用
変化の少ない文字を長時間表示する際に適しています。
短時間の利用ではメモリ確保とフォントの書き出しによるスパイクが割に合わなそうです。
特定の文字を長時間表示する際は Static Font に特定の文字だけ登録する方が良さそうです。
🌟 Unity 標準の Outline を再現する
Unity 標準の Outline に習い複数の TMP_Text を前後上下にずらして背後に配置する手法です。
文字を短時間表示する用途に適しています。
常にオーバードローしているので、重い処理中や長時間の利用には向きません。
複数の TMPro が Mesh を生成するのは無駄なので、解決するコンポーネントを作りました。
Shader を使う
下記のシェーダでもアウトラインを太くできますが TMPro 以上に太くすると縁で途切れます。
良いシェーダがあったらコメントで教えてください。
Unity 標準の Outline を再現するコンポーネント
Unity 標準の Outline を再現する方法では、ずらす数だけ無駄な Mesh 生成が行われます。
そこで、TMPro から Mesh と Material を参照して利用するコンポーネントを作りました。
ずらす方向は個別に設定できますが、簡単に設定できるプリセットも用意しています。
不具合や改善点についてコメントをいただけると助かります。
留意点
TextMeshProUGUIのみ対応しています。
RenderMode はScreenSpace - CanvasとScreenSpace - Cameraに対応しています。
コード
詳細
| 項目 | 説明 |
|---|---|
| Width | 太さ |
| Directions | アウトラインを描画する方向 |
| Directions Preset | アウトラインを描画する方向のプリセット |
関数
| 関数名 | 説明 |
|---|---|
| UpdateRenderer | 描画を更新します TMPro の描画が変更された直後に自動で呼ばれます SetWidth() や SetDirections() でも呼ばれます（更新しない事もできます） |
| SetDirections | アウトラインを描画する方向を設定できます |