Aizu-Progressive xr Lab blog

会津大学のVR部であるA-PxLの部員が持ち回りで投稿していくブログです。部員がそれぞれVRに関する出来事やVRにちなんだことについて学んだことを書いていきます。

連絡はサークルTwitterのDMへお願いします。
「面白法人カヤックVR分室」としても活動しています。詳細はこちら

"iTween" を使ったアニメーション作成

こんにちは、会津大VR部1年の森川です。
今回はチーム開発の時に使ったAseets「iTween」に関しての簡単な使い方をまとめていきたいと思います。


iTweenとは

Unity上でアニメーションクリップを作ってAnimetorをいじる方法ではなく、スクリプト上で簡単にアニメーションができる便利なAseetsです。
このAseetsは無料で使うことができるので使ってみるしかないですね! f:id:aizu-vr:20171105171912j:plain

使い方

 今回は例として、
  1. x方向に1秒で5移動
  2. その場でy方向に3秒で720°回転
  3. アニメーション終了後に消滅
 をiTweenを使って作っていきたいと思います。

 サンプルコードはこちら

f:id:aizu-vr:20171105160550p:plain:w400

 コードを簡単に説明していきます。

iTween.MoveBy(引数1,引数2)
 引数1のオブジェクトの現時点でのpositionから、引数2で指定した位置まで移動させる。
iTween.RotateAdd(引数1,引数2)
 引数1のオブジェクトで前に行ったアニメーション(ここではMoveBy)に追加で、引数2で指定した向きまで回転させる。

「MoveBy」「RotateAdd」の他に「MoveTo」やら「ScaleFrom」などがありますが、これらに関してはココでは詳しく説明はしません。簡単にまとめると

  • Move◯◯ → Position(オブジェクトの位置)
  • Rotate◯◯ → Rotation(オブジェクトの向き)
  • Scale◯◯ → Scale(オブジェクトの大きさ)

という感じに、使い分けていきます。

今度はiTween.Hashの中身を見ていきます。今回は要素がたくさんあるRotateAddの方を説明していきます。

iTween.Hash( "key1", 値1, "key2", 値2, … )
このように記述することにより「key1に関して値1を実行、key2に関して値2を実行…」と指定することができます。

  • "y",720, → y方向に720°回転

  • "time",3.0f,  → 3秒間で回転させる

  • "delay",1.0f, → 開始時間を1秒遅らせる

  • "oncomplete","aaaaa" → RotateAddのアニメーションが終了した後、aaaaaというメソッドを呼ぶ

コードの説明は以上です!
最後にこのコードを動かしたいオブジェクトにアタッチすれば動かすことができます。画像見る限りちゃんと動いてますね。

f:id:aizu-vr:20171105173212p:plain
(画像小さくてすみません)

最後に

いかがでしたでしょうか?
私はiTweenを触って「こんな簡単にアニメーション作ることできるのか、それに見やすい!」と思いました。皆さんもそう思ってることでしょう(多分w)。私自身まだまだiTweenを触り尽くせてないので、「これを使って何か面白いもの作れたらな」と思っております。

参考にしたサイトのリンク先はこちら
【Unity】iTweenの使い方 / お試し【入門】 - 腐りかけエンジニアのブログ

【Unity Asset】iTweenがすごく便利だった | GMOメディア エンジニアブログ

先ほどのアニメーションメソッド(MoveBy等)に関してはこちら

【Unity】iTweenの使い方 / アニメーションメソッド【入門】 - 腐りかけエンジニアのブログ

  

会津大学VR部の部員が持ち回りで投稿していくブログです。特にテーマに縛りを設けずに書いていきます!