こんにちは、KTです。

前はUnity関連のメモと同じところに書いてたけど多くなりそうだったので分割しました。

NGUI（Next-Gen UI）の使い方なんかをまとめていきます（こっちも多くなりそうならさらに分割するかも）

1. 縦横スクロールビューの実現

縦方向スクロールビュー上に横方向のスクロールビューを配置して、iOSのメールアプリのような動作を実現する場合、NGUIのスクロールビューのみではスクロール方向によってスクロール対象を変更する方法が見当たらなかったので拡張してみました。

※　以前載せていた方法だと、DrawCall数が多くなりすぎて動作が重くなっていたため、修正しました

以下の動作を実現します。

• 縦方向スクロール→テーブル全体のスクロール
• 横方向スクロール→セル毎のスクロール

まずは、以下のような構成でオブジェクトを配置します。

UIRoot(NGUI)
+- Camera
+- ScrollView
+- TableContents
+- CellContents

次に、NGUIのUIDragScrollViewを継承したスクリプトを作成し、以下のように実装します。

using UnityEngine;
using System.Collections;

public class MyDragScrollView : UIDragScrollView {
    enum Mode {
        None,
        Horizontal,
        Vertical,
    }
    Mode currentMode;
    Vector2 totalDelta = Vector2.zero;

    void Start() {
        currentMode = Mode.None;
    }

    void OnPress(bool pressed) {
        if (currentMode != Mode.None) {
            base.scrollView.Press(pressed);
        }

        // Initialized
        currentMode = Mode.None;
        totalDelta = Vector2.zero;
    }

    void OnDrag(Vector2 delta) {
        totalDelta += delta;
        switch (currentMode) {
        case Mode.None :
            // ドラッグ角度（垂直が0）
            float angle = Mathf.Rad2Deg * Mathf.Atan2 (Mathf.Abs (totalDelta.x), Mathf.Abs (totalDelta.y));

            if (angle > 80f) {
                // drag Horizontal
                currentMode = Mode.Horizontal;
                // UIScrollViewにスクロールさせずに、手動でlocalPositionを変更
                transform.localPosition += new Vector3 (delta.x, 0f, 0f);
            } else {
                // drag Vertical
                currentMode = Mode.Vertical;
                base.scrollView.Press(true);
                base.scrollView.Drag(); 
            }
            break;
        case Mode.Horizontal :
            transform.localPosition += new Vector3 (delta.x, 0f, 0f);
            break;
        case Mode.Vertical :
            base.scrollView.Drag();
            break;
        }
    }
}

このスクリプトをCellContentsにアタッチして、スクロールビューをセットすればOKです。

ポイントはOnDragで渡されるdeltaの角度が横向きの場合は手動でセルを横スクロールし、角度が縦向きの場合のみUIScrollViewでスクロールしている点です。

2. UILabelの自動リンク

NGUIのUILabelには、リンク機能や文字装飾機能が備わっています。

• リンク機能

UILabelのテキストの、処理を行いたい文字列を[url=(url)]文字列[/url]のように[url=〜]で囲うことで、その文字列がリンクとなります（NGUI上でクリックイベントが受け取れるようになる）

例えば、UILabelに以下のコンポーネントを付与した場合、Test >> click me << Testと表示され、click meの部分をクリックするとfugaとログ出力されます。

public class Hoge : MonoBehaviour {
    UILabel label;

    void Start() {
        label = GetComponent<UILabel>();
        label.text = "Test >> [url=fuga]click me[/url] << Test";
    }

    void OnClick() {
        string text = label.GetUrlAtPosition (UICamera.lastWorldPosition);
        Debug.Log(text);
    }
}

• 文字装飾

上記の[url]タグ以外にも、[b]タグ（太文字）、[i]タグ（イタリック）、[u]タグ（アンダーライン）、[(16進6桁)]〜[-]（文字色変更）などが用意されています。

3. ローカライズ（多言語化）

NGUIには、多言語化を簡単に実現出来るLocalizationという機能があります。

まずは、多言語化用のファイルを用意します。

Resourcesディレクトリ（無ければ作りましょう）の下に、Localization.csvファイルを作成しましょう。

一行目に、KEY,言語名１,言語名２,・・・のようにして、使用する言語を定義します。KEYという名前は変更出来ません。

二行目以降に、キー名,言語１のテキスト,言語２のテキスト,・・・のようにして各言語毎の文字列を定義していきます。

追加したら一度Unityを再起動しましょう。（重要）

Localization.csv 例

KEY,English,Japanese
Button1,Click Me,クリック
Text1,This is test.,テストメッセージ

次に、多言語化対象のオブジェクトに、UILocalizeコンポーネントを追加します。

多言語化出来るのは、UILabelとUISpriteのみとなります。UILabelの場合はテキストに、UISpriteの場合はスプライト名に反映されます。

コンポーネントを追加したら、作成したcsvファイルの任意のキーをKeyにセットします。

そうすると、Previewが表示され、EnglishとJapaneseにそれぞれcsvファイルで設定したテキストが表示されているはずです。（もし表示されなければ、NGUIのサンプルのLocalizationファイルが残っていないか確認してください。何故かそちらが優先して読み込まれることがあるようです）

最後に、iOSやAndroid等で動かした時に、システムの言語設定を反映するようにしましょう。

以下のスクリプトを適当なオブジェクトに貼付けてください。

public hoge : MonoBehaviour {
    void Start() {
        if (Application.systemLanguage == SystemLanguage.Japanese) {
            Localization.language = "Japanese";  // csvファイルで指定したキー

        } else {
            Localization.language = "English"; // csvファイルで指定したキー
        }
    }
}

これで多言語化は完成です。

3.5. 動的にスプライトを切り替える場合の多言語化

動的にスプライトを切り替える場合の多言語化についても、基本的には同じやり方でOKです。

Localization.csvを作ってUILocalizeコンポーネントを対象のスプライトに追加しましょう。

あとはスプライトを切り替えている箇所でスプライトではなくUILocalizeのkeyを切り替えて反映するだけです。

public class Hoge : MonoBehaviour {
    // スプライト切り替え時にコールされるメソッド
    public void SwitchSprite() {
        UILocalize localize = transform.GetComponent<UILocalize> ();
        if (localize == null) {
            // UILocalizeがAddされていない場合はスプライトを切り替える
            this.sprite.spriteName = "Hoge";
        } else {
            // UILocalizeコンポーネントがあればkeyを変更
            localize.key = "HogeSprite";
            // keyの変更を反映
            localize.value = Localization.Get (localize.key);
        }
    }
}

Localization.csv

KEY,English,Japanese
HogeSprite,hogesprite_en,hogesprite_ja

これでOKです。