ゲームのテキストボックスに代表する吹き出し（フレーム）を作成するときは９スライスが便利。こんな感じで、簡単にフレームをリサイズできました。

今回は９スライスの機能を使って、ドラゴンクエストのテキストボックスのフレームを再現してみようと思います。

今回使用したイメージの素材はこれです。（お手製）

９スライスとは？

９スライスとは、図のようにＡ～Ｉに区分けした９つの部分（スライス）ごとに拡大方法を使い分ける手法です。（１ドットの緑線が見えますか？）

９スライスを適用しない例

９スライスを適用しないときの拡大は次のように全体を同じ比率で拡大してしまい、線の幅・太さ（Border Thickness）が太くなってしまうため、期待する結果になりません。

また、Filter Mode の設定を Point (no filter) にしないと、拡大の際にアンチエイリアスが発生し、ぼやけてしまいます。ドット絵風のときは、だいたいこれがポイントに。

インポートしたイメージの Inspector を次のように設定する。

設定したあと、「Sprite Editor」を開き、次のように９スライスの領域を設定し、設定変更を「Apply」（適用）します。

UI -> Image を追加して、シーンにイメージのコンポーネントを追加します。

追加したコンポーネントの Source Image に上述のイメージを設定し、次のように設定します。

以上で、９スライスを適用したイメージを表示することができました。

Sliced と Tiled の違いは、イメージの拡大かタイル状の反復になります。