最近AssetStoreでランキング1位を続けている「NGUI: Next-Gen UI」。

NGUI: Next-Gen UI
http://u3d.as/content/tasharen-entertainment/ngui-next-gen-ui/2vh

「第2回 渋谷Unity技術勉強会xコロプラ事例発表」のLTを聞いて
とても試してみたくなったので購入してみました。

2D系アセットまとめ(LTでの資料)
http://bit.ly/zICYeM

いざ使ってみようとしたとき、チュートリアルやフォーラムがあるので
それを読めばよさそうです。

チュートリアル、サンプル:
http://www.tasharen.com/?page_id=140

Unity Forum:
http://forum.unity3d.com/threads/114833-NGUI-%28Next-Gen-UI%29-demo-amp-final-feedback-request

私も読んでみたのですが、読んだ限りはGUIを作るまではわかったのですが、
プログラムとの連携までは辿り付けませんでした。

ということで、上記チュートリアルを参考にして
「スライダーを画面に配置して、その値を画面に表示する」
までの流れをまとめてみました。

--------------------------------------------------------------------------------

NGUIを購入した後からスタートします。
NGUIを購入すると、AssetStoreのボタンが「Import」に変わるので、それをクリックして
プロジェクトにインポートします↓



すべての要素をインポートすると、UnityのメニューにはNGUIに関する項目が追加され、
ProjectウィンドウにはNGUIのセットが追加されます↓



これでNGUIを使う準備ができました。
今回は新規にスライダーを作成せず、サンプルにある既存のスライダーを使います。

Assets\NGUI\Examples\Scenes\Tutorial 7 - Slider.unity

を開きます。
UI Root(2D)の階層の中に「Slider - Vertical」があります。
これが縦方向のスライダーです。
これをProjectウィンドウにドラッグして、プレファブ化します。
これで別のシーンでも利用できるようになりました↓



新しいシーンを作成します。
デフォルトで入っている「Main Camera」は削除しておきます。
↑説明のため削除しましたが、最終的に出力するときには必要でした（汗
NGUIメニュー > Create a New UI を選択します↓



UI Tool ウィンドウが表示されるので、デフォルト設定のまま[Create Your UI]を押します↓



Hierarchyウィンドウに、UI Root(2D)が追加されました↓



最下層の「Panel」に、先ほどプレファブ化した「Slider - Vertical」を追加します。
これで、サンプルと同じスライダーを画面に表示することができました↓



次に、スライダーの値を表示するためのLabelを用意します。
NGUIメニュー > Create a Widget を選択します↓



Widget Tool ウィンドウが表示されます。
初期状態だと、「Atlas」と「Font」が空なので、

Assets\NGUI\Examples\Atlases

の中から適当なAtlasとFontを選択してドラッグします↓



AtlasとFontが設定されると、[Add To]ボタンが有効になります。
今回はTemplateで「Label」を選択し、追加先を「Panel」にします↓



HierarchyウィンドウにLabelが追加されます。
Labelの内容はInspectorウィンドウで変更することができます↓



これでGUIの準備が完了です。

次に、スライダーとラベルを連携させるための準備をします。
空のゲームオブジェクトを作ります。
スクリプト(C#)を新規作成して、先ほど作成したゲームオブジェクトに適用します↓



次に、プログラムから検索しやすくするために「slider」「label」タグを追加しておきます↓



「Label」ゲームオブジェクトには「label」タグを適用↓



「Slider - Vertical」ゲームオブジェクトには「slider」タグを適用↓



「Slider - Vertical」ゲームオブジェクトを選択してInspectorウィンドウを表示します。
Event Receiverパラメーターに、先ほど作成したゲームオブジェクトを適用します。
Event Receiverを使うことで、スライダーを動かしたときにパラメーターを受け取ることができるようになります↓



ここで重要なのがFunction Nameの「OnSliderChange(※デフォルト値)」です。
プログラムの中で「OnSliderChange」の関数を定義することで、スライダーのイベントが発生したときに
受け取ることができます。

最後に、スライダーとラベルを連携させるプログラムを書きます。
JavaScriptでの記述がうまくいかなかったので、C#で書きました。
JavaScriptでの実現方法がわかる方がいたら教えてください……。
コメントをいただき、JavaScriptで実現できました！

------------------------------------
■C#
using UnityEngine;
using System.Collections;
public class Slider_Controller : MonoBehaviour {
    private UILabel label;
    void Start () {
        // Get "UILabel" Component
        label = GameObject.FindWithTag("label").GetComponent();
    }
    // slider EventReceiver
    public void OnSliderChange(float input) {
        label.text = "" + input;
    }
}
------------------------------------
■JavaScript
●事前に以下の作業が必要です
(1)「Plugins/NGUI」のフォルダを作る
(2)「NGUI/Scripts」配下の「Interaction」「Internal」「Tweening」「UI」フォルダを(1)のフォルダに移動

private var label : UILabel;
function Start () {
    label = GameObject.FindWithTag("label").GetComponent("UILabel");
}
// slider EventReceiver
function OnSliderChange(input:float) {
    label.text = "" + input;
}
------------------------------------

プレビューしてみると、スライダーの動きに連携してラベルが更新されます↓



実際の動作は こちら で確認できます。

NGUIにはまだまだたくさんの機能があるので、これから少しずつ勉強していきたいと思います。