【Unity NGUI】Tween機能の利用する・Spriteの画像を変更する

第2回目も引き続き、[NGUI]の勉強です。 前回、ボタンを表示しましたが、今回はこのボタンを押して、オブジェクトを動かしていきたいと思います。 【前回】【Unity NGUI】ボタンの作成・テクスチャアトラスの作成 | albatrus.com

NGUI : Tween

NGUIには「Tween」と呼ばれるスクリプトが用意されています。 これを利用すれば、簡単にオブジェクトを制御することができます。

2014-8-28-dsaa.png

これを前回作成したButtonの[UIButton]に入れていきます。

2014-8-28-dpsaa.png

注意点

「Tween」スクリプトには、複数のメソッドがあります。 中には、ボタンに指定するとエラーが出るものがありますので注意をして下さい。

2014-8-28-dpmsaa.png

私が確認した所次の3つを利用すればいいでしょう。

  • PlayForward:通常
  • PlayReverse:逆再生
  • Toggle:ボタンを押す毎に、「通常再生->逆再生->通常再生.......」の繰り返す

Tweenのパラメーター

各Tweenは大体以下の様な項目があります。

(例)Tween Position

2014-8-28-dsada
  • From : 初期の値
  • To : 変化後の値
  • PlayStyle : Once(1回再生),Loop(繰り返し),PingPong(再生->逆再生)
  • AnimationCurve : 再生のスピードを調整する
  • Duration : 再生の時間
  • StartDelay : 再生するまでの待ち時間
  • TweenGroup : 複数のTweenを再生するときのTagのようなもの
  • ignoreTimeScale : タイムスケール適用時に再生スピードを変化させるかどうか。
  • OnFinished : 再生が終わった後に呼び出すオブジェクトのメソッド

Spriteを変更する

Spriteで利用している画像を途中で変更するにはどうすればいいでしょうか? これは[NGUI]の機能ではできないので、スクリプトを書きます。 このスクリプトをButtonを押した時に呼び出して上げれば、画像が変わります。 [c] public class buttonAction : MonoBehaviour {

UISprite _sprite;

// Use this for initialization
void Start () {

    _sprite = this.GetComponent<UISprite>();
}

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

}

 public void ChangeSprite(){

    //画像ファイルの名前を指定
    _sprite.spriteName = "button-yes";

    // スプライトの位置・サイズ調整
    UISpriteData data = _sprite.GetAtlasSprite();
    UIRect rect = _sprite.GetComponent<UIRect>();

    Vector3 tmpPos = rect.transform.localPosition;
    rect.SetRect(0, 0, data.width, data.height);  
    rect.transform.localPosition = tmpPos; 
}

} [/c] 【参考】[Unity] [NGUI] スクリプトからAtlasのスプライトを変更する | ftvlog

最後に

本当は「アニメーション」をやりたかったのですが、[NGUI]のスプライトで利用するやり方が見つからなかったので次回以降Spriteをアニメーションをさせる方法を勉強したいと思います。