テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】uGUIのテキストがボケる問題の対策について

Unityの新しいUIシステム、通称uGUIでフォントがボケる問題についてです。

以前に UnityのuGUIのテキスト表示機能について解説してみる で解説していますが、もう少し詳しく紹介します。

目次

 uGUIでフォントがボケる問題の対策

下の画像のうち一つは意図的にボケるようにしました。多分この問題にあたっている人は上のような画像で表示されているのだと思われます。実際には下のように表示されてほしい訳です。

f:id:tsubaki_t1:20151030205449j:plain

ScreenSpaceの場合

さてuGUIのフォント解像度ですが、フォントのUnityのGame画面サイズに対する比率で変化します。
上の二種類のフォントをどうやって撮影したかと言えば、こんな感じです。*1

f:id:tsubaki_t1:20151030205247j:plain
f:id:tsubaki_t1:20151030205257j:plain

画面上のタブの大きさから、GameViewの大きさにかなり差があることがわかります。

概ね、解像度に対してピクセルが一致するようにフォントサイズを調整しているみたいです。画面解像度に対して文字が占めるサイズが大きければ大きいほど高い解像度でフォントを表現されます。

 

つまり(解像度が)小さい画面であれば小さいフォントを使用し、大きい画面であれば綺麗なフォントを使用する訳です。

f:id:tsubaki_t1:20151030210356j:plain

何でこんなことをしているのかと言えば、テクセルとメモリ周りの問題でしょう。画面解像度以上のテクスチャ解像度は無駄だからです。

上の画像はuGUIが表現するフォントよりも綺麗なフォントを目指し、以前紹介した方法でフォントの大きさを整えた物です。3DTextはフォント解像度をCharacterSizeとFontSizeで設定できるので、非常に細かく設定出来ます。但し、それが画面解像度以上の解像度にした場合、多くの解像度は無駄になってしまいまう為です。

 World Spaceの場合

と、ここまでの話はCanvasのモードがScreen Spaceの場合です。

f:id:tsubaki_t1:20151030211406j:plain

World Spaceの場合、残念ながらこの機能でフォントの大きさを解像度に合わせてちょうど良い感じに整えてくれません。

この状態でWorld Spaceに移行しuGUIのテキスト(上)を3DText(下)と並べると、結構ボケた感じに表現されてしまいます。

f:id:tsubaki_t1:20151030212740j:plain

こういったケースでボケが強く見えてしまっている場合はCanvas ScalerのDynamic Pixels Per Unitの数字を上げます。
これを使用することでCanvasがテキストに対して使用する解像度を押し上げ、フォントのボケを回避することが出来ます。

f:id:tsubaki_t1:20151030212239j:plain

f:id:tsubaki_t1:20151030212809j:plain

高すぎる解像度はパフォーマンスに悪影響が出る

なお、このフォントはCanvasがScreenSpaceの時のように「解像度に対して1:1(テクセルが1)」であればそれほど問題は無いのですが、解像度以上のフォント解像度を持っている場合は大きな無駄です。

例 えば「1024」の解像度に「2048」の画像を投入しても表現する事が出来ませんので、無駄なピクセルが幾つか出てしまいます。
これは一見「ボケのない 綺麗な画像がある」ように見えますが、実際ば「ぼかして滑らかにしている処が全部ピクセルで埋まり(特に斜めが)汚く表現」されます。

また高い解像度のフォントを多様するとフォントテクスチャが大きくなり、フォントの更新時に大きなスパイクとなります。その辺りはUnityの2DやuGUIのパフォーマンス最適化についての7つのTips にまとめてます。

f:id:tsubaki_t1:20151030213451j:plain

このため、フォントの解像度はScreenSpaceであればゲーム画面解像度、World Spaceでは「やりすぎない程度に」大きさを調整するのが良さそうです。

ちなみに先ほど気づきましたが、5.2.2でDynamic Pixels Per Unitを0にするとUnityエディタがフリーズします。バグレポートは今書く予定。

フォントのフィルターモード切替

あとはフォントテクスチャのfilterModeはPointではないので、フォントのテクスチャを取得してPointに差し替えてしまうのも手の一つかもしれません(ピクセルアート風フォントとかはこっちの方が良いかも)
フォントテクスチャはフォントの数だけ作られるので、一部に使用したい場合は専用のフォントを用意する感じで設定します。

Text text = GetComponent<Text>();
Texture tex = text.font.material.mainTexture;
tex.filterMode = FilterMode.Point;

関連

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

unitygeek.hatenablog.com

使用したアセット

https://www.assetstore.unity3d.com/#!/content/4235

*1:CanvasScalerでフォントの画面比率は同じにして撮影しています