スプライトエディターとシートの紹介

1. スプライトエディターとシートの紹介

このチュートリアルは、Unity 2019.4.11f1 LTS、2D Sprite version 1.0.0 で検証しています

Unity のスプライトエディターは、スプライトアトラスやシートのような複数の要素を持つ画像を、個々のスプライトにスライスします。これにより、最適化されたスプライトアトラスをインポートして、個々の要素を取り出すことができ、個別のスプライトアセットを扱う必要がなくなります。スプライトシートとアトラスを使用することで、プロジェクトで維持しなければならない物理的なアセットの数を減らすことができます。つまり、50 個の別々のスプライトファイルを持つ代わりに、50 個のスプライトが追加された 1 つの画像を持つことになりますが、それぞれのスプライトの使用は維持されます。

スプライトは、2D Unity プロジェクト内の 2D グラフィックスオブジェクトです。

2. スプライトエディターのインストール

Unity 2019.2 の時点では、スプライトエディターは別のパッケージになっており、パッケージマネージャー経由で利用できます。

1. スプライトエディターをインストールするには、ウィンドウのドロップダウンから Package Manager を選択します。

2. 左列の 2D Sprite をクリックし、右下の Install をクリックします (画像 01)。

画像 01：Install をクリックすると、2D Sprite Editor がプロジェクトで使用できるようになります。

3. スプライトの作成

スプライトをプロジェクトに取り入れるには、以下の 2 つの方法があります：

1. 画像を Unity の Project Assets フォルダーにドラッグアンドドロップする、または

2. Assets > Import New Asset と進み、必要な画像を選択します。

スプライトアトラスは、連続性のないスプライトを集めた画像です。スプライトシートは、連続したスプライトを含む画像で、通常アニメーションに使用されます。

スプライトエディターを使用する際には、いくつか注意すべき点があります。スプライトシートのサイズは、2 の累乗（512*512、1024*512、1024*1024 など）で指定すると、大きさが合わないという問題が発生しません。また、Sprite Mode が Multiple に設定されていることを確認してください（画像 01）。Single に設定されていると、スプライトエディターが使えません。

4. インポートの設定

1. Project ウィンドウで、先ほどプロジェクトに取り込んだスプライト画像を選択します。Sprite Sheet の Inspector が表示されます。

2. インポート設定の一部を変更し、各設定が画像に与える影響を確認します (画像 02)。

画像 02：スプライトシートのインポート設定

スプライトシートのインスペクターには、いくつかの設定項目があります：

• Texture Type：これを Sprite (2D and UI) に設定します。

• Sprite Mode：テクスチャにスプライト 1 つのみが含まれている場合は Single に設定します。スプライトテクスチャが複数含まれる場合 (例えば複数のタイルテクスチャ持つスプライトシートなど) は Multiple に設定します。

• Pixels Per Unit： この値は、選択したスプライトの 1 Unity ユニットを構成するピクセル数です。多くのレトロゲームでは、Terrain（地形）のブロックに小さなタイル(16x16) ピクセルのスプライトを使用しているので、 1 ユニットあたりのピクセル数を 16 に設定します。最近のゲームでは、アートがより滑らかに見えるように、より高い設定が望まれます。

• Mesh Type：スプライトに生成されるメッシュの種類を定義します。Tight に設定すると、ピクセルのアルファ値に基づいたメッシュを生成します。FullRect に設定するとユーザーが指定したスプライトのサイズと同じ大きさのメッシュになります。

• Extrude Edges：これは、Tight Mesh の種類を使用する際に、スプライトの周りに残す透明バッファのサイズを決定します。　　

• Generate Physics Shape：これにより、スプライトの Collider2D メッシュの形状が自動的に生成されます。

• Wrap Mode：スプライトシートを使ったアニメーションのラップ方法を制御します。

• Filter Mode：スプライトのフィルタリングモードを設定します。

スプライトシートには Advanced（詳細）という設定もあります：

3. 展開されていない場合は、インポート設定の Advanced メニューをクリックします (画像 03)。

画像 03：スプライトシートの Advanced（詳細） 設定

注：スプライトモードが Single に設定されている場合、スプライトエディターで Slice ボタンが無効になります。

5. スプライトエディター

1. Sprite Editor をクリックすると、新しいウィンドウが開きます (画像 04)。

注：Splite エディターは、Windows > Sprite Editor の順に選択しても開くことができます。このウィンドウは他の Unity ウィンドウと同様にドッキングできます。

画像 04：Sprite エディター

6. スプライトエディターでのスプライト作成

1. スプライトエディターでは、長方形の選択範囲をクリックアンドドラッグして、スプライトを作成することができます。選択範囲の調整は、クリックして矩形を選択し、端をドラッグしてスプライトの大きさや境界線を調整します。

