[Unity][iTween]iTween Visual Editor導入と解説

  • SumoMe

iTweenを簡単に扱うためのアセット「iTween Visual Editor」の導入と解説を行います。iTweenの複雑なハッシュを覚える必要がないため非常に負荷が少なくてすみます。

iTween Visual Editorとは

このエディタはDavid Koontz氏がオープンソースプロジェクトとして開発しています。トゥウィーン(アニメーション補間?)を実現するBob Berkebile氏開発の「iTween」そして、同じ作者が制作しているiTweenのパスを設定する「iTween Path Editor」を内包する形で、Inspectorでトゥウィーンアニメーションを設定できるようにするアセットです。バージョン0.6.1ではこれら2つのアセットを初期段階から内包しており、このエディタを導入するだけで、「iTween」そして「iTween Path Editor」を利用することができます。

具体的には公式に動画がありますので、一度観てイメージを掴んだほうが良いかもしれません。

以下に、上記であげたプロジェクトのページを挙げます。


iTween Visual Editor
http://dkoontz.wordpress.com/itween-visual-editor/


iTween for Unity by Bob Berkebile (pixelplacement)
http://itween.pixelplacement.com/index.php


Visual iTween path editor ‹ pixelplacement.com
http://pixelplacement.com/2010/12/03/visual-editor-for-itween-motion-paths/

導入

UnityのAsset Storeウインドウを開き、「itween visual editor」で検索すると、候補に上がりますので、該当ページを開きインポートしてください。この時、ログインを求められる事がありますが、Unityを初回起動した時のアカウントでログインしてください。以下はwebブラウザ用のページを参考までに挙げておきます。


Asset Store
https://www.assetstore.unity3d.com/#/content/180

インポート画面がでたら、すべてインポートしてください。

iveimport

インポートが終了したら、メニューの「Component」->「Script」->「iTween」、「iTween Event」、「iTween Path」が追加されていれば導入成功です。

使い方

iTweenの使い方は素晴らしい解説ページがありましたので、そちらを参照してください。また、iTween公式のドキュメントと一緒に読むと、すべての使い方は容易に想像がつくようになりますので、お勧めです。


ActionScript入門Wiki – Unity – トゥイーンライブラリiTweenを使用する
http://www40.atwiki.jp/spellbound/pages/1604.html

Inspectorからイベントを設定

アニメーションさせたいオブジェクトに対して、「iTween Event」コンポーネントを付加します。付加すると以下の様なコンポーネントがInspectorに表示されます。

iveinspector

Nameはこのイベント(動き)についての名前です。スクリプトから参照する場合はここに名前をつけます。
Show Icon In Scene チェックボックスは、イベントコンポーネントを付加したオブジェクトにSceneウインドウ内ではアイコンを目印に表示する機能です。
Play Automatically チェックボックスは、オブジェクトが生成された瞬間にイベントを実行する機能です。オフにした場合は、イベントをスクリプトから実行させなければいけません。
Event TypeはiTweenの機能を選択できます。例えば、Move Toでは現地点からの移動になりますし、Rotate Toでは回転になります。
それ以外の項目はiTweenのハッシュを視覚しやすいように列挙しているだけです。必要な機能にチェックを入れ、パラメータを設定するだけで機能します。

使用例

今回は、Cubeオブジェクトを作成し、iTween Eventコンポーネントを付加しました。

パラメータには以下のような設定をしました。

  • x : 5
  • time : 1
  • loopType : PingPong

自動実行

Play Automaticallyにチェックを入れ、パラメータを設定し、実行ボタンを押すとすぐに実行されます。これは、生成された瞬間にイベントが実行されたためです。

手動実行

Play Automaticallyのチェックを外している場合、スクリプトからイベントを実行しなければなりません。そのために、さらにイベントに名前をつける必要があります。
今回は以下の内容に変更しました。

  • Name : slide
  • C# Scriptファイルを作成「bouceButton」として作成
  • 「bouceButton」をCubeオブジェクトに付加

bouceButtonはスクリプトは以下のとおりです。

using UnityEngine;
using System.Collections;

public class bounceButton : MonoBehaviour {
	void OnGUI () {
		if(GUI.Button(new Rect(10,10,50,40),"Start")){
			iTweenEvent.GetEvent(gameObject,"slide").Play();
		}
		if(GUI.Button(new Rect(10,60,50,40),"Stop")){
			iTweenEvent.GetEvent(gameObject,"slide").Stop();
		}
	}
}

このスクリプトは、Startと書かれたボタンを押すと、イベントが開始し、Stopと書かれたボタンを押すと、イベントが停止します。このような開始や停止は以下のように記述します。

イベント開始

iTweenEvent.GetEvent(イベントを実行するオブジェクト,"イベント名").Play();

イベント停止

iTweenEvent.GetEvent(イベントを実行するオブジェクト,"イベント名").Stop();

このようにイベント名を決めておけば、好きなタイミング(今回はボタンでしたが)で実行や停止をすることができます。

まとめ

iTweenは非常に強力なツールです。しかし、本当の強味は動的にパスを変更できたり、動きを制御できるところにあると思います。その点、このアセットは簡単に使うことを重視していますので、万能というわけではありません。使い場所を選んで計画的にご利用ください。たぶん、慣れるとこのアセットは使わなくなりそう…