Sprite Editor: Custom Outline

Unity がスプライトエディターの Custom Outline オプションを使用し、スプライトテクスチャをレンダリングするメッシュの形状を編集します。Custom Outline エディターを使用すると、制御ポイントを使用して、スプライトのメッシュのアウトラインの形状を作成したり定義したりすることができます。

デフォルトでは、Unity は各スプライトを矩形メッシュ上にレンダリングします。このメッシュには、テクスチャの境界線の外側に透明な領域が含まれている場合があり、透明な領域をレンダリングすると、パフォーマンスに悪影響を与えることがあります。Custom Outline エディターを使用してスプライトテクスチャのアウトラインに一致するメッシュのアウトラインを定義すると、透明領域のサイズを縮小し、パフォーマンスが向上します。

カスタムアウトラインエディタにアクセスするには、スプライトを選択し、スプライトのインスペクタウィンドウで、スプライトエディタボタンを選択します。スプライトエディタのウィンドウで、左上のドロップダウンメニューを開き、 Custom Online を選択すると、Custom Outline エディタが開きます。

スプライトエディターのドロップダウンメニューから Custom Outline を選択します。 — スプライトエディターのドロップダウンメニューから **Custom Outline** を選択します。

カスタムアウトラインエディター

カスタムアウトラインエディターのプロパティ

プロパティ	機能
Snap	コントロールポイントを最も近いピクセルにスナップします。
Outline Tolerance	このスライダーを使って、作成されたアウトラインがスプライトテクスチャのアウトラインにどれだけぴったりと正確に沿うかを制御します。最小値 (0) で、スプライトエディターはスプライトの周囲に基本的なアウトラインを作成します。最大値 (1) では、スプライトエディターはスプライトテクスチャのアウトラインにできるだけ近いアウトラインを作成します。
Generate	このボタンをクリックすると、設定した Outline Tolerance の値に基づいて、Unity が自動的にアウトラインを作成します。
Copy	カスタムアウトラインを生成または設定した後、この Copy ボタンをクリックすると、カスタムアウトラインが複製されます。カスタムアウトラインモジュールを終了するか、スプライトエディタを閉じると、コピーされたアウトラインはメモリから削除されます。
Paste	このボタンは、コピーしたアウトラインを現在選択されているスプライトに貼り付けるために使います。 Copy 機能を使ってアウトラインをコピーしていない場合は、このボタンは使用できません。 Paste コピーしたカスタムアウトラインを別のスプライトに貼り付けるには、Project ウィンドウで Custom outline editor ウィンドウが開いている状態で、スプライトを選択します。そして、 Paste ボタンをクリックして、コピーしたアウトラインを新しいスプライトに貼り付けます。アウトラインを貼り付ける際に、アウトライン内のポイントがスプライトのフレームよりも大きい場合、Unityはそのポイントをスプライトのフレーム内に収めるようにクランプします。
Paste All	このボタンを使うと、コピーしたアウトラインを、選択の有無にかかわらず、スプライトエディタウィンドウ内のすべてのスプライトに貼り付けます。 Copy 機能を使ってアウトラインをコピーしていない場合は、このボタンは使用できません。この機能は、同じTexture内の複数のSpriteに同じアウトラインを適用するために使用します(TextureのSprite Mode が’Multiple’に設定されている場合など)。アウトラインを貼り付ける際に、アウトライン内のポイントがスプライトのフレームを超える場合、Unityはそのポイントをスプライトのフレーム内に収めるようにクランプします。
Revert	エディターウィンドウで行われた最近の変更のうち、保存されていないものを元に戻します。変更を保存するには、まず Apply をクリックします。
Apply	このボタンを選択すると、エディターウィンドウで行った変更がすべて保存されます。

カスタムアウトラインエディターの使用

カスタムアウトラインエディターでは、スプライトのメッシュを作成できます。カスタムのアウトラインを作成するには 2 つの方法があります。Unity が自動的に形状を生成する方法と、エディターウィンドウで手動で作成し、編集する方法があります。

アウトラインの生成

オリジナルのスプライトテクスチャの形状に沿って、テクスチャの透明部分も考慮したアウトラインを Unity が自動的に生成するには、Generate ボタンをクリックします。ただし、生成されたアウトラインがどの程度スプライトテクスチャに沿っているかは、Outline Tolerance スライダーで調整できます。

** Generate** ボタンは Outline Tolerance スライダーの横にあります。 — ** Generate** ボタンは **Outline Tolerance** スライダーの横にあります。

Outline Tolerance スライダーを調整して、Unity が生成するメッシュのアウトラインを精査します。スライダの値を上げると、アウトラインがスプライトテクスチャの形状にどれだけ近いかがわかります。スライダを0にすると、スプライトのテクスチャに沿ったより緩やかなメッシュが生成されます。

左: 低い Outline Tolerance で自動的に生成されたメッシュアウトライン。<br/>右: 高い Outline Tolerance で自動的に生成されたメッシュアウトライン。 — 左: 低い **Outline Tolerance** で自動的に生成されたメッシュアウトライン。
右: 高い **Outline Tolerance** で自動的に生成されたメッシュアウトライン。

カスタムアウトラインの編集

独自のカスタム形状を作成し、それを2つの方法で編集することができます。1つ目の方法は、自動的にのアウトラインを生成した後、生成されたアウトラインの制御点を動かしてさらに精密化する方法です。また、カスタムアウトラインエディターウィンドウの任意のスペースをクリックしてドラッグすると、4 つの制御点を持つ矩形のアウトラインが作成され、制御点の移動、追加、削除により、アウトラインをより精錬する方法もあります。

スプライトテクスチャの上をクリックアンドドラッグし、4 つの制御点を持つ矩形のアウトラインを作成します。この手順を繰り返して、スプライト内に複数のメッシュアウトラインを作成します。Unity は、メッシュのアウトラインに囲まれた領域のみをレンダリングします。

制御点の移動

メッシュのアウトラインの形状を調整するには、その制御点をクリックしてドラッグします。制御点の上にカーソルを置くと青色に変わり、選択できることを示します。制御点をクリックして別の位置にドラッグし、メッシュのアウトラインの形状を調整します。複数の制御点を一度に選択するには、ある領域をクリックしてカーソルをドラッグすると、その領域内のすべての制御点が選択されます。その後、選択したすべての制御点の位置を一度にまとめて変更したり、削除することができます。