おしぼりエンジニアブログ

おしぼり会社のボンボンがエンジニアで頑張っているお話

【Unity】iTweenの使い方 / アニメーションメソッド【入門】

Unity iTween

iTweenの使い方のアニメーションメソッド編になります。
前回の話の続きで、今回はiTweenのアニメーションメソッドの内容です。
doggy.hatenablog.com

アニメーションメソッド

前回で使えていないものが結構あったりします。
ですが、基本的に応用的な使い方でいけちゃいます。

iTween.Move◯◯

TransformクラスのpositionまたはlocalPositionを制御してオブジェクトを移動させるメソッドです。
MoveTo以外にも色々あり、用途によって使い分けることになります。

  • MoveTo : 現在の位置から指定した位置へ移動させる
  • MoveFrom : 指定した位置から現在の位置へ移動させる
  • MoveBy : 現在の位置から指定したオフセット分を加算した位置へ移動させる
  • MoveAdd : 他の移動アニメーションにさらに移動を追加する

iTween.Rotate◯◯

TransformクラスのeulerAnglesまたはlocalEulerAnglesを制御して、オブジェクトを回転させるメソッドです。
こちらもRorateTo以外にも色々あります。また、単位は度( °)になります。

  • RotateTo : 現在の角度から指定した角度へ回転させる
  • RotateFrom : 指定した角度から現在の角度へ回転させる
  • RotateBy : 現在の角度から指定したオフセット分を加算した角度へ回転させる
  • RotateAdd : 他の回転アニメーションにさらに回転を追加する

iTween.Scale◯◯

TransformクラスのlocalScaleを制御して、オブジェクトを拡大させるメソッドです。
こちらも上記２つと同じく、４つあります。

  • ScaleTo : 現在の大きさから指定した大きさへ拡大させる
  • ScaleFrom : 指定した大きさから現在の大きさへ拡大させる
  • ScaleBy : 現在の大きさから指定したオフセット分を加算した大きさへ拡大させる
  • ScaleAdd : 他のスケールアニメーションにさらに拡大を追加する

iTween.◯◯Update

Updateの様な繰り返し呼ばれる場所で使用するメソッドです。

  • MoveUpdate : 指定したポジションに移動させる(カーソルや敵への追尾などに使ったりできます)
void Update()
{
    var targetPos = Input.mousePosition;
    var worldMousePos = Camera.main.ScreenToWorldPoint(targetPos); 
    worldMousePos.z = 10f;

    iTween.MoveUpdate(this.gameObject, iTween.Hash(
     	    "position", worldMousePos, 
	    "time", 2.0f)
    );
}

https://i.gyazo.com/6d87d8bd80b3d0ae3e95d9554f9ab4d8.gif

  • ScaleUpdate : 指定した大きさに変える。
void Update()
{
    var targetPos = Input.mousePosition;
    var worldMousePos = Camera.main.ScreenToWorldPoint(targetPos); 
    worldMousePos.z = 10f;

    iTween.ScaleUpdate(this.gameObject, iTween.Hash(
	"x", worldPosMouse.x, 
	"y", worldPosMouse.y,
	"time", 2.0f)
    );
}

https://i.gyazo.com/7733f34434f8f44553d9f338522702dd.gif

  • RotateUpdate : 指定した角度に回転させる。
void Update()
{
    var targetPos = Input.mousePosition;
    var worldPosMouse = Camera.main.ScreenToWorldPoint(targetPos);

    iTween.RotateUpdate(this.gameObject, iTween.Hash(
	"rotation", worldPosMouse * 20, 
	"time", 2.0f)
    );
}

https://i.gyazo.com/1f21018f4e6722b99776df104545da19.gif

iTween.Punch◯◯

一定の力を与えた後、ゆらゆらと揺れながらオブジェクトを元に戻すメソッドです。
(バネの様な弾力のあるアニメーションに使えたりします)

  • PunchPosition : 揺れながら元の位置へ戻る。
iTween.PunchPosition(this.gameObject, iTween.Hash(
	"y", 4,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 3.0f)
);

https://i.gyazo.com/663e7354121479b08f2e1895e884a67d.gif

  • PunchRotation : 揺れながら元の回転に戻る。

