Unityのスプライトについて【Sprite】

Unity_explain

この記事ではUnityのスプライトについてと詳細設定について解説しています。

<スプライトとは>

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

本来、スプライトはコンピューターで低いCPU負荷で滑らかに動かすグラフィック技術のことを差しますが、時代と共に形を変えて、Unityでは正面を向いたポリゴンにテクスチャを表示する手法を差します。

例えば↓はスプライトですが、

shaded sprite

ただ単に画像が表示されているわけではなく、Unity側が自動で↓のようなポリゴンを作成しています。ちょっと見づらいですが線が見えると思います。

wire frame

このポリゴンの上にテクスチャが表示されて↓のような形で表示されている感じです。

mesh sprite

ちょっと見えづらいですが、ポリゴンの上にテクスチャが表示されているのがうっすら見えると思います。

何故このような方法をとるのかというと、透明な部分をなるべく描画したくないからです。

↑の元々の画像は四角いテクスチャです。

四角いポリゴンにしてしまえば頂点数が少なくて済むので負荷が少なそうですが透明な部分が増えてしまいます。

この透明な部分というのが問題で、透明な部分が多いと非常に重くなってしまいます。

もし、テクスチャがスプライトではなく、透明な部分を大量に含む四角だった場合、↓のように後ろのオブジェクトと透明な部分が重なるところが出てきてしまいます。

transparent texture
スプライトではなくただの画像だった場合

この重なっている部分は一見後ろのCubeしか映っていませんが2度計算が走ってしまいます。この負荷が非常に大きいので、極力透明な部分を排除するためにポリゴンを生成しているのです。

またこれは単なる画像ではなくてポリゴンにテクスチャを描画しているので3D的な動かし方もできるようになり、ゲームオブジェクトとして扱えるようになります。

<テクスチャをスプライトにする方法>

テクスチャをスプライトにするにはインスペクターでその画像の設定を変更します。

インスペクターでTexture TypeをSprite(2D and UI)を選択して

texture change sprite

右下のApplyを押します。

sprite apply

これでテクスチャがスプライトになります。

テクスチャの設定を変更してApplyかRevertを押さずに違うことをしようとすると↓のようなダイアログが出ます。

unapplied import settings

Apply(変更の適用)かRevert(変更の破棄)になります。

<Sprite Mode>

スプライトはSprite Modeというパラメータを変更することによって扱いを変える事ができます。

sprite mode

Single

この画像から1つのスプライトを作成します。

通常のテクスチャはこのモードで使用します。

single sprite

↑のように1つだけ作成されます。

Multiple

一つの画像から複数のスプライトを作成します。

例えば↓のような画像があったとします。これで1つの画像です。

multiple sprite

この画像から一つ一つの要素を切り分けて複数のスプライトを作成する事ができます。

multiple sprite one

↑のように1つの画像からたくさんのスプライトが生成されています。

何故このようなやり方をするのかと言うと、たくさんのテクスチャを使うより、最初からまとまったデカいテクスチャにしてしまった方が処理負荷やデータ容量が少なくて済むからです。

↑のはアニメーション用の為、処理負荷の軽減は少ないですが、画面上に同時に存在する画像だった場合は大きく軽減されます。

そのため、2次元的なアニメーションや、2次元でも体のパーツが分かれているキャラクター表現などに使用されたり、共通のUIなどで使用したりします。

しかしながら、Sprite Atlasという新機能が追加された事により、無理をして1つのテクスチャにたくさんの画像を詰め込まなくても、Unityが自動で1つのテクスチャにしてくれるようになりました。

その為、現在では無理してこの機能を使う必要はありません。

Polygon

スプライトのポリゴンの形を自分で決めるモードです。

sprite polygon

↑のようにポリゴンの形を自分で好きに変える事ができます。

設定を行わないと四角になります。設定は↓のSprite Editorで行います。

スポンサーリンク

<Sprite Editor>

スプライトの中身を自分で調節したい場合、Sprite Editorという機能を使用します。

この機能を使用するにはTexture TypeをSprite(2D and UI)にして、右下のSprite Editorのボタンを押します。

open sprite editor

<注意!>

Unity2019.2以降からSprite EditorはPackage Managerに移設されました。

その為、Unity2019.2以降の場合、Sprite Editorをインストールせずに開くと↓のような警告が出ます。

sprite editor window

Package ManagerからSprite Editorをインストールする必要があります。

上部メニューのWindow>Package Managerから

package manager

Package Mangerが開くと思います。最初は項目が少ないと思いますが、通信が成功すると↓のようにたくさんの項目が出てくると思います。

