2012年03月29日

[Unity] NGUIで画像切替え表示を試してみた

NGUIを使って2D画像をパタパタアニメのように画像を切替えて表示できるか試してみました。

※本記事で登場する「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)

20120329nguianimation001.png

InspectorウィンドウのAtlasに以前作成した「MyAtlas」を適用すると、
・circle
・square
・star
・triangle
を選択することで画像を切替えることができます↓

20120329nguianimation002.png

ここで1つテスト。
NGUIで表示している画像を非表示にしてみます。

空のオブジェクト(名前は「NGUIController」)を作り、そこにスクリプト(名前は「NGUI_Controller」)を適用します↓

20120329nguianimation003.png

スクリプト↓
------------------------------------
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";
}
}
}
----------------------------
実行結果↓

20120329nguianimation004.png

これで画像の切り替えができました。
今回は簡素な画像を使いましたが、ちゃんとしたアニメーション用の画像を用意して
時間で制御して画像を切替えればNGUIでのアニメーション表示が出来そうです。

実際の動作はこちらで確認できます↓
http://be-style.jpn.com/unity/20120329/
posted by be-style at 09:17| Comment(0) | Unity
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]