UnityのuGUIとImageとSpriteとスライスについて

uGUIのスライスは覚えておくと便利な機能です。

今回はコレを作ろうと思いましたが、スライス部分が予想以上に色々と出来たので分割します。コレの作り方は次回。

目次

スライスする方法

Spriteを選択し、SpriteEdit。エディット画面で緑色の部分を調整します。

大きさを調整する

スライスしたスプライトは外側のパーツを固定したまま、内側のパーツを引き伸ばすことが出来ます。Imageにスプライトを設定しSlicedを設定すれば、下のように引き伸ばすことが出来るようになります。

この機能の面白い所は、Tiledにした際に「項目を繰り返す」事です。例えば下のように切り抜いたスプライトがあった場合、引き伸ばすと面白い結果が得られます。

見て分かる通り、引き伸ばした際に「スプライトの途中を繰り返して伸ばす」ような挙動を行います。このため、ある程度以上の長さになった場合も少し自然にスプライトが配置できそうです。

この機能でサイズを調整した際の角の大きさですが、元のスプライトのサイズに依存します。つまり、想定解像度とスプライトの比が関係します。

大きさを調整するには、Pixels Per Unitで大きさを調整するか、想定解像度をCnavasScalorで変更する事が有効です。

真ん中を塗りつぶさないでフィルレートを節約する

もう一つ、スライスしたスプライトの中央部分はFillCenterのチェックを外した際に描画されない特徴があります。例えば下のようにくり抜くとします。

この状態でFillCenterを抜くと、中央の透明部分が抜き取られ、フィルレートを大幅に節約することが出来ます。現状の描画コストは大体「凄いシェーダー」「フィルレート」「レンダーステート切替」の3つなので、これでフィルレートの節約ができる事は非常に有用です。

オレンジ色の部分が実際に描画される範囲です。FillCenterのチェックを外す事で、中央部分がキッチリ繰り抜かれ描画部分が最小限になっている事が分かります。