[NGUI] 画像をまとめるAtlasとは?
GUI部品のプッシュボタンやスライダの描画は、あらかじめ用意した画像を反映させることで行われます。
これらは1つのテクスチャにまとめて「Atlas」という名で呼ばれます。
このAtlas内に存在する複数の部品はSpriteと呼ばれます。
Atlasに変換するツールはNGUIに用意されています。
このAtlasの作り方と使い方を説明します。
Atlasの作成
素材の作成
まずはプッシュボタンとプログレスバー、背景で使う画像を作成しました。
透明/半透明にする部分はアルファを指定します。pngファイルなどで保存。
サイズは左から、32x32/32x32/13x31/32x32/256x256とまちまちです。
Unityに画像をインポート
Unityで適当なフォルダを作って、素材画像をインポート。
このときのファイル名がそのままSpriteの名前になりますので、他と同じでない名称で分かりやすい名前をつけるようにしてください。
Atlasの作成
Projectウィンドウで右クリックして、ポップアップメニューから「NGUI」-「Open Atlas Maker」を選択。
- Atlas Makerウィンドウで任意の名前を入力。
- Projectウィンドウ内のSpriteとして入れる画像を選択。Atlas Makerウィンドウの下に対象画像が列挙されます。
- Createボタンを押す。
すると、Atlasのprefabが生成されます。
InspectorのSprite DetailsのSpriteボタンを押して、格納されたSpriteを選べるのを確認します。
Atlasの利用
では、作成したAtlasを使ってSpriteを配置してみましょう。
「NGUIでボタンを配置」「背景の指定(sprite)」も参照。
Spriteを配置
シーンのUI Rootを選択して、メインメニューの「NGUI」-「Create」-「Sprite」を選択。
SpriteのInspectorでUISpriteのAtlas/Spriteを選択すると、描画が反映されます。
ただ、この状態ではSpriteを大きくするとボタンらしからぬ枠のボケが出てしまいます。
Atlas内のSpriteのBorder指定
対象AtlasをProjectウィンドウで選択して、ボタンのSpriteを選択。
Borderという部分ははじめ0,0,0,0ですがここに値（ピクセル値）を入れます。
Borderの指定でピクセル外は拡大縮小から除外されます。
Sprite TypeをSlicedに
シーンに配置したSpriteを再び選択。
InspectorのUISpriteの「Sprite Type」で「Sliced」を選択します。
すると、Spriteのサイズを大きくしても周囲の枠はきれいに配置されます。
これを利用したプッシュボタンの実装方法は「独自のSpriteでボタンを作る」を参照。