kikki's tech note

技術ブログです。UnityやSpine、MS、Javaなど技術色々について解説しています。

NGUIの画像をスクリプトでコントロール

今回はNGUIの画像をC#で変更する方法について共有します。

NGUIでの衝突(当たり)判定

今回は、以下の図のように前回、最後の応用で作成したアイコン画像にスクリプトを追加し、クリックすると画像が変わる処理を設定します。
f:id:kikkisnrdec:20140213211809j:plain

この時注意すべきこととして、以下の図のようにスクリプトを追加するアイコンが一番手前であることが重要です。
f:id:kikkisnrdec:20140213205127j:plain

衝突判定の追加

それではアイコン画像にスクリプトを追加していきます。
まず以下の図のように、アイコン画像に衝突判定を追加します。
f:id:kikkisnrdec:20140213205729j:plain

Unityでは、衝突判定として「Collider」を採用しています。
Colliderをスプライトやメッシュ、オブジェクトに設定することで、クリックやドラッグといったイベント、ColliderとColliderとの衝突を検知できるようになります。

スクリプトの追加

次に以下の図のように、スクリプトを追加します。
f:id:kikkisnrdec:20140213210542j:plain

上記追加したスクリプトをダブルクリックし、Mono DeveloperかVisual Studioで開きます。
※開発環境の設定方法については、今回述べません。
すると以下のシンプルなソースコードが見られ、ここを編集していきます。

using UnityEngine;
using System.Collections;

public class Icon : MonoBehaviour
{
    // Use this for initialization
    void Start()
    {
    }

    // Update is called once per frame
    void Update()
    {
    }
}

そして以下の通りにクリックイベントを追加します。

using UnityEngine;
using System.Collections;

public class Icon : MonoBehaviour
{
    public bool IsChecked = false;

    // Use this for initialization
    void Start()
    {
    }

    // Update is called once per frame
    void Update()
    {
    }

    /// <summary>
    /// NGUIで予め登録されているクリックイベントです。
    /// </summary>
    void OnClick()
    {
        // NGUIのコンポーネント「UISprite」を取得
        var sprite = GetComponent<UISprite>();
        this.IsChecked = !this.IsChecked;
        // メンバ変数のフラグでAtlasのSprite画像を切替
        if (this.IsChecked)
        {
            sprite.spriteName = "item_fish";
        }
        else
        {
            sprite.spriteName = "item_manapotion";
        }
    }
}

実行結果

以下の図のように、アイコンをクリックするたびに画像が切り替わる処理が設定されます。
f:id:kikkisnrdec:20140213212231j:plain

補足
上記画像のように、スクリプト内でPublicで宣言した変数は、Unityでの実行時に挙動を確認できます。
ここで上手くデバッグ実行して確認しましょう。

総括

今回は、NGUIでイベント処理を登録する方法について共有しました。
ゲームらしくユーザからの入力を受け付ける実装方法について、学べたかと思います。
次回もNGUIについて共有できたらと思います。


※無断転載禁止 Copyright (C) kikkisnrdec All Rights Reserved.