Unity2017 Sprite Editorの使い方

# Unity2017 Sprite Editorの使い方

## はじめに

この記事を執筆するに当たっての作業環境は以下の通りです。

- Unity (version 2017.1.0b9[最新のβ版])
- Visual Studio Code (Version 1.13.0)

また、参考資料からそのまま抜粋を行なった文章に関しては、できるだけ引用&リンク状態にしています。

ご了承ください。

今回は、[キャラメイクファクトリー](http://www15.atpages.jp/kisekae99/kisekae.html)さんという、無料でアバターが作れるサービスを利用しました。以下の黒髪ツインテJKをバラバラに解体して編集を行い、Unityにインポートします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/e00b5173-4733-6b53-bbbd-18d3cf51ec58.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36899/a073242d-aa2b-df26-6092-c361105eadd8.png)

## ウィンドウ操作について

Sprite Editorには、いくつか種類が存在します。

|種類|説明|
|---|---|
|Sprite Editor|基本の状態です。ここではspriteの分割を行います。|
|Edit Outline|ここではポリゴンの調整が行えます。spriteの分割を行なった後の頂点数の削減などに使用します。|
|Edit Physics Shape|この画面で行なった頂点数や形状などの変更が、Sprite MeshにPolygonColider2Dのコンポーネントを追加した際に起こる自動変形にも適用されます。|

### Sprite Editor

ここでは一枚の画像に含まれている複数の要素を手動・自動で分割処理を行うことができます。

### 機能説明

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/02df7513-02a5-1733-f881-9a8c2b71ae1f.png" width=100%>

色ごとにどういったことが行えるか以下の表にまとめました。

|色|説明|
|-----|------|
|赤(Sprite Editorタブ)|Sprite Editorの切り替えを行うことができます。|
|青(Slice)|自動で分割を行う際に使用します(詳しくは後述)。|
|緑(Trim)|要素の縁部分に合うように自動で四角形をリサイズできます。|
|オレンジ(Revert Apply)|変更を破棄する(Revert)か、保持するか(Apply)を選択できます。|
|紫(虹色ボタンとスライダー)|要素が持つ画像部分の表示と、アルファのみを表示の切り替えができます。また、スライダーを調整することで拡大・縮小ができます。|

#### Slice(自動分割)

Sliceボタンを押下すると以下のようなウィンドウが表示されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/908f11f5-91d7-6fa8-cba9-8260f63b4aed.png" width=50%>

ここで表示されているSliceのTypeとPivotについて見ていきます。

##### Automatic

自動で要素の識別をし、分割が行われます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/74859bf7-a426-0a57-54dc-a8f4b2480301.png" width=50%>

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/077b1f84-8a2e-6498-897f-172d804aa678.png" width=50%>

このTypeの時のみに表示される「Method」という項目は基本的に「Delete Existing」しか使用しません。では、それらの設定がどのように作用するのかを見ていきたいと思います。動画では、スカートの分割設定と、新たに作成した要素に関して注目して見てください。

- 「Delete Existing」は、既にある要素とは別に自分で要素を追加していたり、既に分割されている要素を編集していたとしても、自動識別で分割し直します。
![Delete Existing.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/f399de0b-56b9-f7bd-5889-4731cf64d998.gif)
- 「Smart」は既にある要素とは別に自分で要素を追加していた箇所に関しては削除を行わず、それ以外の要素を自動識別で分割し直します。
![Smart.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/269b780e-81df-38ff-6290-60bf5d681e6c.gif)
- 「Safe」は既にある要素とは別に自分で要素を追加していた箇所と編集をしていた箇所は手を加えずに、それ以外の要素を自動識別で分割し直します。
![Safe.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/4753a725-8ff4-27df-f0d1-f0a90934b771.gif)

##### Grid By Cell Size

指定したサイズごとにspriteを分割します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/882619c7-7393-6bad-8ce9-c29917c3cfb7.png" width=50%>

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/4b25d305-5b09-5d0c-ddc7-0c922af3316f.png" width=50%>

##### Grid By Cell Count：

指定した等分でspriteを分割します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/16f89541-4307-3477-5995-206e0b5fdc04.png" width=50%>

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/a90b20f9-bedc-47ec-994f-749da382af51.png" width=50%>

##### Pivot

回転軸の設定を行います。デフォルトで9箇所の設定が表示されていますが、ここで"Custom"を選択すると、「Custom Pivot」で任意の場所を設定できます。

### 操作説明

基本的には自動Slice後に、分割箇所が気になるようなら手動で直すと言った手順となります。分割が終わったらApplyを押下して完了となります。

![slice.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/1472a627-11fb-da88-d0a7-8828a8b8561d.gif)

緑枠に関しては「9 Slice」という機能のために使用されます。詳しくは以下の記事を確認してみて下さい。

[【Unity】Spriteで9 Sliceを使う](http://tsubakit1.hateblo.jp/entry/2017/04/05/224921)

### Edit Outline

ここでは頂点の追加・削減を行なって、ポリゴンの調整ができます。基本的には、Sprite Editorで画像分割を行なった後に操作することになると思います。この画面の操作方法に関しては詳しく書いている記事があるのでそちらへ。今回の記事では、以下の記事の補足的説明となります。

[【Unity】SpriteEditorでSpriteが自動生成したポリゴンを削減したり透過部分に穴を開けたり](http://tsubakit1.hateblo.jp/entry/2016/12/27/215743)

### 機能説明

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/f77d2d6a-d53a-404d-52c3-2e6a0c032076.png" width=100%>

|色|説明|
|-----|------|
|赤(Snap)|正直わからんです。多分カチッてはまる感じで選択できる(と思ってます)。|
|青(Outline Tolerance)|スライダーの値に応じて、spriteの輪郭に合わせるように頂点数を調整することができます。|
|紫(Update)|青部分のスライダーの値を変更した後に、この「Update」ボタンを押下することで反映が行われます。|

### 操作説明(一応)

基本的には要素を選択した後に、「Outline Tolerance」のスライダーを動かしてUpdateを押下する、という手順を何度か繰り返して調整を行い、少しだけ手動で頂点数を増減させて手直しするという流れになると思います。

![Edit Outline.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/4cef0ea1-3a3f-8e87-32f8-f8df07292db6.gif)

### Edit Physics Shape

ここでは、SpriteにPolygonColider2Dのコンポーネントを追加した際に起こる自動変形時の頂点数や形状を編集することができます。

※ただしここで行なった編集は、「Anima2D」の機能である「SpriteMesh」を行なっても引き継がれませんのでご注意を！(今後のアップデートで変わる可能性有り)

### 機能説明

Edit Outlineと同じなので割愛します。

### 操作説明

これもEdit Outlineと同じなのですが、コライダーの形状なので、格ゲーでも無い限り、そこまで細かく設定する必要もないかもしれません。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/9327a5fd-2ac3-572b-205e-758234d393d8.png" width=30%>

ここまで設定したら以下の画像の赤枠部分から「Scene」にD&Dを行い、表示されたスプライトにコライダーを追加してみます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/36899/86ec8fb2-20f8-ea16-32bd-c1630f9cf04d.png" width=100%>

![Edit Physics Shape.gif](https://qiita-image-store.s3.amazonaws.com/0/36899/cefddfb3-5d9d-6802-6bb3-79270dd336c0.gif)

## 最後に

いかがだったでしょうか？Unityでの2Dゲーム開発において、Sprite Editorは重要な機能になってくると思われます。是非活用してみて下さい。この記事がSprite Editorの新しい使い方を学ぶ手助けができたなら幸いです。それでは良き Unity ライフを！

## 参考資料

- [【Unity】SpriteEditorでSpriteが自動生成したポリゴンを削減したり透過部分に穴を開けたり](http://tsubakit1.hateblo.jp/entry/2016/12/27/215743)
- [SpriteEditorの新機能Edit Outline](http://karaagedigital.hatenablog.jp/entry/2017/02/07/115601)