メインコンテンツまでスキップ

スプライトエディター

スプライトエディターは、Texture AtlasアセットとSpriteアセットの作成、編集に使われます。

スプライトエディターを開くには、エディターアセットパネル内の任意のTexture AtlasまたはSpriteアセットをダブルクリックします。

Sprite Editor

ビューポート (Viewport)​

Viewport

スプライトエディタ内のビューポートは、現在選択されているTexture Atlasを表示します。フレームはテクスチャアトラス上の灰色のボックスとして表示されます。選択されたアセットは、2つのハンドル(緑と青)で表示されます。緑のハンドルはフレームの幅と高さを変更し、青のハンドルはフレームのボーダープロパティを変更します。

テクスチャアトラスの編集​

ビューポート内でマウスを使用して、フレームのアウトラインをドラッグし、その後緑色のハンドルと青色のハンドルを使用してフレームの範囲とボーダーを変更します。

フレーム (Frames)​

フレームは、テクスチャアトラス上の定義済みの領域です。フレームには、名前、位置とサイズ、ボーダーがあります。ボーダーは9スライシング領域の端を定義するために使用されます。詳細については9スライシングドキュメントを参照してください。

インスペクター (Inspector)​

インスペクターパネルは、現在選択されているアイテムのプロパティを表示します。選択されたアイテムがテクスチャアトラス、フレーム、またはSpriteアセットであるかに応じて、インスペクターが変更されます。

テクスチャアトラスインスペクター (Texture Atlas Inspector)​

Texture Atlas Inspector

テクスチャアトラスインスペクターでは、テクスチャアトラスを自動的に固定グリッドにスライスできます。

まず、既存のフレームで行うことを選択します。既存のフレームを削除またはフレームを削除せずにフレームの追加のみを選択することもできます。

次に、グリッドセルを指定する方法を選択します。

  • Grid By Frame Count - テクスチャを水平および垂直に分割するグリッドセルの数を指定します。
  • Grid By Frame Size - 各グリッドセルのサイズをピクセル単位で指定します。

次に、オフセット (Offset) とスペーシング (Spacing) の値を設定します。オフセットは、グリッドを開始する前にテクスチャの左上から何ピクセル移動するかを示す数値です。スペーシングは、各グリッドセル間のピクセル数です。

最後に、新しく生成される全てのフレームのピボット (Pivot) を設定します。ピボットは、スプライトの位置と回転点を決定します。それは、幅と高さの比率として指定されます。

すべての設定が完了したら、Generate Framesボタンをクリックしてフレームを作成します。

フレームインスペクター​

Frame Inspector

フレームインスペクターでは、個々のフレームやフレームの集まりに対してプロパティの設定ができます。フレームを1つ以上選択している場合に表示されます。フレームインスペクターは、新しいスプライトフォームを生成する場所でもあります。

インスペクターではフレームのポジション (Position) 、サイズ (Size) 、ボーダー (Border) プロパティを修正できます。

フレームインスペクターのアクション​

  • New Sprite From Selection - 新しいスプライトアセットを生成し、スプライトに選択したフレームを選択した順に割り当てます。
  • New Sliced Sprite From Selection - 新しいスプライトアセットを作成し、そのタイプをスライスに設定します。選択したフレームを、選択した順序でスプライトに割り当てます。
  • Focus on Selection - 選択したフレームにビューポートをフォーカスします。[キーボードショートカット:F]
  • Trim Selected Frames - 画像の周りの余分な空白領域を削除するために、選択したフレームのサイズを縮小します。[キーボードショートカット:T]
  • Delete Selected Frames - 選択したフレームを削除します。 [キーボードショートカット:Delete]

スプライトインスペクター​

Sprite Inspector

Spriteアセットが選択されているときにスプライトインスペクターが表示されます。このインスペクターは、1つ以上のスプライトのプロパティを編集するために使用されます。プロパティの詳細については、スプライトアセットを参照してください。

Add Frames to Sprite Assetボタンをクリックすると、スプライト編集モードに入ります。このモードでは、フレームパネルまたはビューポートから複数のフレームを選択し、スプライトに追加することができます。Add Selected Framesをクリックして、フレームをスプライトに追加します。

スプライトインスペクターを使用すると、スプライト内のフレームの順序を変更したり、個々のフレームを削除したりすることもできます。

フレームパネル​

フレームパネルを使用して、テクスチャアトラスからフレームを選択して削除できます。

アセットパネル​

アセットパネルは、現在のテクスチャアトラスから作成されたすべてのスプライトアセットを表示します。このパネルからSpriteアセットを選択することができます。

アートワークはPixelBoyによって作成されました。