読者です 読者をやめる 読者になる 読者になる

Unity5(C#)初心者・入門者向けチュートリアル ひよこのたまご

AndroidやiOS向けアプリを簡単に作れるゲーム開発環境Unity(ユニティ)の使い方を、チュートリアル方式で一緒に学びましょう!

【Unity開発】Sprite画像とSprite Packerまとめ【ひよこエッセンス】

いつもひよこのたまごをご利用下さいましてありがとうございます!
おかげ様でチュートリアル数も10ゲーム目となりました!
チュートリアル一覧は
こちら からどうぞ!


スポンサーリンク

Unity5.0.0f4 Personal(2015年5月)

 

f:id:hiyotama:20150504205926p:plain

 

ひよこエッセンスの時間です〜

Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜

今回はSprite画像についてです〜

Sprite画像まとめ

 

①Sprite画像を作ってみる 

Sprite画像とは、Unityで使われる2D画像オブジェクトのことを言います〜まずは、いつもひよこエッセンス冒頭で使われている画像でSprite画像を作ってみましょう〜画像をProjectビューへImportして、InspectorビューのTextureTypeを見ます〜

 

f:id:hiyotama:20150511111243p:plain

Texture Type > Sprite(2D and UI) 

 

TextureTypeから「Sprite(2D and UI」を選択し、Applyボタンを押すと、Sprite画像の完成です〜

 

f:id:hiyotama:20150511111438p:plain

Apply(適用)する

 

※※※注意※※※

画像を圧縮(Compressed)してSprite画像を使う時、画像サイズを縦横共に4の倍数のpxサイズにしないと警告が出てしまいますのでご注意下さい〜このひよこの画像サイズは128px * 128pxなので警告は出ていませんが、もしサイズが合っていないと以下のような警告が出ます!

 

f:id:hiyotama:20150511112305p:plain

DXT5という圧縮フォーマットを使う時は、サイズを4の倍数にしてくれという警告

 

②Sprite Mode と Sprite Editor

Sprite画像が完成しましたので、Sprite画像の設定を見て行きたいと思います〜まずはSprite ModeとSprite Editorについてです!

 

f:id:hiyotama:20150511112720p:plain

 

Sprite Modeは、画像を1枚の画像として扱うか(Single)、画像を複数枚に分割して扱うか(Multiple)を選択することができます〜Multipleを選択した場合、Sprite Editorボタンから画像編集画面を開くことができ、Unity上で画像の分割を行うことができます〜

 

Sprite画像はなるべく1枚にまとめておき分割して使ったほうがアプリを起動した時の負荷が少なくなるので、なるべく1枚の画像にまとめましょう〜

 

画像の分割方法については、以下の記事に詳しく書いてありますので、ご参照下さい!

 

hiyotama.hatenablog.com

 

逆に複数枚の画像を1枚にまとめる方法は、次のPacking Tagにて紹介致します〜

 

 ③Packing Tag

アプリ起動時に複数の画像を1つの画像にまとめてくれるSprite Packerという機能が、以前はPro版でのみ使えたのですが、Unity5から無料版でも使えるようになりました〜そして、Sprite Packerを使う際にどの画像とどの画像を1つにまとめるかを指定するのが、Packing Tagの役割です〜

 

そもそもなぜ複数の画像を1つの画像にまとめる必要があるのかというと、アプリを動かした時の負荷軽減になるからです〜ゲーム起動時の負荷の指標は、ゲーム画面からStats>Statistics>SetPass callsで確認できます〜

 

f:id:hiyotama:20150511122237p:plain

SetPass calls:  1

 

Sprite Packerにて複数の画像を1枚にまとめると、このSetPass callsを抑えることができるというわけです〜実際に見てみましょう〜

 

f:id:hiyotama:20150511122428p:plain

f:id:hiyotama:20150511122433p:plain

f:id:hiyotama:20150511122438p:plain

f:id:hiyotama:20150511122444p:plain

 

様々な色のひよこを用意しました〜こちらの画像を全てProjectビューへインポートし、Texture TypeをSprite(2D and UI)、Packing TagをUI、Generate Mip Mapsをfalse、Filter ModeをPoint、Override for StandaloneをtrueにしFormatをTruecolorにして下さい〜

 

f:id:hiyotama:20150511122945p:plain

 

設定が終わったら全てのひよこ画像をHierarchyビューへ置き、SetPass callsを見てみましょう〜

 

f:id:hiyotama:20150511133005p:plain

ドラッグ&ドロップ!

 

ゲーム画面を見てみましょう〜すると、SetPass callsが5になっています!

 

f:id:hiyotama:20150511133222p:plain

 

正直5程度なら全然問題ない数値なのですが、この数値が大きくなってくると重いアプリとなってしまいます〜そこで、Sprite Packerの出番です!

 

それではSprite Packerを使ってみたいと思います〜全てのひよこを選択した状態でWindow>Sprite Packerを選択して下さい〜

 

f:id:hiyotama:20150511132330p:plain

Window>Sprite Packer

 

出てきたScripte Packerビューにて、Packボタンを押すと、Packing Tagが同じである4枚のひよこ画像を、1枚にまとめてくれます〜

 

 

f:id:hiyotama:20150511132628p:plain

Packボタンで画像がまとまる

 

この状態でゲームを実行すると・・・

 

f:id:hiyotama:20150511133631p:plain

SetPass calls: 2

 

このようにSprite Packerを使うことでSetPass callsを低くし、アプリの負荷軽減を実現することができました〜

 

④Pixels Per Unit

UnityのPositionやScaleで使われている数値は、メートルを表しています〜Cubeなんかを生成するとX、Y、Z共に1となっていますが、これは1辺1メートルの立方体を表しています〜

Pixels Per Unitは、画像のサイズを表すピクセルが、Unity内での1単位(1メートル)の中にどれだけ含まれるようにするかを設定しています〜つまり、Pixels Per Unitがデフォルトの100に設定されている場合、1メートルに100pxが入るように扱います〜

例えば先ほどのカラーひよこの画像は64px * 64pxであるため、Pixels Per Unitが100である場合、64cm * 64cmの大きさとなります〜

Pixels Per Unitを64に変えると、カラーひよこの画像は1m * 1mの大きさとなります〜

 

f:id:hiyotama:20150511135529p:plain

黄色いひよこだけPixels Per Unitを64にしてみた

 

⑤Pivot

画像の中心点を決定します〜2Dキャラクターが地面との接地判定をする時にはBottomにしておくと便利です〜

 

⑥Generate Mip Map

Generate Mip Mapをtrueにしておくと、画像がカメラから離れていき小さくなった時に表示する画像を、予め用意しておいてくれます〜

予め用意しておいてくれるためパフォーマンスは向上するので基本的にtrueにしておくことをオススメしますが、絶対に小さくならない場合(主にGUI)は、メモリの節約となるため、falseにしておいて下さい〜

 

⑦Filter Mode

Pointを選択するとクッキリと表示されるため、2Dドット絵はPointにしておくといいでしょう〜

Billnearを選択するとぼやけて表示されるため、解像度の高い画像はBillnearにしておくといいでしょう〜Trilinearも同じような感じです〜

 

⑧プラットフォームごとの設定

プラットフォームごとにSprite画像の表示サイズやフォーマットの設定を変えることができます〜基本的にDefaultの設定を決めておき、設定を特別変えたいプラットフォームがある場合個別に設定するという使い方で大丈夫です〜

 

f:id:hiyotama:20150511141358p:plain

左からWeb Player、Standalone、iOS、Android、Black Berry、WebGLの設定

 

Max Sizeは表示する画像の最大サイズを意味します〜

FormatのCompressedは、画像が圧縮されますので、多少画質は劣りますがサイズは小さくなります〜

16bitとTruecolorは圧縮しないため画質は高いですが、サイズは大きくなります〜ちなみに、Truecolorのほうが画質は上です〜

 

以上、ひよこエッセンスでした〜

ありがとうございました〜