スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:--:-- : スポンサー広告 ]

【Unity】 NGUI(3.x)でUI表示+3Dも扱おう ① - Atlasを作る

NGUIをとにかく扱ってみましょうな記事その①、Atlas編。

UnityでUIを簡単に表示したい、かつ色々動き等をつけたい時に超強力なアセット、NGUI

既に有名だし実績も相当なものがあるので何も言うことはない。
$95とお高いけど買っておいてまず損は無いので、Unityで何かちゃんとしたものが作りたいならほぼ必須アセットだろう。

(時々タイムセールで半額になってたりするので、そこが狙い目。自分もそこで買った。)


実は最近初めてまともにこのNGUIを使い始めた。
ちょっと前にバージョンが3.xにメジャーアップデートして、大分変わった(使いやすくなった)ようだ。

2.x時代に仕事でNGUIが使うに値するものなのか調査していた時に、
チュートリアルを全部調べたりサンプルを作ったりしたのだが、その時より確かに色々とスッキリしている。


というわけで、NGUI3.xの使い方というか自分がこうやって今使っているというのを
備忘録な感じで記事に残していこうと思う。

これが少しでもNGUIをこれから触る人の為になれば幸い。




NGUIをインポートする

NGUIを購入したら、Window→Asset Storeでウィンドウを開いてログイン後、
下の画像の赤枠のボタンをポチると、自分が取得したアセット一覧が出るはず。



一覧からNGUIの項目を探し、Importを押すとインポート出来る。

インポート後はこんな感じ。(今回はVer.3.0.8



これでNGUIを使えるようになる。




Atlasを作る

まずNGUIで知っておかないといけないこととして、
NGUIで画像付きのUIを表示するためにはそのUI用の「Atlas」を作成する必要がある。

アトラスは手っ取り早く言うと「色々な画像のテクスチャを1枚にまとめたもの」
アプリやゲームで表示される画像というのは、最終的には1枚のテクスチャの1部分、という風になっているのがほとんどだ。

何故そうなっているのかというと説明するのもめんどくさいのだが、
バラバラのテクスチャを1枚1枚ロードするのと、1枚にまとめられたものを1回でロードするのでは
ロードの回数が1回でいいよね、って説明であっ、察し...となってほしい所。

あとテクスチャのサイズが2のべき乗になっていないといけないという仕様の端末が多く、
中身がスカスカのテクスチャが出来たりするので、じゃあまとめられるものはまとめましょう、
その1枚のテクスチャの1部分をUV情報で取得して、表示の際に使いましょう、という古代からの知恵である。

NGUIは基本、このアトラスを用意してからの作業になる。
アトラスの作成は非常に簡単。


今回は http://sozai.7gates.net/docs/trump/ から画像素材を拝借させていただき、
トランプの画像のアトラスを作ることにする。

「トランプ素材一括ダウンロード」をクリックしてDL→解凍し、
出てきたtrumpフォルダをプロジェクトツリーのどこでもいいのでまるごと追加。




次に NGUI→Open→Atlas MakerAtlas Makerを開く。






アトラスの名前をNew AtlasからTrumpにし、
この状態で、trump/pngフォルダ内の全ての画像を選択する。




そして「Create」ボタンを押すと、フォルダ内にアトラスが作成される。
これでアトラスの作成は完了だ。




アトラスは

・プレハブ
・マテリアル
・テクスチャ


の3つが1度に同じ名前で作成される。

この3つが1セットで1つのアトラスを成す。


後でアトラスの変更(テクスチャ画像の追加等)をしたい時の為に、分かりやすいようにアトラスは専用のフォルダを作って
そこにこの3つをつっこんでおくのがいい
だろう。






次回は

これでNGUIで何か画像を表示する為の準備は完了。

次回は実際の表示と、座標系・他解像度対応についてやります。

[ 2014年01月25日 19:02:09 : Unity ]

カレンダー

プルダウン 降順 昇順 年別

11月 | 2018年12月 | 01月
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -


全記事表示リンク

全ての記事を表示する

検索フォーム

リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。