※本記事で登場する「MyAtlas」は過去の記事で作ったAtlasを使用しています↓
[Unity] NGUIでSprite画像を使って複数のマークを表示してみた :
http://blog.be-style.jpn.com/article/54633023.html
はじめに、NGUIの土台を用意します。
メニュー > NGUI > Create a New UI
Layer : Default
Camera : Sinple 2D
[Create Your UI] を押して土台を作ります。
空のゲームオブジェクト(名前は「item」)を作って、Panelゲームオブジェクトの子要素にして
Sprite(Basic)コンポーネントを適用します↓
メニュー > Component > NGUI > UI > Sprite(Basic)
InspectorウィンドウのAtlasに以前作成した「MyAtlas」を適用すると、
・circle
・square
・star
・triangle
を選択することで画像を切替えることができます↓
ここで1つテスト。
NGUIで表示している画像を非表示にしてみます。
空のオブジェクト(名前は「NGUIController」)を作り、そこにスクリプト(名前は「NGUI_Controller」)を適用します↓
スクリプト↓
------------------------------------ゲームオブジェクト自体を無効にしたので表示されません。
using UnityEngine;
using System.Collections;
public class NGUI_Controller : MonoBehaviour {
void Start() {
GameObject.Find("item").active = false;
}
}
------------------------------------
本題です。
この「item」ゲームオブジェクトに適用されている4つの画像を切替え表示してみます。
これができれば、画像Spriteを使ってパタパタアニメを表示できるはずです。
簡単な確認方法として、先ほどのスクリプトを「ボタンを押して画像を切替える」という内容にしてみます↓
----------------------------実行結果↓
using UnityEngine;
using System.Collections;
public class NGUI_Controller : MonoBehaviour {
private UISprite sprite;
void Start() {
sprite = GameObject.Find("item").GetComponent();
}
private int counter = 0;
void OnGUI() {
if (GUI.Button(new Rect(10, 10, 100, 100), "change")) {
counter = counter >= 3 ? 0 : counter + 1;
}
// change Image
if (counter == 0) {
sprite.spriteName = "circle";
} else if (counter == 1) {
sprite.spriteName = "square";
} else if (counter == 2) {
sprite.spriteName = "star";
} else if (counter == 3) {
sprite.spriteName = "triangle";
}
}
}
----------------------------
これで画像の切り替えができました。
今回は簡素な画像を使いましたが、ちゃんとしたアニメーション用の画像を用意して
時間で制御して画像を切替えればNGUIでのアニメーション表示が出来そうです。
実際の動作はこちらで確認できます↓
http://be-style.jpn.com/unity/20120329/