ドット絵のスプライトシートを追加する

Sprite

ここではドット絵を使用しておりますが、Unityで画像使う場合の基本的な動作もほとんど同じです。
画像の設定が少し変わるくらいです。
それに関しては作りたいゲームに合わせて調整してください。

読み込み

Unityで画像を使いたい場合、プロジェクト内に画像ファイルを読み込む必要があります。

基本的に「Assetsフォルダ内」にあるファイルは使用可能になるのでAssetsにドカスカファイルをぶち込んでもいいのですが、Assets内は後々かなりのファイル量になるのでイイ感じにフォルダ分けしてください。

この記事では、プレイヤーの待機用ドット絵アニメーションに使用するためのスプライトシートを読み込みます。

一つの画像ファイルに使用する画像を複数配置したファイルをスプライトシートと呼んでいます。

フォルダの準備

わざわざ記事に書くことでもないのですが、今後の為にもご自分が整理しやすいようにフォルダ分けしてください。

右クリックで Create > Folder で作っていけばOK

Assets > Materials > Player > Hero

とフォルダを作りました。

そこに通常のフォルダ(エクスプローラ:win Finder:mac)から画像ファイルをドラッグアンドドロップ。

ドット絵用のセッティング

読み込まれた画像をクリックしInspectorで画像の設定をします。

Texture Type : Sprite (2D and UI)
Sprite Mode : Multiple
Pixels Per Unit : 1 (状況によるがドット絵でゲーム作るなら全部の画像でそろえた方がぽくなる)
Filter Mode : Point (no filter) (こうしないとドットがボンヤリする)
Max Size : 画像の高さor幅の最大値で合わせるといい感じ(大きい分には表示には問題ないけど容量圧縮する意味でもできるだけ下げてた方がいい気がする)
Compression : None (画像の容量圧縮なのでNoneにしないと色が濁ったりする)

この設定はあくまでもドット絵のゲームの場合って設定です。
解像度の高い画像を使うならFilter ModeやCompression等はいい感じに調整する

複数の画像が含まれているファイルではなく単一画像ファイルを使用する場合はSprite ModeをSingleにする。

スプライトシートをスライスする

一枚の画像を複数に分割します。

InspectorにあるOpen Sprite Editorボタンをクリックする。

Sprite Editorが起動します。

左上のSliceをクリック

スライスの設定によって赤い線が引かれるので調整する。
イイ感じになったらSliceボタンをクリック

Pivotは画像の基準点ということだが、基本Centerがよさそう。
Flare Engine等のテンプレートでPivotがCenterである事を想定している場合があるみたい。
特に指定がなければCenterで!

右上のAppleyをクリックすると画像が分割される。

Projectでも画像が分割されたことがわかります。

ファイルの横にある(▶)をクリックすると構成されている画像が表示されたりひっこんだりします。

これで画像が使える!

コメント

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