この記事ではUnityのスプライトについてと詳細設定について解説しています。
＜スプライトとは＞
スプライトは2Dグラフィックオブジェクトです。
本来、スプライトはコンピューターで低いCPU負荷で滑らかに動かすグラフィック技術のことを差しますが、時代と共に形を変えて、Unityでは正面を向いたポリゴンにテクスチャを表示する手法を差します。
例えば↓はスプライトですが、
ただ単に画像が表示されているわけではなく、Unity側が自動で↓のようなポリゴンを作成しています。ちょっと見づらいですが線が見えると思います。
このポリゴンの上にテクスチャが表示されて↓のような形で表示されている感じです。
ちょっと見えづらいですが、ポリゴンの上にテクスチャが表示されているのがうっすら見えると思います。
何故このような方法をとるのかというと、透明な部分をなるべく描画したくないからです。
↑の元々の画像は四角いテクスチャです。
四角いポリゴンにしてしまえば頂点数が少なくて済むので負荷が少なそうですが透明な部分が増えてしまいます。
この透明な部分というのが問題で、透明な部分が多いと非常に重くなってしまいます。
もし、テクスチャがスプライトではなく、透明な部分を大量に含む四角だった場合、↓のように後ろのオブジェクトと透明な部分が重なるところが出てきてしまいます。
この重なっている部分は一見後ろのCubeしか映っていませんが２度計算が走ってしまいます。この負荷が非常に大きいので、極力透明な部分を排除するためにポリゴンを生成しているのです。
またこれは単なる画像ではなくてポリゴンにテクスチャを描画しているので３D的な動かし方もできるようになり、ゲームオブジェクトとして扱えるようになります。
＜テクスチャをスプライトにする方法＞
テクスチャをスプライトにするにはインスペクターでその画像の設定を変更します。
インスペクターでTexture TypeをSprite(2D and UI)を選択して
右下のApplyを押します。
これでテクスチャがスプライトになります。
テクスチャの設定を変更してApplyかRevertを押さずに違うことをしようとすると↓のようなダイアログが出ます。
Apply（変更の適用）かRevert（変更の破棄）になります。
＜Sprite Mode＞
スプライトはSprite Modeというパラメータを変更することによって扱いを変える事ができます。
Single
この画像から１つのスプライトを作成します。
通常のテクスチャはこのモードで使用します。
↑のように１つだけ作成されます。
Multiple
一つの画像から複数のスプライトを作成します。
例えば↓のような画像があったとします。これで１つの画像です。
この画像から一つ一つの要素を切り分けて複数のスプライトを作成する事ができます。
↑のように１つの画像からたくさんのスプライトが生成されています。
何故このようなやり方をするのかと言うと、たくさんのテクスチャを使うより、最初からまとまったデカいテクスチャにしてしまった方が処理負荷やデータ容量が少なくて済むからです。
↑のはアニメーション用の為、処理負荷の軽減は少ないですが、画面上に同時に存在する画像だった場合は大きく軽減されます。
そのため、２次元的なアニメーションや、２次元でも体のパーツが分かれているキャラクター表現などに使用されたり、共通のUIなどで使用したりします。
しかしながら、Sprite Atlasという新機能が追加された事により、無理をして１つのテクスチャにたくさんの画像を詰め込まなくても、Unityが自動で１つのテクスチャにしてくれるようになりました。
その為、現在では無理してこの機能を使う必要はありません。
Polygon
スプライトのポリゴンの形を自分で決めるモードです。
↑のようにポリゴンの形を自分で好きに変える事ができます。
設定を行わないと四角になります。設定は↓のSprite Editorで行います。
＜Sprite Editor＞
スプライトの中身を自分で調節したい場合、Sprite Editorという機能を使用します。
この機能を使用するにはTexture TypeをSprite(2D and UI)にして、右下のSprite Editorのボタンを押します。
その為、Unity2019.2以降の場合、Sprite Editorをインストールせずに開くと↓のような警告が出ます。
Package ManagerからSprite Editorをインストールする必要があります。
上部メニューのWindow＞Package Managerから
Package Mangerが開くと思います。最初は項目が少ないと思いますが、通信が成功すると↓のようにたくさんの項目が出てくると思います。
その中の2D Spriteを選択し、右下のInstallを押せばOKです。
完了したらSprite Editorを押せば開くと思います。開かない場合は一旦Unityを再起動してください。
Sprite Editorを開くと↓のようなウィンドウが出ます。ここでスプライトの編集を行う事ができます。
また、このSprite Editorはいくつかのモードに分かれていて、それぞれ編集できるものが違います。
左上の方をクリックすると何のモードにするのか選択する事ができます。
＜Sprite Editorモード＞
スプライトの基本的な編集ができるモードです。
スプライトがPolygonになっているとこのモードは選択できません。
Spriteパネル
右下のパネルが基本情報になります。
・Name
そのスプライトの名前です。
SingleとPolygonのスプライトはその画像のファイル名で固定となります。
Multipleの場合、１つ１つのスプライトの名前を変更する事ができます。
・Position
そのスプライトの画像での位置です。
SingleとPolygonのスプライトはXとYが０、WとHが画像の大きさで固定になります。
Multipleの場合、１つ１つのスプライトが本来の画像のどの位置をさして、大きさはどれくらいかを指定する事ができます。
・Border
この画像の境界を指定する事ができます。
主に９スライスという技法を使う際に使用されます。
右下のパネルで数値を指定する事もできますが、↓のように
画像の上に乗っている緑の線をドラッグすることでも調節する事ができます。
ちょっと↑の画像ではわかりづらかったので↓のような画像を用意しました。
適当で申し訳ないですが、これをUIだと思ってください。
Borderを何も設定していないと、大きさの縮尺を変えた時に
このようにみょーんと伸びます。何も設定してないので当然ですね。
そこでborderを↓のように設定します。
すると↓のようにする事ができます。
みょーんと伸びていたテクスチャがちゃんと表示されています。
このように、縮尺を変えるとテクスチャ全体が伸びていましたが、このborderを設定すると拡大縮小する範囲を設定する事ができます。
↓赤斜線を引いた範囲が伸び縮みし、他の部分は拡大縮小しなくなります。
棒線の部分だけが伸び縮みして、周囲の丸と三角は伸び縮みしなかったのでちゃんと表示して見えた形になります。
これを利用する事で、外観はだいたい同じなんだけど形や大きさが違うUIなどを１つの画像から表現する事ができるので作業量の軽減と処理負荷の軽減もできます。
また、伸び縮み以外にも赤斜線の部分を繰り返し表示するなど色々な表現もできます。
この伸び縮みや繰り返しを行うにはそのスプライトを表示しているコンポーネントの方で設定する必要があります。
・Pivot
このスプライトの基準位置を指定します。
このPivotで指定した場所がゲームオブジェクトにした時、ゼロの座標になります。
Centerで真ん中、Top Leftで左上など項目で指定する事ができます。
Customを指定するか、Sprite Editorの画像の上に見える青い丸を動かすことで、自由な位置を指定できます。
・Pivot Unit Mode
Pivotで指定する場所を正規化した座標か、ピクセル数かで選ぶ事ができます。
・Custom Pivot
PivotをCustomにした場合、値を直接入力する事ができるようになります。
単位はPivot Unit Modeで指定したものになります。
Sprite Editorモードの上部メニュー（共通部分は除く）
Sprite Editorウィンドウの上の方にボタンがあり、それを押すことでも操作する事ができます。
・Slice
スプライトをどのように切り分けるのかを指定します。
このボタンはMultipleなスプライトのみ押す事ができます。
一番上のTypeの種類を変える事で項目が変わります。
・Automatic
テクスチャの透明度から自動でスプライトを切り分けてくれます。
Pivot・・・切り分けた個々のスプライト基準位置をどこにするのか指定できます。
Custom Pivot・・・PivotをCustomにした時のみ指定できます。Pivotの位置を正規化した値で指定します。
スライスする際の方法を指定します。
Delete Existing・・・既にスライスされたスプライトがあっても既存のものを全て新しいものに置き換えます。
Smart・・・既にスライスされたスプライトがあった場合、既存の四角形を保持または調整しながら新しい四角形を作成しようとします。
Safe・・・既にスライスされたスプライトがあった場合、既存の場所は変更せずに新しい四角形を追加します。
・Grid By Cell Size
テクスチャを取り決めた値で、切り分けます。
Pixel Size・・・Xが幅、Yが高さで、この値の大きさでテクスチャを切り分けます。
Offset・・・切り分けを開始する位置をXとYで指定した分ズラします。
Padding・・・隣り合うスプライト同士の間隔を指定した値分空けます。
Pivot・・・切り分けた個々のスプライト基準位置をどこにするのか指定できます。
Custom Pivot・・・PivotをCustomにした時のみ指定できます。Pivotの位置を正規化した値で指定します。
・Grid By Cell Count
テクスチャを指定した数になるように切り分けます。
Column & Row・・・行と列の個数を指定します。この数になるようにスプライトを切り分けます。
Offset・・・切り分けを開始する位置をXとYで指定した分ズラします。
Padding・・・隣り合うスプライト同士の間隔を指定した値分空けます。
Pivot・・・切り分けた個々のスプライト基準位置をどこにするのか指定できます。
Custom Pivot・・・PivotをCustomにした時のみ指定できます。Pivotの位置を正規化した値で指定します。
各種切り分ける設定をした後、Sliceボタンを押すことでテクスチャを切り分けて新たに複数のスプライトを生成します。
・Trim
透明度に基づいてグラフィックの端にぴったり合うように長方形のサイズを変更してくれます。
Multipleの時のみ押す事ができます。
＜Custom Outlineモード＞
メッシュの形を指定する事ができます。
ポリゴンで囲まれた範囲が描画されます。複数の範囲を指定した場合、囲まれている場所全てが描画されます。
この画像を表示させるコンポーネントが、このスプライトのメッシュを有効にする設定になっていないと意味はないので注意してください。
ドラッグ・・・四角形のポリゴンを生成
頂点をクリック・・・頂点を選択
頂点をドラッグ・・・頂点の位置を移動
辺上でダブルクリック・・・新たに頂点を作成
頂点を選択した状態でDelete（MacはCommand＋BackSpace)・・・頂点を削除
辺上でCtrl＋ドラッグ・・・辺で移動
Snap
オンにすると作成した頂点を画像のアルファ値が０ではない場所で一番近いところに近づけてメッシュを作成します。
Generateを押すまで効果はありません。
もう一度押すとオフになります。
Outline Tolerance
この値が高ければ高いほど、Generateを押した時複雑で、より透明な部分を削ったメッシュを作成してくれます。値は０〜１の範囲で有効です。
Outline Toleranceが０の時
Outline Toleranceが１の時
Generate
SnapやOutline Toleranceの値からオートでメッシュを作成してくれます。
自分で作ったメッシュの頂点は無視されるので注意してください。
＜Custom Physics Shapesモード＞
このスプライトの当たり判定を設定します。
このスプライトを表示するコンポーネントがスプライトの当たり判定を使用する設定になっていないと意味はないので注意してください。
Custom Outlineモードと操作方法も項目も一緒なので割愛します。
違うのは括った範囲が当たり判定になるという点だけです。
＜Sprite Polygon Mode Editor＞
スプライトがPolygonの設定になっていた場合のみこのモードが出てきます。
メッシュの形を指定した頂点数の形にする事ができます。
Custom Outlineモードと役割がかなり被っており、このモードでの編集を適用するとCustom Outlineモードで編集した内容は破棄されます。
Change Shapeをオンにする事でメニューが登場します。
Sidesで頂点数を指定し、Changeを押すと適用されます。
↑では６を指定しているので六角形のポリゴンが生成されています。
このモードで生成したポリゴンはCustom Outlineモードで編集できるため、このモードである程度形作ってから、Custom Outlineモードで再編集するといいかもしれません。
＜上部メニュー（共通部分）＞
Revert
編集した内容を破棄します。
Apply
編集した内容を適用します。
アルファ切り替えボタン
Sprite Editor上での画像の表示をカラー表示にするかアルファ表示にするか切り替える事ができます。
拡大縮小スライダー
Sprite Editor上での画像の表示を拡大縮小します。
Mip Mapスライダー
表示しているミップマップのレベルを変更します。
テクスチャのAdvanced設定でGenerate Mip Mapsがオンになっていないと触る事はできません。
＜インスペクターのその他の項目＞
インスペクターのその他の設定項目は他のテクスチャタイプと共通する部分が多いので↓の記事にまとめてあります。参考にしてみてください。
