腐りかけエンジニアのブログ

学生時代ろくに勉強してこなかった人間が、プログラムに挑戦してみる。

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

みなさん、こんにちは。

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

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

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

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

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

 

準備

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

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

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

 次に、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, ここ );

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

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

パターン1

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

パターン2

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

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

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

x・y・z

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

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

position

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

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

time

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

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

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で指定した動きをループさせることができます。タイプは3つあります。

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

まとめ

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

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

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