UnityのiTweenを試してみる その１ Move系

初めまして、株式会社ZOOA(ゾーア)のzobと申します。[<a href="https://twitter.com/ZOB_By_Zooa_Inc">@twitter<a>]<a href="https://zob.zooa.co.jp/?utm_source=qiita&utm_medium=social">
<img src=https://qiita-image-store.s3.amazonaws.com/0/252896/fda6f773-e8f8-f220-04a0-85cdbef56201.jpeg "logo.png">
弊社はフリーランスや、個人事業主、給料UPを目指している方向けに高単価求人案件配信サイト(ZOB)も運営しておりますので是非ご覧ください!
</a>

本日より技術ブログをQiitaで色々と書いていきますので、よろしくお願いいたします。

弊社で検証した結果をドンドンQiitaに書いていきます！

# iTween

iTweenはUnityで有名なライブラリの一つです。

<a href="https://www.assetstore.unity3d.com/#!/content/84?aid=1101lIAt"><img src="https://api.assetstore.unity3d.com/affiliate/embed/package/84/icon" alt="iTween" width="128" height="128" /></a>

オブジェクトを、スクリプトでアニメーションさせたい時にとっても便利です！

検証で使用したUnityバージョンは以下の通りです。
Unity2018.1.0f2

今回はiTweenで基本となる移動系のメソッドを一通り検証したのでまとめてみました。

## iTween.MoveTo
MoveToは**指定した座標位置**にアニメーション移動します。

使い方は以下の通りです。

```ruby:
iTween.MoveTo(gameObject, iTween.Hash("x", 5f));
```

```ruby:iTweenTest.cs
public class iTweenTest: MonoBehaviour
{
	void Start ()
    {
        // Start時にX座標5まで移動
        iTween.MoveTo(gameObject, iTween.Hash("x", 5f));
    }
}
```

上記スクリプトでは、**X座標の5**の位置まで移動します。
※現時点のX座標から5を加える、という意味ではないので注意

この四角いキューブが……
![image.png](https://qiita-image-store.s3.amazonaws.com/0/252896/1c17994f-4305-a655-ebb8-d6e18a9be600.png)

ここまで移動します。たった一行で移動アニメーションができるのはいいですね！
![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/feb4c1bc-d535-a95d-0a4a-3aa032b88a85.gif)

iTween.Hashは、以下の通り複数の値を指定できます。


```ruby:
iTween.MoveTo(gameObject, iTween.Hash("x", 5f, "y", 5f));
```

```ruby:
iTween.MoveTo(gameObject, iTween.Hash("x", 5f, "z", 5f));
```

```ruby:
iTween.MoveTo(gameObject, iTween.Hash("y", 5f, "z", 5f));
```

XYZ座標3つ指定することができます。

```ruby:
iTween.MoveTo(gameObject, iTween.Hash("x", 5f, "y", 5f, "z", 5f));
```

以下のように、Hashで同じ座標を２回以上指定すると動かない(エラーが出る)ので注意が必要です。

```ruby:
iTween.MoveTo(gameObject, iTween.Hash("z", 5f, "z", -15f));
```

## iTween.MoveUpdate

MoveUpdateはMoveToと同じ**指定した座標位置**にアニメーション移動します。


```ruby:
iTween.MoveUpdate(gameObject, iTween.Hash("x", 5f));
```

MoveToとの違いは、**Updateで呼ばないと移動アニメーションされない**という点です。

```ruby:iTweenTest.cs
public class iTweenTest: MonoBehaviour
{
	void Update ()
    {
        // Update時にX座標5まで移動
        iTween.MoveUpdate(gameObject, iTween.Hash("x", 5f));
    }
}
```
※StartでMoveUpdate呼び出し
![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/377ef666-0288-90c4-890d-83b6c4fd8c5d.gif)
すごくわかりにくいですが、ほんの少しだけ動いています。

※UpdateでMoveUpdate呼び出し
![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/c49bc031-c52d-ae5d-73f6-1c9ad2f25c6c.gif)


MoveUpdateはマウス座標、タッチした座標に移動する等、動的に移動座標が変わる時に使うと便利です。

## iTween.MoveFrom

MoveFromは**指定した座標位置から現在の座標位置に移動**します。

```ruby:
iTween.MoveFrom(gameObject, iTween.Hash("x", 5f));
```

以下のようにX座標5から、配置時の位置に移動しています。
![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/28dda967-e895-ca6d-c4a1-2e40e71c4eb2.gif)

## iTween.MoveBy

MoveByは**現在の座標から指定した値だけ移動**します。

```ruby:
iTween.MoveBy(gameObject, iTween.Hash("x", 5f));
```

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/f7cfbdc7-bd7b-924e-2751-395319abdead.gif)

MoveToと比べると、MoveByの移動位置の違いがわかると思います。

## iTween.MoveAdd

MoveAddもMoveByと同じく**現在の座標から指定した値だけ移動**します。

```ruby:
iTween.MoveAdd(gameObject, iTween.Hash("x", 5f));
```

MoveByとの違いは、**iTweenのアニメーション実行中でも利用が可能**という点です。
わかりやすい例として、以下のスクリプトを試してみましょう。

```ruby:
iTween.MoveBy(gameObject, iTween.Hash("x", 10f, "time", 3f));
iTween.MoveAdd(gameObject, iTween.Hash("y", 5f, "time", 1f, "delay", 0.5f));
iTween.MoveAdd(gameObject, iTween.Hash("y", -5f, "time", 1f, "delay", 1f));
```

以下のようにX座標の移動アニメーション中に上下に動きます。
![image.gif](https://qiita-image-store.s3.amazonaws.com/0/252896/c924fb44-c8dc-4cd2-8b73-07e2ff079dd2.gif)


# まとめ
iTweenを利用することで、移動アニメーションをスクリプトで制御させることが簡単に実現可能です。
次回もiTweenの検証結果をまとめていきたいので、今後ともよろしくお願いします！

・技術検証協力　荻野雄季([Twitter](https://twitter.com/YuukiOgino), [Qiita](https://qiita.com/YuukiOgino))

---

**UnityのiTweenを試してみる** 
その1 Move系←今ココ
[その2 Rotate系](https://qiita.com/zob_by_zooa_inc/items/cc5dba551a0470475b5e)
[その3 Scale系](https://qiita.com/zob_by_zooa_inc/items/0632b292515c67e80b22)
[その4 Shake系](https://qiita.com/zob_by_zooa_inc/items/4cfb30d6cd12ec616918)
[その5 Punch系](https://qiita.com/zob_by_zooa_inc/items/c6723e5124955ba0224a)


---

株式会社ZOOA(ゾーア)
詳細は[こちら](https://zob.zooa.co.jp/?utm_source=qiita&utm_medium=social)

---