package manager 2d sprite

その中の2D Spriteを選択し、右下のInstallを押せばOKです。

完了したらSprite Editorを押せば開くと思います。開かない場合は一旦Unityを再起動してください。

Sprite Editorを開くと↓のようなウィンドウが出ます。ここでスプライトの編集を行う事ができます。

sprite editor

また、このSprite Editorはいくつかのモードに分かれていて、それぞれ編集できるものが違います。

左上の方をクリックすると何のモードにするのか選択する事ができます。

sprite editor mode

<Sprite Editorモード>

スプライトの基本的な編集ができるモードです。

スプライトがPolygonになっているとこのモードは選択できません。

Spriteパネル

sprite editor

右下のパネルが基本情報になります。

・Name

そのスプライトの名前です。

SingleとPolygonのスプライトはその画像のファイル名で固定となります。

Multipleの場合、1つ1つのスプライトの名前を変更する事ができます。

・Position

そのスプライトの画像での位置です。

SingleとPolygonのスプライトはXとYが0、WとHが画像の大きさで固定になります。

Multipleの場合、1つ1つのスプライトが本来の画像のどの位置をさして、大きさはどれくらいかを指定する事ができます。

・Border

この画像の境界を指定する事ができます。

主に9スライスという技法を使う際に使用されます。

右下のパネルで数値を指定する事もできますが、↓のように

sprite editor border

画像の上に乗っている緑の線をドラッグすることでも調節する事ができます。

ちょっと↑の画像ではわかりづらかったので↓のような画像を用意しました。

test ui

適当で申し訳ないですが、これをUIだと思ってください。

Borderを何も設定していないと、大きさの縮尺を変えた時に

test ui size change

このようにみょーんと伸びます。何も設定してないので当然ですね。

そこでborderを↓のように設定します。

ui test border

すると↓のようにする事ができます。

test ui border slice

みょーんと伸びていたテクスチャがちゃんと表示されています。

このように、縮尺を変えるとテクスチャ全体が伸びていましたが、このborderを設定すると拡大縮小する範囲を設定する事ができます。

赤斜線を引いた範囲が伸び縮みし、他の部分は拡大縮小しなくなります

test sprite border extend

棒線の部分だけが伸び縮みして、周囲の丸と三角は伸び縮みしなかったのでちゃんと表示して見えた形になります。

これを利用する事で、外観はだいたい同じなんだけど形や大きさが違うUIなどを1つの画像から表現する事ができるので作業量の軽減と処理負荷の軽減もできます。

また、伸び縮み以外にも赤斜線の部分を繰り返し表示するなど色々な表現もできます。

この伸び縮みや繰り返しを行うにはそのスプライトを表示しているコンポーネントの方で設定する必要があります。

・Pivot

このスプライトの基準位置を指定します。

このPivotで指定した場所がゲームオブジェクトにした時、ゼロの座標になります。

Centerで真ん中、Top Leftで左上など項目で指定する事ができます。

Customを指定するか、Sprite Editorの画像の上に見える青い丸を動かすことで、自由な位置を指定できます。

・Pivot Unit Mode

Pivotで指定する場所を正規化した座標か、ピクセル数かで選ぶ事ができます。

・Custom Pivot

PivotをCustomにした場合、値を直接入力する事ができるようになります。

単位はPivot Unit Modeで指定したものになります。

Sprite Editorモードの上部メニュー(共通部分は除く)

Sprite Editorウィンドウの上の方にボタンがあり、それを押すことでも操作する事ができます。

sprite slice button

・Slice

スプライトをどのように切り分けるのかを指定します。

このボタンはMultipleなスプライトのみ押す事ができます。

一番上のTypeの種類を変える事で項目が変わります。

Type別のSliceの項目
・Automatic
automatic slice

テクスチャの透明度から自動でスプライトを切り分けてくれます。

Pivot・・・切り分けた個々のスプライト基準位置をどこにするのか指定できます。

Custom Pivot・・・PivotをCustomにした時のみ指定できます。Pivotの位置を正規化した値で指定します。

Method

スライスする際の方法を指定します。

Delete Existing・・・既にスライスされたスプライトがあっても既存のものを全て新しいものに置き換えます。

Smart・・・既にスライスされたスプライトがあった場合、既存の四角形を保持または調整しながら新しい四角形を作成しようとします。

Safe・・・既にスライスされたスプライトがあった場合、既存の場所は変更せずに新しい四角形を追加します。

・Grid By Cell Size
sprite slice grid by cell size