2. 以下のようなことを試してみてください：

• 選択範囲をドラッグして移動します。

• コーナーやエッジをクリックしてドラッグすることでサイズを変更することができます。

• ピボットポイントに配置したギズモをクリックしてドラッグすることで、スプライトのピボットポイントを調整します。

Sprite Editor ウィンドウの右下に、小さな情報ウィンドウがあります (画像 05)。以下のようなオプションが表示されます：

• Name：選択されたスプライトの名前で、画像の名前とスライスされた順番を継承しています。番号は 0 から始まります。

• Position：画像内でのスプライトの位置をピクセル単位で指定します．X と Y はスプライトの出発点（左下隅）を，W と H は出発点からの画像の幅と高さを表します．

• Border：スプライトの中心に向かって内側にボーダーを作成します。

• Pivot：ピボットの位置を設定することができます。Custom を選択した場合は、X と Y の位置をカスタムで設定できます。

画像 05：Sprite に関する情報のパネル

7. スプライトエディターのツール

スプライトエディターの上部には、いくつかのツールがあります (画像 06)：

画像 06：Sprite Editor のツール

左から右へ：

• Sprite Editor：このドロップダウンは、4 つの異なるツール（Sprite Editor、Custom Outline、Custom Physics Shape、Secondary Textures）を切り替えます。

• Slice：画像を自動的に分割するオプションを指定します (画像 07)。スライスのオプションには、Type（Automatic、Grid By Cell Size、Grid By Cell Count）、Pivot (ピボットの位置の変更）、Method (ウィンドウ上で選択済みの部分の扱いを決定) などがあります。Automatic を設定すると、スプライトの配置が不揃いだったり奇数だったりすることが多いスプライトアトラスに最適です。Type を Grid By Cell Size と Grid By Cell Count にすると、スプライトがあらかじめ均等なパターンでレイアウトされ、とても便利です。

画像 07：Slice ツールの設定

• Trim：選択されたスライスを、 透明部分をベースに、画像のフチ部分の周囲ぴったりに合うよう、四角形をリサイズできます。

• Revert：変更をやめることができます。

• Apply: 変更を保持します。

• RGB Alpha Toggle：スプライトエディターの表示を、ゲーム内で表示されるスプライトと、そのアルファチャンネルの間で切り替えます。これをクリックすると、スプライトの画像が黒と白に変わります。黒はアルファを、白はスプライトのピクセルを表しています (画像 08)。

画像 08：RGB/A ボタンを切り替えてプレビューしている画像のチャンネルをアルファチャンネルに表示

• Zoom Scroll：スクロールバーを用いて拡大/縮小が可能です。

他にも次の 3 つのツール (Custom Outline、Custom Physics Shape、Secondary Textures) があるので注意が必要です。

ドロップダウンから Edit Outline を選択すると、新しいツールバーが表示されます (画像 09)。

画像 09：Custom Outline ツール

このツールを選択すると、スプライトエディターには、スプライトのアウトラインと制御ポイントが表示されます。制御ポイントを使って、アウトラインを移動したり操作したりすることができます。スプライトの透明な部分は、プロジェクトのパフォーマンスに影響を与えることがあるので、このツールは便利です。また、このツールはスプライトの境界線を微調整するのにも使えます。

Custom Outline ツールを使うと、スプライトの不透明な部分をもとに、カスタムのメッシュの輪郭を自動的に生成します。その後、手動でポイントを調整したり、Snap ボタンを使って生成されたメッシュの輪郭がスプライトテクスチャの形状に沿っていることを確認します。Outline Tolerance スライダーを使用して、生成されたメッシュの輪郭がスプライトテクスチャの輪郭にどのくらいぴったり添わせるかを調整します。

次は、Custom Physics Shape ツールです (画像 10)。

画像 10：Custom Physics Shape ツール

スプライトの物理形状を編集できます。スプライトの物理形状はスプライトの Collider 2D メッシュの初期形状を決定します。このツールを使うと、Edit Outline ツールと同じように、コライダーのコンポーネント設定で物理形状をさらに細かく調整できます (画像 09)。

手動でポイントを調整したり、Snap ボタンを使って生成されたメッシュの輪郭がスプライトテクスチャの形状に沿っていることを確認します。Outline Tolerance スライダーを使用して、生成されたメッシュの輪郭がスプライトテクスチャの輪郭にどのくらいぴったり添わせるかを調整します。

次は、Secondary Textures ツールです (画像 11)。スプライトには、シェーダーが法線マップなどに使用する 2 枚目のテクスチャを含めることができます。

画像 11：Secondary Texture ツール

8. まとめ

スプライトエディターを使うと、シートやスプライトアトラスからスプライトを作成することができ、スプライトの調整や、プロジェクト内でのアクセスや使用方法のカスタマイズが容易になります。