【Unity】画像をスライスして引き伸ばしを綺麗にする

セリフの吹き出しなど可変のUIを作る時、「サイズを変更すると画像が歪んでしまった」ということがあります。
今回は画像の引き伸ばし時に歪んでしまうのを回避する方法について書いていきます。

画像をそのまま引き伸ばした場合

このように全体が伸ばされてしまうので見た目が微妙になってしまいます。

9スライスを設定する

スプライトを綺麗に引き伸ばすために、9スライスの設定をしていきます。

スプライトのInspector設定

まずは画像素材のInspectorウィンドウからSprite ModeのMesh Typeを「Full Rect」に変更します。
変更後は「Apply」を押して適用します。

Sprite Editorで境界を設定

Sprite Editorを開きます。

Sprite Editorが開けない場合はパッケージマネージャーから「2D Sprite」をインポートしてください。

Sprite Editorを開いたら、緑の点をドラッグするか下のBorderの値を変更してスプライトの境界を設定します。

吹き出しの画像を例にするとこんな感じです。
角や吹き出しのとがっている部分は引き伸ばしたくないので、そこを避けるように設定しています。
境界が決まったらApplyをクリックして適用し、Sprite Editorを閉じます。

シーンに配置してModeを変更

画像をシーンに配置し、Sprite RendererのDraw Modeを「Sliced」または「Tiled」に変更します。
※UI（Image）の場合、ImageのImage Typeを「Sliced」または「Tiled」にします。

設定はこれで完了です。
サイズを変更してみると、設定した境界の外側の部分はそのままで綺麗に引き伸ばされています。

上手くいかないときに確認するポイント

上記の通りに設定したのに綺麗に引き伸ばしができていない場合は、次のポイントを確認してみてください。

①Scaleの値を変更していないか

Scaleを変えると画像全体の大きさが変わってしまうため意味がありません。
Sprite Rendererの場合はSizeのWidthとHeightを、UI（Image）の場合はRect TransformのWidthとHeightを変えます。

②Scale Toolで動かしていないか

Sceneビューからマウス操作などでサイズを変更するとき、Scale Toolで変更するとScaleの値が変わってしまいます。
Rect Toolで変更すると綺麗に引き伸ばすことができます。

参考

スプライトの 9 スライス – Unity マニュアル