テクスチャを取り決めた値で、切り分けます。

Pixel Size・・・Xが幅、Yが高さで、この値の大きさでテクスチャを切り分けます。

Offset・・・切り分けを開始する位置をXとYで指定した分ズラします。

Padding・・・隣り合うスプライト同士の間隔を指定した値分空けます。

Pivot・・・切り分けた個々のスプライト基準位置をどこにするのか指定できます。

Custom Pivot・・・PivotをCustomにした時のみ指定できます。Pivotの位置を正規化した値で指定します。

・Grid By Cell Count
Grid By Cell Count

テクスチャを指定した数になるように切り分けます。

Column & Row・・・行と列の個数を指定します。この数になるようにスプライトを切り分けます。

Offset・・・切り分けを開始する位置をXとYで指定した分ズラします。

Padding・・・隣り合うスプライト同士の間隔を指定した値分空けます。

Pivot・・・切り分けた個々のスプライト基準位置をどこにするのか指定できます。

Custom Pivot・・・PivotをCustomにした時のみ指定できます。Pivotの位置を正規化した値で指定します。

各種切り分ける設定をした後、Sliceボタンを押すことでテクスチャを切り分けて新たに複数のスプライトを生成します。

・Trim

透明度に基づいてグラフィックの端にぴったり合うように長方形のサイズを変更してくれます。

Multipleの時のみ押す事ができます。

<Custom Outlineモード>

メッシュの形を指定する事ができます。

sprite custom outline

ポリゴンで囲まれた範囲が描画されます。複数の範囲を指定した場合、囲まれている場所全てが描画されます。

この画像を表示させるコンポーネントが、このスプライトのメッシュを有効にする設定になっていないと意味はないので注意してください。

Custom Outlineの操作方法

ドラッグ・・・四角形のポリゴンを生成

頂点をクリック・・・頂点を選択

頂点をドラッグ・・・頂点の位置を移動

辺上でダブルクリック・・・新たに頂点を作成

頂点を選択した状態でDelete(MacはCommand+BackSpace)・・・頂点を削除

辺上でCtrl+ドラッグ・・・辺で移動

Snap

オンにすると作成した頂点を画像のアルファ値が0ではない場所で一番近いところに近づけてメッシュを作成します。

Generateを押すまで効果はありません。

もう一度押すとオフになります。

Outline Tolerance

この値が高ければ高いほど、Generateを押した時複雑で、より透明な部分を削ったメッシュを作成してくれます。値は0〜1の範囲で有効です。

Outline Toleranceが0の時

Outline Toleranceが1の時

Generate

SnapやOutline Toleranceの値からオートでメッシュを作成してくれます。

自分で作ったメッシュの頂点は無視されるので注意してください。

<Custom Physics Shapesモード>

このスプライトの当たり判定を設定します。

このスプライトを表示するコンポーネントがスプライトの当たり判定を使用する設定になっていないと意味はないので注意してください。

Custom Outlineモードと操作方法も項目も一緒なので割愛します。

違うのは括った範囲が当たり判定になるという点だけです。

<Sprite Polygon Mode Editor>

スプライトがPolygonの設定になっていた場合のみこのモードが出てきます。

メッシュの形を指定した頂点数の形にする事ができます。

Custom Outlineモードと役割がかなり被っており、このモードでの編集を適用するとCustom Outlineモードで編集した内容は破棄されます。

Change Shapeをオンにする事でメニューが登場します。

Sidesで頂点数を指定し、Changeを押すと適用されます。

sprite polygon mode editor

↑では6を指定しているので六角形のポリゴンが生成されています。

このモードで生成したポリゴンはCustom Outlineモードで編集できるため、このモードである程度形作ってから、Custom Outlineモードで再編集するといいかもしれません。

<上部メニュー(共通部分)>

sprite slice button

Revert

編集した内容を破棄します。

Apply

編集した内容を適用します。

アルファ切り替えボタン

Sprite Editor上での画像の表示をカラー表示にするかアルファ表示にするか切り替える事ができます。

sprite sample
sprite alpha

拡大縮小スライダー

Sprite Editor上での画像の表示を拡大縮小します。

Mip Mapスライダー

表示しているミップマップのレベルを変更します。

テクスチャのAdvanced設定でGenerate Mip Mapsがオンになっていないと触る事はできません。

<インスペクターのその他の項目>

インスペクターのその他の設定項目は他のテクスチャタイプと共通する部分が多いので↓の記事にまとめてあります。参考にしてみてください。



タイトルとURLをコピーしました