スプライトエディターの使い方

ここではスプライトエディター（Sprite Editor）の使い方について説明します。

※この記事で使用しているUnityのバージョン：Unity2019.1

スプライトエディターとは？

スプライトエディターは、その名の通りスプライト（＝2Dゲーム用画像）の設定を編集するためのエディターです。

これを使うとUnity上で1枚の画像を複数のスプライトに切り分けたり、ピボット（＝中心点）を編集できたりします。2Dゲームを作るときは必ずお世話になる機能だと思ってもらって間違いないでしょう。

スプライトエディターはテクスチャタイプが「スプライト」の画像に対して使用することができます。インスペクターに「Sprite Editor」というボタンが表示されるので（下図）、それをクリックすればスプライトエディターを開くことができます。

さて、スプライトエディターではスプライトのピボットの位置を変更することができます。ピボットとはスプライトを回転させるなどしたときの中心となる点のことです。

ピボットはスプライトエディター上では青い「○」で表示されます。位置を変更するにはそれをドラッグするか、右下の「ピボット」メニューから位置を選べばOKです（下図）。

次に、スプライトには「ボーダー」と呼ばれる境界線も設定することができます。これを設定することで、例えばUIのスプライトを引き延ばしたときに輪郭の形を崩さずに拡大する、といったことが可能です（下図）。

ボーダーが適切に設定されていないスプライト

ボーダーを適切に設定したスプライト

※例えばUIの「画像」コンポーネントで上記のようにきれいに表示させるには、ボーダーを適切に設定したうえで画像タイプを「スライスされた」に設定しておく必要があります。

ボーダーの設定方法は簡単で、右下の「Border」欄に数値を入力するか、緑の線で表示されるボーダーをドラッグするだけです。

スプライトエディターでは、例えば次の画像のように「複数の画像を1枚の画像にまとめたもの」を切り分ける（＝スライスする）こともできます（※）。スライスするためには、インポート設定でスプライトモードを「複数（Multiple）」に設定しておく必要があります。

※ちなみに、なぜわざわざ複数の画像を1枚の画像にまとめるのか？ということですが、こうすることでバラバラのスプライトにするよりも

といったメリットがあるからです。覚えておきましょう。

ウィンドウ左上の「スライス」をクリックし、

を選んで「スライス」ボタンをクリックしましょう（下図）。

自動スライスは非常に便利ですが、選んだスライスタイプやメソッドによってはめちゃめちゃにスライスされる場合もあるので、適宜手動スライスと使い分けるのが良いかと思います。

スライスしたい場所の始点をクリックして、終点までドラッグしてください。

スプライトエディターで設定した内容を保存するには、ウィンドウ右上の「適用する（Apply）」をクリックしてください。分かりづらい位置にありますし、隣の「元に戻す」ボタンを誤ってクリックすると変更内容が失われてしまうので気をつけましょう。