はじめに
この記事を執筆するに当たっての作業環境は以下の通りです。
- Unity (version 2017.1.0b9[最新のβ版])
- Visual Studio Code (Version 1.13.0)
また、参考資料からそのまま抜粋を行なった文章に関しては、できるだけ引用&リンク状態にしています。
ご了承ください。
注意
出来上がったSprite AtlasはAnima2Dには使えなかったっぽいし、テクスチャにも変換できなさそうでした。誰かAnima2Dに使う方法を知ってたら教えてください。
素材紹介
今回は、キャラメイクファクトリーさんという、無料でアバターが作れるサービスを利用しました。以下の黒髪ツインテJKをバラバラに解体して編集を行い、Unityにインポートします。ちなみに普通はUIの画像群とかに用いると思われます。今回はたまたまです。
実際に作成してみる
これらのパーツ画像で、Sprite Atlasを作成するために、今回は「スプライトパッカー」という機能を使用します。この機能を使用するためには、画像の背景などにアルファが含まれている必要があるので注意してください。また、画像の縦横のサイズを4の倍数にしておかないと警告文が表示されます。
スプライトパッカーは個々のスプライトテクスチャからアトラスを自動的に生成する機能です。この機能はデフォルトでは無効となっているので、エディターの設定から変更を行います。(メニューの「Edit」 → 「Project Settings」 → 「Editor」)
この「Mode」を"Disabled"以外に設定します。この項目に設定種類に関しては、以下の通りです。
| 項目 | 説明 |
|---|---|
| Disabled | sprite packを行いません(無効)。 |
| Enabled for Builds(Legacy...) | 従来の、タグを設定して画像を選択してパックする方式を行う方式且つ、ビルドのみで有効にします |
| Always Enabled(Legacy...) | 従来の、タグを設定して画像を選択してパックする方式を行う方式且つ、パックを常に有効にします。 |
| Enabled for Builds | ビルドのみで有効にします。 |
| Always Enabled | パックを常に有効にします(今回はこれにしてます)。 |
パッキングがその下にある「Padding Power」はSpriteシートを作成した際に画像間に挿入される余白の幅を設定できます。ブロックノイズを避けたい場合には"3"にすると良いらしいです。
設定値をnとして、2の(n-1)乗ピクセルが挿入されるようです。 特に設定値3は4ピクセルが挿入されるのでブロックノイズを避けたい場合には有効かもしれません。
また、アトラス化を行うテクスチャに関しては以下の表の通り設定をしてください。
| 項目 | 設定 | 説明 |
|---|---|---|
| Texture Type | 2D and UI | このテクスチャを2Dゲーム用のスプライトとして設定します。 |
| Sprite Mode | Single | 単体の画像であることを表します。 |
| Packing Tag | 任意のタグ名 | (旧Sprite Packerを使用するなら必要)これが異なるとパックされる場所も異なります。 |
次は「Format」に関してですが、圧縮フォーマットに関しては、たとえ素材画像群のフォーマットがバラバラだったとしても、アトラス化した場合はアトラス側での圧縮フォーマット設定に再圧縮されるので、気にしなくて良いです。
ここまで終わったら実際にSpritePackerを使用します。パッキング対象は以下の三つです。
- フォルダ(に含まれているSprite群)
- テクスチャ(に含まれているSprite)
- Sprite単体
まず、Project領域から右クリックを行い、「Create」→「Sprite Atlas」を押下します。ここで出来上がったSprite Atlasに任意の名前をつけ、Inspectorを確認します。
| 項目 | 説明 |
|---|---|
| Type | アトラスのタイプを"Master"か"Variant"に設定します。通常は"Master"を設定します。"Variant"は基となるMasterアトラスを指定して複製し、乗数に従ってサイズの変更を行います。多くの場合、多種多様な解像度に対応するために使用されると思われます。 |
| include in Build | ビルドに常にAtlasを含むようにするかどうか。基本はtrue。 |
| Allow Rotation | パッキングのために、画像を回転させて格納しても良いか。基本はtrue。 |
| Tight Packing | パッキング時にタイトにパッキングを行うかどうか。基本はtrue。 |
| Read/Write Enabled | 基本はテクスチャアセットとして必要なメモリ量が倍になってしまうのでfalse。非圧縮orDXT圧縮のテクスチャでTexture2Dのメソッドを使う予定があるのならtrueにします。 |
| Generate Mip Maps | ミップマップを生成するかどうか。2Dなら基本はfalse。 |
| Filter Mode | Pointに。理由は以下に。 |
| fomat | こちらを参照して任意に設定。DefaultタブのNone,Low Quality...を変更すると、プラットフォーム別のタブ内の圧縮形式も、設定したクオリティーとなるように同時変更されます。Texture compression formats for platform-specific overrides |
Filter Mode
「スプライト端の謎の線/ゴミ/ちらつきの修正方法から」 >> 画像を拡大縮小して表示する場合、 スクリーンのピクセルと画像のピクセル（テクセル）の位置は通常一致しません。 あるスクリーン上のピクセルが複数のテクセルの間に位置した場合、 そのピクセルの色は複数のテクセルの色を基に計算されます。 その計算方法を決めるのが、スプライトの設定欄にある Filter Mode です。 通常は"Bilinear"（バイリニア）になっていると思います。 Linearは「線形」の意味で、Bi-は「二つの」なので、縦横二方向の線形補間になります。 つまり、ピクセルの色は周囲の四つのテクセルの色を線形補間することによって決まります。 このバイリニア補間は周囲の色を混ぜ合わせてピクセルの色を決めるため、 スプライトに使うと、端のピクセルを描画するときに範囲外の色を混ぜ合わせてしまうことがあります。 この問題を回避するためには Filter Mode を"Point (no filter)"に設定します。 Pointは「点」なので、一番近いテクセルの色をそのまま採用します。 一番近いという意味で Nearest Neighbor （ニアレストネイバー）法と呼ばれたりもします。 バイリニア補間は画像を拡大した時に滑らかに表示するためのものです。 これを切ると画像がドットっぽく表示されることになります。 拡大率によっては絵の表現が変わってしまうため注意が必要です。 ちなみにもうひとつの"Trilinear"（トリリニア、トライリニア）は、Tri-「三つの」Linear「線形」なので、 ミップマップ（後述）による深度を加えた三方向の線形補間になります。 補間に使われる色がより増えるため指定すると状態は悪化します。「Objects for Packing」では、パッキング対象をリストに追加していきます。今回はフォルダごとパッキングを行おうと思うので、先ほどのバラバラJK部品を「Texture」というフォルダに格納しておきます。
画像の箇所にある、"+"のマークを押下してください。
表示されたウィンドウにフォルダ名を打ち込んで選択します。
最後に「Pack Preview」を押下すれば手順は完了となります。
