2012年03月26日

[Unity] NGUIでSprite画像を使って複数のマークを表示してみた

NGUIを使うとDrawCallを抑えられるという話はよく聞くのですが、
その理由としてSprite画像を使っているらしい。
でもSprite画像って作ったことないなぁということで作ってみました。

今回は、NGUIのサンプルをもとに自分でSprite画像を用意して表示しています。


まずは、プロジェクトを新規作成。
パッケージでNGUIを選択します↓

20120326nguisplash001.png

メニュー > NGUI > Create a New UI

UI Toolウィンドウが開くので

Layer : Default
Camera : Simple 2D

として、[Create your UI]ボタンを押して、NGUIの土台を作ります↓

20120326nguisplash002.png

空のゲームオブジェクト(「nullPointer」という名前にしました)を作って、「Panel」の下に置きます。
それから、

メニュー > Component > NGUI > UI > Sprite(Basic)

を選択して、Sprite用のコンポーネントを追加します↓

20120326nguisplash003.png

Inspectorウィンドウを見るとUI Spriteのパラメーターとして「Atlas」があります↓

20120326nguisplash004.png

これにAtlasを用意して適用すればいけそうです。

Atlasを作ります。
Spriteと同様に、空のゲームオブジェクト(「MyAtlas」という名前にしました)を用意します。

メニュー > Component > NGUI > UI > Atlas

を選択して、Atlas用のコンポーネントを追加します↓

20120326nguisplash005.png

Inspectorウィンドウを見ると、今度はMaterialが必要そうです。
Materialを用意します。

Projectウィンドウで右クリック > Create > Material

と選択して、Materialを作成します(「MySprite」という名前にしました)。
Inspectorウィンドウを見ると、ここにSprite用の画像を設定すればよさそうです↓

20120326nguisplash006.png

Sprite用画像はこんな感じにしました↓
サイズは256x256です。
※テクスチャサイズは2のべき乗

20120326nguisplash007.png

アルファチャンネルもあります。

20120326nguisplash008.png

ファイル形式はtarga(32 bits/pixel)です。
ファイル名は「mysprite.tga」にしました。
Unityにインポートしたら、Inspectorウィンドウで

Wrap Mode : Clamp
Filter Mode : Trilinear

として、[Apply]を押して適用します。

20120326nguisplash009.png

これで画像の用意ができました。
これまでの手順をさかのぼりながら、不足していたところを埋めていきます。

Projectウィンドウで「MySprite」を選択します。
テクスチャに「mysprite.tga」をドラッグして適用します。
Shaderは、

Unlit > Transparent Colored

にします↓

20120326nguisplash010.png

これでMaterialの準備ができました。

次にAtlasを準備します。
Hierarchyウィンドウで「MyAtlas」を選択します。
Materialのパラメーターに、先ほどの「MySprite」をドラッグして適用します↓

20120326nguisplash011.png

すると、↑のようにパラメーターが増えます。
Add/Deleteの欄に[New Sprite]ボタンがあります。
これを押して、Sprite用画像から4つのマークを切り取ります。

[New Sprite]ボタンを押します。
まずは四角マークを切り取りたいので、

Edit Name : square
Dimensions : Left(0), Top(0), Width(128), Height(128)
Border : Left(0), Top(0), Right(0), Bottom(0)

とします。
ちゃんと切り取られているか確認したいので、

Show : Atlas

とします↓

20120326nguisplash012.png

同じ手順で、「丸(circle)」「三角(triangle)」「星(star)」を用意します↓

20120326nguisplash013.png

NGUIのサンプルにならって、MyAtlasをProjectウィンドウにドラッグしてプレファブ化しておきます↓

20120326nguisplash014.png

これでAtlasの準備ができました。

もう少しです(自分に言い聞かせている)。
Hierarchウィンドウの「nullPointer」ゲームオブジェクトを選択します。
InspectorウィンドウのAtlasパラメーターに先ほどの「MyAtlas」プレファブをドラッグして適用します。

すると、パラメーターが増えるので、

Sprite : square, circle, triangle, star

を切替えることで表示したいマークを選択できます↓

20120326nguisplash015.png

これで1枚のSprite画像から複数のマークを表示できるようになりました。
手順としてまとめると長かったですが、慣れれば数分で用意できます。

この方法は次のアプリアップデートで使っています。
今後もこうやって少しずつノウハウを貯めていって、アプリに反映させていきたいです。
posted by be-style at 09:30| Comment(0) | Unity
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]