!!![NGUI] 画像をまとめるAtlasとは?

GUI部品のプッシュボタンやスライダの描画は、あらかじめ用意した画像を反映させることで行われます。
これらは1つのテクスチャにまとめて「Atlas」という名で呼ばれます。
このAtlas内に存在する複数の部品はSpriteと呼ばれます。
Atlasに変換するツールはNGUIに用意されています。

このAtlasの作り方と使い方を説明します。

!!Atlasの作成

!素材の作成

まずはプッシュボタンとプログレスバー、背景で使う画像を作成しました。
透明/半透明にする部分はアルファを指定します。pngファイルなどで保存。
{{ref_image unity_ngui_atlas_01.png}}
サイズは左から、32x32/32x32/13x31/32x32/256x256とまちまちです。

!Unityに画像をインポート

Unityで適当なフォルダを作って、素材画像をインポート。
{{ref_image unity_ngui_atlas_02.png}}
このときのファイル名がそのままSpriteの名前になりますので、他と同じでない名称で分かりやすい名前をつけるようにしてください。

!Atlasの作成

Projectウィンドウで右クリックして、ポップアップメニューから「NGUI」-「Open Atlas Maker」を選択。

*Atlas Makerウィンドウで任意の名前を入力。
*Projectウィンドウ内のSpriteとして入れる画像を選択。Atlas Makerウィンドウの下に対象画像が列挙されます。
*Createボタンを押す。
{{ref_image unity_ngui_atlas_03.png}}

すると、Atlasのprefabが生成されます。
{{ref_image unity_ngui_atlas_04.png}}
InspectorのSprite DetailsのSpriteボタンを押して、格納されたSpriteを選べるのを確認します。

!!Atlasの利用

では、作成したAtlasを使ってSpriteを配置してみましょう。
「[[NGUIでボタンを配置|unity_ngui_first]]」「[[背景の指定(sprite)|unity_ngui_background]]」も参照。

!Spriteを配置

シーンのUI Rootを選択して、メインメニューの「NGUI」-「Create」-「Sprite」を選択。
SpriteのInspectorでUISpriteのAtlas/Spriteを選択すると、描画が反映されます。
{{ref_image unity_ngui_atlas_11.png}}
ただ、この状態ではSpriteを大きくするとボタンらしからぬ枠のボケが出てしまいます。
{{ref_image unity_ngui_atlas_12.png}}

!Atlas内のSpriteのBorder指定

対象AtlasをProjectウィンドウで選択して、ボタンのSpriteを選択。
Borderという部分ははじめ0,0,0,0ですがここに値（ピクセル値）を入れます。
Borderの指定でピクセル外は拡大縮小から除外されます。
{{ref_image unity_ngui_atlas_13.png}}

!Sprite TypeをSlicedに

シーンに配置したSpriteを再び選択。
InspectorのUISpriteの「Sprite Type」で「Sliced」を選択します。
すると、Spriteのサイズを大きくしても周囲の枠はきれいに配置されます。
{{ref_image unity_ngui_atlas_14.png}}

これを利用したプッシュボタンの実装方法は「[[独自のSpriteでボタンを作る|unity_ngui_custom_button]]」を参照。