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

それぞれが独立して動く車輪を備えた車など、さまざまなパーツを持つ 1 つのキャラクターの画像がある場合、Sprite Editor (スプライトエディター) を使用してその画像からさまざまなパーツを抽出し、同じテクスチャの個別のスプライトに加えることができます。

ノート: 編集したい画像の Texture Type を確実に Sprite (2D and UI) に設定してください。スプライトのインポートと設定に関しては スプライトの設定 を参照してください。

複数のコンポーネントを持つスプライトテクスチャは、Inspector で Sprite Mode を Multiple に設定する必要があります。

スプライトエディターを開く

Sprite Editor (スプライトエディター) を開くには、以下を行います。

1. Project ウィンドウ から編集したい 2D 画像を選択します (図 1: Project ウィンドウ)。

2. テクスチャインポート Inspector の Sprite Editor ボタンをクリックします (図 2: テクスチャインポート Inspector)。すると Sprite Editor が表示されます (図 3: Sprite Editor)。

ノート: Sprite Editor ボタンは画像の Texture Type を Sprite (2D and UI) に設定している場合にのみ表示されます。

ノート: 画像に複数の要素がある場合は、Texture Import Inspector で Sprite Mode を Multiple に設定してください。

複合した画像とともにウィンドウ上部のバーにいくつかのコントロールがあります。右上のスライダーでズームして、すぐ左のカラーバーのボタンで画像そのもの、またはアルファレベルを表示するかを切り替えます。一番右にあるスライダーは、テクスチャのピクセル化 (ミップマップ) を制御します。スライダーを左に動かすと、テクスチャの解像度を下げます。もっとも重要なのは左上の Slice メニューで、画像を自動的に分割するオプションを提供します。

Apply (適用) ボタンと Revert (元に戻す) ボタンを選択すると、Sprite Editor ウィンドウで行った変更をそれぞれ保持または破棄します。これらのボタンによって、効果を適用する前に Unity のPreferences ウィンドウ (メニュー：Edit > Preferences…) で、確認ダイアログを表示します。Preferences ウィンドウで、2D > Sprite Editor Window の順に進み、Sprite Editor ウィンドウのオプションを開きます。

それぞれのオプションを選択すると、Apply または Revert を選択した後にダイアログが表示され、選択を確認し、加えた変更が誤って保存または破棄されるのを防ぎます。

エディターを使う

手動で要素を識別するものとしてもっとも直接的な方法はエディターを使用することです。画像をクリックすると隅にハンドルが表示された矩形領域が表示されます。サイズ調整はハンドルかスプライトの矩形の端をドラッグすることで行うことができます。要素を分割したら、別のものを追加するには画像の別の部分の矩形をドラッグします。矩形を選択すると、ウィンドウの左下にパネルが表示されます。

パネルのコントロールでスプライト画像の名前を選択し、座標によってスプライトの矩形の位置とサイズを設定できます。左、上、右、下の境界線の幅をピクセル単位で指定できます。ボーダーはスプライトを 9 スライス するときに便利です。スプライトのピボットの設定もあり、Unity はそれらをグラフィックスの座標の原点と主要な “アンカーポイント” として使用します。デフォルトの矩形に相対的な位置 (中央、右上など) から選択するか、カスタム座標を使用できます。

Slice メニューの隣にある Trim ボタンは、透明度に基づいて画像の端の周りにぴったり合うように、スプライトの矩形のサイズを変更します。

ノート: Border は 2D SpriteRenderer ではなく、UI システムでのみサポートされています。