名古屋でアプリ・VR開発を行っています
ワクワクできるゲームをガンガン開発リリース中!

uGUIのOutlineとShadowの話

こんにちは、SAT-BOXのコアラです。

uGUIにはOutlineShadowというコンポーネントがあります。

同じuGUIのTextやImageと合わせて使うんですが、どちらも名前通りの使い方ができるので、さくっと紹介したいと思います。

Outline
f:id:sat-box:20170711090830p:plain

Shadow
f:id:sat-box:20170711090833p:plain



仕組み的には、裏に同じ文章が描画されているだけです。

試しにOutlineのEffectDistanceの値を大きくしてみると・・・


f:id:sat-box:20170711091511p:plain

f:id:sat-box:20170711091559p:plain


このようになります。


Outlineは、斜め4方向に文字をずらして描画することでアウトラインをつける仕様なのですが、ここで1つ問題が生じます。

アウトラインの端をよく見てください・・・


f:id:sat-box:20170711090830p:plain


Xの端など、ところどころアウトラインが欠けているのが分かります。

これは、先ほど斜め4方向に文字を描画していると書きましたが、それが関係していて、描画していない方向(上下左右など)があるためにこういった現象が起きます。

つまり、もっと裏に描画する数を増やせばいいのですが、Outlineにはその機能はありません。

この点については、こちらの方のブログに詳しい説明と解決策が載っていますので、恥ずかしながら(?)紹介させていただきます。

freelyapps.blog.jp


結構大きな欠点なので、Outlineは使いづらいですが、面白いこともできます。

それは、OutlineにOutlineをつけたり、ShadowにShadowをつけることができる点です。

こんな風に重ねてみると・・・


f:id:sat-box:20170711094645p:plain

f:id:sat-box:20170711094652p:plain


すごくXのギザギザが気になりますが、OutlineとShadowは重ねがけができます。

これで何かできそうな予感・・・はしない。


以上、OutlineとShadowの紹介でした。