iTween.PunchRotation(this.gameObject, iTween.Hash(
	"z", 150,
	"delay", 1,
	"time", 3.0f)
);

https://i.gyazo.com/ac2fed759f216535d6daed430a7f4017.gif

  • PunchScale : 揺れながら元の大きさに戻る。(ポヨポヨ感がいい感じ！)
iTween.PunchScale(this.gameObject, iTween.Hash(
	"x", 3,
	"y", 3,
	"delay", 1,
	"time", 3.0f)
);

https://i.gyazo.com/cec456c8fad5947beae9a2c25339c489.gif

iTween.Shake◯◯

ランダムの値を加算して揺らすことができるメソッドです。
(ブルブル震える様なアニメーションに使うことができます)
例えば、ダメージを受けた時にUIを揺らす、カメラを揺らす等...。

  • ShakePosition : 震えた移動をさせる。
iTween.ShakePosition(this.gameObject, iTween.Hash(
	"y", 2,
	"x", 2,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/9a9977934af963a1550623f6f7c6b7ce.gif

  • ShakeRotation : 震えた回転をさせる。
iTween.ShakeRotation(this.gameObject, iTween.Hash(
	"z", 150,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/675038a5f1b54ba3dcc3deab9a4ff48f.gif

  • ShakeScale : 震えた拡大と縮小をさせる。
iTween.ShakeScale(this.gameObject, iTween.Hash(
	"y", 2,
	"x", 2,
	"delay", 1, // delayは確認用に少し遅らせているだけです。
	"time", 1.0f)
);

https://i.gyazo.com/c0143ff2c1a32bc70de80eae559f21bf.gif

iTween.ValueTo

こちらのメソッドは少し特殊な使い方ができます。
ValueToメソッド単体では何も変化させませんが、指定した開始値と終了値の間を時間経過によって変化させます。
なので、独自の処理を実行することもできます。
例で、色を変えるサンプルを作ってみました。

// 色を変えたい UI image を選択
[SerializeField] Image image;

void Start()
{
	iTween.ValueTo(this.gameObject, iTween.Hash(
		"from", Color.red,
		"to", Color.blue,
		"delay", 1, // delayは確認用に少し遅らせているだけです。
		"time", 2.0f, 
		"onupdatetarget", this.gameObject, 
		"onupdate", "OnUpdateColor")
	);
}

void OnUpdateColor(Color color)
{
	image.color = color;
}

https://i.gyazo.com/9bb0e6fa4b4e7509846be7bcb30d767f.gif

まとめ

アニメーションメソッドを一通り、紹介致しました。
とても便利なものが多いので、覚えておくととても役に立ちます！
iTweenの理解をもっと深めて、使えるものは使っていきたいですね。

現在、「Unity UI デザインの教科書」という本を読んでいるので、次回はUI関連の記事が書けたらと思います。

uGUIではじめるUnity UIデザインの教科書-Unity5対応

uGUIではじめるUnity UIデザインの教科書-Unity5対応

【Unity】iTweenの使い方 / お試し【入門】

iTween Unity

みなさん、こんにちは。

初めての記事は【iTween】というAssetを紹介していこうと思います。

iTweenはアニメーション全般が出来る、とても便利なAssetです。

早速、ダウンロードして使ってみましょう！

iTweenのAssetページはこちらです。

(今回は C#で書いていきます)

 

準備

確認用のプロジェクトを作り、iTweenをインポートしてください。

入れるのはiTween.csのみで大丈夫です！

そして、Hierarchyで右クリックをし、 GameObject->Cube を１つ生成します。

 次に、Cubeというスクリプトを作ってCubeにアタッチしてみましょう！

このキューブでアニメーションを試していきたいと思います。

ここで一度プロジェクトを保存しておきましょう。

（私は Assets/Scenes に Main  という名前で保存しました）
f:id:doggy_dog:20160208001603p:plain

使ってみる

早速、Cube.csに処理を書いていきたいと思います！
gist.github.com

上記のコードをCubeに書くと、このような動きになります。
「あれ？これだけのソースコードでこんな動きできるの！？」と思った方も少なくないかと思います。
これがiTweenの力です...。
https://i.gyazo.com/b750728c8cea33088de8f8dc782cd4ed.gif

iTween説明

では、先ほどのソースコードで何をやってるか説明していきたいと思います。
(この他にもありますが、今回は先ほどで使ったもののみの説明です)

iTween.MoveTo の引数1

iTween.MoveTo( ここ, iTween.Hash( "x", 1f ) );

動かす対象のオブジェクトを指定する引数です。
他のオブジェクトの参照を持ってきてここに指定し、動かしてあげることもできます。

iTween.MoveTo の引数2

iTween.MoveTo( this.gameObject, ここ );

どういった動きにするかを指定する引数です。

パターン１の様に、Hashテーブルを先に作っておき、後から登録するという方法もありますし、
iTween.Hashのようにパターン２で使っていたような書き方もできます。

パターン１

var moveHash = new Hashtable();
moveHash.Add ("x", 1f);
iTween.MoveTo( this.gameObject, moveHash );

パターン２

iTween.MoveTo( this.gameObject, iTween.Hash("x", 1f) ) );

私はいつもパターン２の書き方を使っています。
見易さで言えばパターン１な気もしますね。

上記はiTween.MoveToとなっておりますが、MoveToは気にしないでください。
今回のソースコードで使っているため、例としてあげています。

x・y・z

moveHash.Add ("x", 1f);
moveHash.Add ("y", 1f);
moveHash.Add ("z", 1f);

それぞれ、どの方向に力を加えるかを決められます。
引数２はどれだけ力を加えるか指定してあげます。

position

moveHash.Add ("position", new Vector3(0f, 0f, 0f));

x・y・zと同じ用途で使えます。
ポジションを２つ以上動かすのであれば、こちらの方が綺麗かもしれませんね。

time

moveHash.Add ("time", 2f);

アニメーション完了までの時間を指定できます。
また、timeが追加されていない場合は１秒でアニメーションが完了します。

delay

moveHash.Add ("delay", 1f);

アニメーションの開始時間を指定出来ます。

easetype

moveHash.Add ("easetype","easeInOutBack");

アニメーションに緩急をつけることができます。
(例えば、値をちょっとずつ加速するようにしたり、一気に減速するようにしたり...等)
色々な種類があるので、こちらのサイトを参考にするといいと思います。
easing_demo
また、上記のような書き方もあれば、iTweenクラスのものを使用した書き方もあります。

moveHash.Add ("easetype", iTween.easeType.easeInOutBack);

oncompletetarget

moveHash.Add ("oncompletetarget", this.gameObject);

アニメーションが終わった後に呼ぶメソッドを受け取るオブジェクトを指定してあげます。

oncomplete

moveHash.Add ("oncomplete", "AnimationEnd");

アニメーションが終わった後に呼ぶメソッド名を指定してあげます。
これを使う場合はoncompletetargetを指定してあげないと呼ばれないので注意です。

loopType

moveHash.Add ("loopType", "loop");

iTweenで指定した動きをループさせることができます。タイプは３つあります。

  • none : ループしない(このHashを入れない場合、これになります)
  • loop : ループさせる
  • pingPong : 往復アニメーションさせる。

まとめ

iTweenの実装はいかがでしたか？
UnityのAnimationも優秀なので事は足りますが、iTweenを使って拡張したスクリプトなども出来ますので、使い方を覚えて損はないと思います。
私もまだまだ、修行中の身なので一緒に覚えていきましょう！

また、MoveTo / RotateTo / ScaleTo 等のアニメーションメソッドについて今回は触れなかったので、次回のiTween記事に書こうと思います。

続きがこちら⇩
doggy.hatenablog.com

腐りかけたエンジニアがブログを始めました

趣味

こんにちは！初めまして、Doggyと申します。

去年からとある会社に入社したのですが、学生時代からの遊び呆け癖が治らず、2015年はほとんど勉強せず、遊んで終わってしまったのです・・・。 

このままでは腐ったエンジニアで人生が終わってしまうと不安になってきました。

そこで、今年はUnityを本格的に始めることにしました！

またそれに伴い、ブログも始めてみることに。

技術力は乏しいですが、ブログの内容としては

  • Unityで勉強した内容
  • Unityの実装方法
  • ゲームアルゴリズム
  • 趣味(ゲームや音楽...etc)

大体、こんな感じの内容を書いていこうと思っております。

ブログ自体初めてなので、見にくかったりすると思いますが、よろしくお願い致します！