NGUIの画像をスクリプトでコントロール
今回はNGUIの画像をC#で変更する方法について共有します。
NGUIでの衝突(当たり)判定
今回は、以下の図のように前回、最後の応用で作成したアイコン画像にスクリプトを追加し、クリックすると画像が変わる処理を設定します。
この時注意すべきこととして、以下の図のようにスクリプトを追加するアイコンが一番手前であることが重要です。
衝突判定の追加
それではアイコン画像にスクリプトを追加していきます。
まず以下の図のように、アイコン画像に衝突判定を追加します。
Unityでは、衝突判定として「Collider」を採用しています。
Colliderをスプライトやメッシュ、オブジェクトに設定することで、クリックやドラッグといったイベント、ColliderとColliderとの衝突を検知できるようになります。
スクリプトの追加
次に以下の図のように、スクリプトを追加します。
上記追加したスクリプトをダブルクリックし、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"; } } }
実行結果
以下の図のように、アイコンをクリックするたびに画像が切り替わる処理が設定されます。
補足
上記画像のように、スクリプト内でPublicで宣言した変数は、Unityでの実行時に挙動を確認できます。
ここで上手くデバッグ実行して確認しましょう。
総括
今回は、NGUIでイベント処理を登録する方法について共有しました。
ゲームらしくユーザからの入力を受け付ける実装方法について、学べたかと思います。
次回もNGUIについて共有できたらと思います。