Home > Development > iTween Visual Editor

iTween Visual Editor

Please visit the main page for the visual editor as that is the only spot kept up to date.

Update: Fixed! Well, worked around, which is just as good. There is a Unity bug that is causing lots of problems right now. Until this is fixed I would recommend not using the visual editor.

If you’ve been around the Unity world you may have run into the iTween library. It’s a system for animating various thing in your scene, from positions to rotations to scales to color, and even sound volume! It’s a pretty nifty library but I felt it was missing some usability. For example, in a scene if all I want to use iTween for is to have an object float across my screen repeatedly, I’d need to create a whole class just for one line of code such as this:

iTween.MoveTo(gameObject,{"x":10,"time":4,"looptype":"loop"});

On a one-off basis this wouldn’t be bad, but what if you were making a game where you had lots of levels and each one had some subtly different values for the movement pattern of the objects in it. Well, you’d be writing a lot of tiny throwaway classes which really clutters up your project and is just plain annoying. So I got to thinking about how you could write a script you attached to your GameObject that could store the data for a tween and then activate the tween when the scene starts (or wait until it’s activated programmatically). The result is the iTween Visual Editor which can make even fairly complex tweens quite simple. Here is a tween that is moving the GameObject to the camera’s Transform while looking at position (10,0,0 and using an inOutCubic easing type and finally using a pingPong loop type.

Usage is pretty simple. Just attach an iTweenEvent component to the GameObject you want to tween (you can also use the Component/iTween/iTweenEvent menu item). Then choose the type of tween you want and the options for that tween. Click play to see your tween in action.

You can get the editor as a Unity Package file here.
If you’re interested in the source code, the repository lives here.

NOTE: This only works with Unity 3.0 and later, it will not compile under Unity 2.6.

Please submit any bug reports or suggestions to david (at) koontzfamily (dot) org

Advertisements
Categories: Development Tags: , ,
  1. Blenderificus
    October 27, 2010 at 8:12 pm

    awesome work!!! thank you for sharing. iTween rocks, and even more so thanks to your great addition here!

  2. October 27, 2010 at 8:30 pm

    Awesome indeed! I love it!

  3. Cerberus
    October 28, 2010 at 7:24 am

    Thanks for sharing, it’s greatly appreciated.

  4. October 30, 2010 at 7:51 am

    Nice job man!
    Thanks for sharing!

  5. November 1, 2010 at 6:37 pm

    wow, very nice! thanks

  6. Breno Azevedo
    November 4, 2010 at 6:23 am

    Excellent, that’ll prevent me from adding a TON of mini-scripts for every tiny little itween-prone event in the game. Thanks a bunch! 🙂

    • Breno Azevedo
      November 4, 2010 at 7:28 am

      Just a little drawback, it won’t work in Unity 2.6 due to the lack of the System.Linq library 😦

      • dkoontz
        November 4, 2010 at 4:32 pm

        Yep, it’s Unity 3 only. If you really needed it on 2.6 you could rewrite the part that’s using Linq, it’s nothing critical.

  7. Pete
    November 4, 2010 at 9:36 pm

    Thats Ace!
    Thanks For sharing it!

  8. November 6, 2010 at 11:08 am

    A 1000 thanks for the amazing job!

  9. Spoke
    November 7, 2010 at 10:16 am

    Hi
    After few compil all value from editor component was lost and unity speak about file missing !!!!!

  10. dkoontz
    November 7, 2010 at 12:15 pm

    Spoke, I’ve updated the post to inform users of this. There is a bug in Unity that is causing problems here. You can follow any updates on this problem at this thread: http://forum.unity3d.com/threads/65217-iTween-Visual-Editor

    • Spoke
      November 7, 2010 at 12:45 pm

      Ok thanks for this info dkoontz.

  11. Spoke
    November 7, 2010 at 2:37 pm

    Hi again me 🙂
    a little error for me here:
    iTween.MoveTo(gameObject,{“x”:10,”time”:4,”looptype”,”loop”});

    I think you would said this :
    iTween.MoveTo(gameObject,{“x”:10,”time”:4,”looptype”:”loop”});

    sorry but now I need to test without your nice tool 😦

    • dkoontz
      November 8, 2010 at 2:52 pm

      Spoke: yes that was a typo, thanks for pointing it out.

  12. Shabazzster
    November 7, 2010 at 11:17 pm

    Great Job! Thanks! and I hope that bug gets fixed soon.
    ~K

  13. dkoontz
    November 9, 2010 at 2:42 am

    Ok, new version is out which works around the bug. Go get it!

  14. Shabazzster
    November 9, 2010 at 12:48 pm

    Seems like it wants to work at times, and then most times I get a message that says “Getting Control x’s position in a group with only x controls when doing Repaint.” There after, I get a “null reference exception on every other event.”
    When the event is assigned to the game object as a component, I was unable to name the event. It seems that the name field won’t respond.
    Sometimes every text field ( Name,delay), chooses to not respond and then spits back that “null reference exception.

    I think you are getting closer to fixing all the bugs though. Good Luck. And we really appreciate the hustle in getting this thing out to the community.

    • dkoontz
      November 9, 2010 at 1:36 pm

      After updating to the new version (please delete all the old files and re-import the Unity package), did you remove the iTweenEvent from your GameObject and re-add it? There might be some old cruft lying around on the old object. I’ll do more testing.

  15. Shabazzster
    November 9, 2010 at 2:32 pm

    Okay I’ll double check for any old files. And yes I tried the re-add , and still got some of the same messages …some of the times.

  16. Shabazzster
    November 9, 2010 at 2:35 pm

    Oh..I also was wandering wether or not I need a newer version of iTween? The ;last version I have is 2.0 I got about 1.5 month ago.. has Itween updated in the last about 45days?

  17. dkoontz
    November 9, 2010 at 10:21 pm

    You don’t need a bleeding edge version of iTween, any 2.x version should be fine.

    Also, I was able to reproduce an error message when adding a new iTweenEvent to a GameObject, but it only comes up once and doesn’t effect anything. Are your tween settings actually getting wiped out still?

  18. Shabazzster
    November 9, 2010 at 11:19 pm

    No, the tween setters are fine, and the tweens actually work. I just see those error messages(which makes one concerned), but the values don’t make any difference.
    For example a simple MoveTo on a basic cube seems to move the same distance weather i set it to 30 or 2, it makes no difference in the values, it just moves to the same distance.

    So it seems that the tween(ness) part is working just fine. The values are not as accurate as I would expect , and I haven’t yet called the tweens from other scripts such as “OnTriggerEnter or OnMouseDown”. I wanted to make sure that the Plugin is stable enough before i do that.

    How’s it going on your end ? Has any one else come across these errors or am i a special case?

  19. Shabazzster
    November 9, 2010 at 11:22 pm

    here is a funny site to ease the tension of C# Check out http://gamersfilm.com/homepage

    you will love it!
    ~K

  20. Hugo
    November 9, 2010 at 11:35 pm

    Crashes on me whenever i try to play 😦

  21. dkoontz
    November 10, 2010 at 6:31 am

    Hugo :

    Crashes on me whenever i try to play :(

    Could you give me more info? What platform, what tween, maybe the stacktrace? Please email that info to david (at) koontzfamily (dot) org.

  22. Shabazzster
    November 10, 2010 at 2:42 pm

    Unity just released 3.1 fyi.

  23. December 9, 2010 at 8:29 am

    Hey,
    I was wondering if their is any way to get the code that it generates to edit that directly? Or is that not possible?

    Thanks!
    Justin W.

    • dkoontz
      December 9, 2010 at 6:34 pm

      There’s no code generation going on. What happens is the values you set in the editor get stuffed into a Dictionary and serialized, then you you start the app, those values are deserialized, the appropriate iTween method (MoveTo, RotateBy, etc.) is called and those values are passed in as the HashTable parameter that all iTween methods take.

      • December 9, 2010 at 7:10 pm

        Oh okay, I think I understand… Thanks for the clarification =).

  24. Ashish Verma
    December 23, 2010 at 2:22 am

    GREAT JOB.

    Awsome work man. thanks for sharing.
    You and itween rocks…

  25. benraj
    March 23, 2011 at 8:11 am

    how can i get a particular node value………… i have a path for a object , i like to turn the object when the object reached a particular node in my node

    • dkoontz
      March 23, 2011 at 4:59 pm

      The path system is not mine, I just integrated support for the visual editor and the paths it generates. For help with paths I’d suggest you visit some of the support areas for regular iTween.

  26. July 17, 2011 at 12:19 pm

    I seem to be getting a compile error when I use both itween visual editor and itween visual path editor. Assets/iTweenEditor/Editor/iTweenPathEditor.cs(10,9): error CS0433: The imported type `iTweenPath’ is defined multiple times
    Obviously itween.cs is in there too many times but the tab under Components doesn’t show up???
    Thanks in advance.

    • dkoontz
      July 17, 2011 at 3:56 pm

      The iTween visual editor includes a copy of the path editor, so if you import the path editor separately you’ll get 2 copies. Just delete either the standalone copy of the path editor, or the one that came with the visual editor.

  27. October 3, 2011 at 10:11 am

    very cool tool ! 🙂 thanks for offering it!

  28. Sabrina
    June 23, 2012 at 12:25 pm

    I am currently trying to create a Automatic door and unfortunately iTween does not show up in Component, which means I do not have the iTween Visual Editor. 😦 Please Oh please help

  29. cherry
    June 28, 2012 at 6:44 am

    I would like the tween I created to be inactive at start and then via script activate it manually. I read that this is possible, I just don´t know how?
    Could someone tell me the code to start the tween manually?

    • dkoontz
      June 28, 2012 at 7:15 pm

      The iTweenEvent component has a GetEvent method to find a particular event and a Play method to start the iTween running.

  30. T4D
    October 6, 2013 at 1:01 am

    how do you trigger a iTween Visual Editor event with code ?

  1. October 27, 2010 at 2:30 pm
  2. October 27, 2010 at 4:24 pm
  3. February 10, 2011 at 7:02 am
  4. February 14, 2011 at 12:36 pm
  5. November 8, 2011 at 8:12 pm
  6. March 6, 2012 at 6:53 pm
  7. July 24, 2013 at 8:38 am
  8. March 4, 2014 at 4:40 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: