Blog

Visual iTween path editor

I think the most useful and elegant feature of iTween has to be the ability to easily move objects along a smooth motion path as demonstrated in the “Moving on a path” example. However, setting up these paths can be difficult, tedious and is usually responsible for hierarchy bloat as a result of numerous null objects and gizmos being used to help visualize the paths. To overcome this difficulty and further push the ease of use in iTween, I’ve created a visual helper called iTweenPath which allows very simple path creation and visual editing for use with iTween motion paths.

Please note that in the demonstration video I’m utilizing the same object for each additional path but you could easily create new objects to “hold” each path to keep editing cleaner in the scene view.

Download

85 Comments

  1. zhx
    December 3, 2010 - Reply

    lovin this addition to iTween!!

  2. shabazzster
    December 3, 2010 - Reply

    Great tool- and beautiful presentation. Mono Develop really helps one understand the beauty of iTween.
    Thanks Again.
    ~K

  3. BigToe
    December 4, 2010 - Reply

    Really great job!

  4. Marukokujin
    December 5, 2010 - Reply

    This is Awesome

  5. December 6, 2010 - Reply

    Tremendous help to the community. And I’m talking about my community – the teens, teachers and artists who will use these tools in our East Village Dome. Bravo! @dpentecost

  6. December 6, 2010 - Reply

    Thank you so much for putting this out there. I was developing a similar tool for my own game and was having trouble getting it all figured out. Cheers!

  7. December 7, 2010 - Reply

    You’re doing amazing things with this Bob. I’m still deeply in love with your Doc tool though!!! And she doesn’t want me looking at other code.

  8. Jordan
    December 8, 2010 - Reply

    Very cool, great work!!

  9. Sagel
    December 8, 2010 - Reply

    OH,That so cool , I like it!

  10. Ahmad Jadallah
    December 15, 2010 - Reply

    Great, I am trying to make a camera walkthrough with this. I managed to get the camera to move along a detailed and smooth path but it is not look at where it is going. How can I rotate the camera so that it is actually looking at the path all the way?

    • December 16, 2010

      Yup! Check out the “orientToPath” parameter.

  11. Helmi
    December 16, 2010 - Reply

    cool,,, I Can’t thank enough….

  12. Ahmad Jadallah
    December 16, 2010 - Reply

    Hi Bob,

    I added “orientToPath” parameter and set it to true but to no effect. Here is my line of code now:

    iTween.MoveTo(gameObject, iTween.Hash(“path”, iTweenPath.GetPath(“walkthrough1″),”time”,60,”easetype”,iTween.EaseType.easeInOutSine,”orienttopath”,true));

    I tried “orientToPath” as well but no luck.

    • December 16, 2010

      Just tried your code and it worked. Please note that “orienttopath” uses the same length of time as your have set for your animation. In your case you are setting up a 60 second animation (which seems VERY long). So this means iTween will also apply 60 seconds to the “orienttopath”. To adjust this and have your “orienttopath” activate faster simply add a “looktime” as well with a value of around 1 or so. Please take a look at the iTween documentation for more hints on using the “look” features of iTween. Good luck!

  13. December 19, 2010 - Reply

    Bob,

    You continue to amaze.

    Love,
    Earl

  14. December 19, 2010 - Reply

    Just fixed an error someone found that occurs if you reload a scene that is using a path and throws: “An element with the same key already exists in the dictionary.”

    • December 19, 2010

      Thats great Bob thanks

  15. December 23, 2010 - Reply

    Update: Whenever the controlling object that holds the path is destroyed or the scene is left all paths that are registered in iTweenPath are removed to ensure no conflicts occur on scene reloading.

  16. December 31, 2010 - Reply

    […] December 30, 2010 dkoontz Leave a comment Go to comments Added integration with Bob’s iTween Path Editor. If you have iTween Path components on your game object you can just select one of them from a nice […]

  17. January 2, 2011 - Reply

    Update: Added a toggle to enable the visual representation of the path as well as some simple documentation for the GetPath() method.

  18. January 10, 2011 - Reply

    Very useful, thanks. I was going to edit the source to do this anyway but may I suggest that iTween Editor paths can be referred to by name? Having a drop down menu is nice but also very restrictive. The editor paths are stored in a static Dictionary so are available from anywhere.

  19. Alex Amsel
    January 10, 2011 - Reply

    Oops – ignore that – meant for the iTween Editor guy!!! Not the path editor 😉

  20. xpycT
    January 16, 2011 - Reply

    Hi!
    Assets/iTweenPath/iTweenPath.cs(50,17): error CS0103: The name `iTween’ does not exist in the current context
    Why?
    Thank you!

    • xpycT
      January 16, 2011

      RTFM 🙂
      Thank you!

    • January 16, 2011

      LOL.

  21. Colonel_Klink
    January 18, 2011 - Reply

    Amazing. I can’t tell you how much sweat and tears this has saved. Well done!

    • January 18, 2011

      Hearing that makes my sweat and tears worth it. Thanks for the support.

  22. me
    January 29, 2011 - Reply

    Yes Amazing Work Again!!! I love iTween!

    How would you call the path BoxIn in JavaScript?
    When I use
    iTween.MoveTo(gameObject, iTween.Hash(“path”, iTweenPath.GetPath(“BoxIn”), “time”,5));
    I get an error it doesn’t know what iTweenPath is?

    And I tried to Convert it to Javascript like this but of course this is wrong lol a little help Please:
    iTween.MoveTo(gameObject,{“path”:”BoxIn”,”time”:5});

    • January 30, 2011

      Try putting the iTweenPath.cs file in a “Plugins” folder. Let me know if that helps.

    • random_thankful_person
      May 18, 2011

      I had the same error, did what you just said and now it works fine! Thanks!!!

  23. me
    January 30, 2011 - Reply

    To Answer The Above question about converting that line to javascript it is javascript compatible even though the video does NOT show javascript it. When you install the package Dont forget iTweenPath.Cs has to go into the Plugins Folder and all will work fine. Thanks Again Bob! Truly absolutely Amazing!!!

  24. February 5, 2011 - Reply

    Do you have any suggestions as to where I might start looking for a way to tweak this to have the “parent” GameObject actually pass along its transformation?

    I’m working at a certain orientation but when I go to play/publish the game, I’ll tilt the object to reflect the accurate rotation. I think it’s easier to lay things out when it’s flat as opposed to make edits and alignments always on an angle.

    The parenting, of course, allows the child objects take that parent rotation in because the parent told it so, :).

    I’m not expecting you to develop anything like this logic, just wanted to get your thoughts on where to start looking in terms of knowledge for the solution.

    Take care!

    • February 5, 2011

      I might try to combine your waypoint stuff (which I’m currently using, but limited to straight lines) with the logic in this path editor. That way I can move the points around at once and rotate them using their parent.

      Wish me luck!

  25. papamook
    February 12, 2011 - Reply

    really loving iTween, I only found it this week, it has saved me heaps of time and has made everything I’ve attached it to move around so much nicer, so thanks for that.

    This iTweenPath looks absolutely amazing in your video I really cant wait to try it. However, I get this error in Unity:

    Assets/plugins/iTweenPath.cs(29,42): error CS0201: Only assignment, call, increment, decrement, and new object expressions can be used as a statement

    I can’t drag the iTweenPath script to a game object until the error has been cleared.. please say you can help! =)

    • February 12, 2011

      Are you trying to use this with Unity iPhone?

    • papamook
      February 13, 2011

      no, just plain old Unity 2.6.1. I have since solved what I wanted the paths editor for by using the PathExample.js for iTween but would still like to see this editor running 🙂

    • February 13, 2011

      Looks like it’s a problem with 2.6 since it uses an older version of .NET. I really don’t have the time to try to get this to work in 2.6 – any upgrade plans in your future to 3?

    • psamty
      February 21, 2011

      This is a fairly easy fix, simply create a Start() function and place the initialization code there.

    • February 21, 2011

      The issue that he is mentioning IS an easy fix with a simple Start method to initialize that array but there are other aspects that die in 2.6 as well. I just don’t have the time to make this backward compatible – sorry.

  26. roger
    February 21, 2011 - Reply

    Hi looks great Im on a mac the download link above comes up as a scrambled text page so I’m guessing a broken Link? thanks

    • February 21, 2011

      Looks like you are using Safari? Right-click the link and choose “Save Link As…”

  27. kapil
    February 26, 2011 - Reply

    Well can we use this the Path point at Runtime . How can we do that

    • February 26, 2011

      Ummmm, yup – the video shows it in action.

  28. kapil
    February 28, 2011 - Reply

    Can we Point this Begin and End Point at Run time .

  29. trent
    March 2, 2011 - Reply

    Just downloaded iTweenPath, but when I add the iTweenPath script to a GameObject, I get the following error:

    “Instance of iTweenPathEditor couldn’t be created because there is no script with that name.”

    That’s weird, because there is clearly a script with that name in my Assets/Plugins/iTween/iTweenPath/Editor folder. Do you know what’s wrong?

    • March 4, 2011

      Make sure ONLY C# files you need are in the Plugins folder. Keep everything else out in the Asset folder root – you may need to reorganize things slightly within the iTweenPathEditor since this was geared for C# usage but works perfect for JS if you place all of the C# files as I said. Hope this helps.

  30. SwampRabbit
    March 8, 2011 - Reply

    Is there any known issue with iTween Path Editor when used with Unity iphone?

    • March 8, 2011

      Yes – you might need to adjust some things. I don’t really have the time to make this compatible that far back – sorry.

  31. Livio
    March 31, 2011 - Reply

    Great Tool!! Thanks for sharing your amazing work!!!!

  32. May 9, 2011 - Reply

    Added an update via neoriley and added: “GetPathReversed()” for quickly getting an edited path in reverse.

    • Draco18s
      July 10, 2012

      Thanks for this! I came back to this page to try and find some documentation on the iTweenPath, and managed to stumble into this note. Thanks again!

  33. June 11, 2011 - Reply

    Bob, Thank you for this great editor, as well as the iTween code. What a great solution for many, many tasks! -Mike

  34. ninjaboyjohn
    June 13, 2011 - Reply

    Question: Is it possible to create a closed path, where the last node connects a curve to the first node for smooth movement throughout when used in a looping situation?

    Thanks for iTween and this great editor!

    – John

    • June 14, 2011

      Not built in but if you make the first and last points the same location iTween will correctly complete the loop so it’s smooth for you.

    • ninjaboyjohn
      June 15, 2011

      Cool – I’m able to get it to loop through the path continuously, but unless the overlapping first/last node is on a very smooth straight-away approach from both sides, the object will not make a curve through the overlap point.

      In your “Orbit” example using the manual method of path creation, the path curves smoothly through each point even when the first node is stretched to a tight angle. Any way to get that same functionality with the path editor?

      I’m using: easetype linear, speed, movetopath false, looptype loop, and I’m copying the X and Y values of the first point and pasting them into the final point. (Z is 0)

      Thanks again!

      – John

  35. Mark
    August 20, 2011 - Reply

    This is great ! But now i need to know how can i get my character to automatically connect to a path while ingame and move along it ? Thanks

    • August 22, 2011

      If I had a nickel for every time someone asked this…

      I’ll put together a demo scene soon to show how to pull it off.

  36. Cormac
    September 15, 2011 - Reply

    Sorry for posting in Two places, but this seems to have more answers than youtube.
    This is great, thanks pixel placement. I am? using this to make a camera fly through system. I have implemented GUI sliders so i can move forward and backward along the path at run time, thus i can then quickly move the nodes around in the editor to perfect the path i want before i do a screen capture. But the only problem is when i depress play the nodes reset to their original position. Any idea how i might go about saving the node positions position at run time so i don’t loose the edits?
    I have been trying to use Antares set of tools to save gameObject state’s at runtime, but to no avail
    Any kind of push in the right direction would be great
    Cheers

    Mac

    • September 20, 2011

      Hmm, that’s a tough one and I don’t have a quick answer for you other than cycling through all nodes with some sort of editor button that would inject all node positions into PlayerPrefs and then populate them back after the editor exists play mode. Sorry but you asked a difficult one.

  37. seedoubleyou
    October 10, 2011 - Reply

    Did anyone ever got this to work in Javascript? I had to make a separate script in C# to get it to finally work. That’s not a problem, it just would have saved me an hour if I’d known that some aspects of the editor just won’t work in JS (And if I’m wrong, someone please post the working Javascript… I’ll be glad to be wrong…)

    • October 10, 2011

      Yup, this works fine in JavaScript. Simply drop iTweenPath into a folder called Plugins.

  38. November 5, 2011 - Reply

    […] to spawn enemies and make them move but what I eventually settled on was iTween and its associated Visual Editor. With the editor, you lay out connected nodes visually in the scene and then in code, you tell […]

  39. February 8, 2012 - Reply

    Love the tool, dropped right in. and worked like a charm.

    Are you going to add the ability to change the orientation of the nodes? so that you can visually tweak object
    orientation on the path.

    Also, is there a way to have an “orientation path” and a “movement path”? like a turrent looking around while moving along a path. I am thinking on orientation nodes (vectors) placed along the path?

    • February 18, 2012

      Thanks! I’m still trying to find time for finishing up iTween 3 but I will be creating a new version of this with some nice additions natively integrated into the next version of iTween. Be patient!

  40. fred
    February 11, 2012 - Reply

    good job!i want to a gameobject move to and stop at one of the node in path.can i do it ?

    • February 18, 2012

      Not with how I have things currently set up. You could try using iTween’s PutOnPath and just use the percentages it calculates to try to hit your nodes.

  41. Piat
    February 15, 2012 - Reply

    Is there an updated version of this script or is it still meant to work? I currently get parsing errors and an inconsistent endings warning when trying to use it. When uncompressing it also seems to be missing a file extension.

    • February 18, 2012

      Not sure why you are having these issues. I just tested it and everything is working fine even in 3.5.

  42. gaoxiang
    March 2, 2012 - Reply

    How to create a path at runtime?beacuse I want let the camera to move a curve(like bezier) path,but the start point and end point will change depends the camera’s position.

  43. brombs
    April 2, 2012 - Reply

    Hi Bob,
    nice tool. I made a small extension (maybe you like it).
    1. on iTweenPath.cs add new field: public float radius;
    2. on iTweenPathEditor:
    private field: private bool showNGon = true;
    and (around the line: 78 – after: “EditorGUILayout.EndHorizontal();”) …

    showNGon = EditorGUILayout.Foldout(showNGon, “N-side path (NCount – 1)”);
    if (showNGon && _target.nodeCount > 2){
    EditorGUILayout.BeginHorizontal();
    _target.radius = Mathf.Max(0.1f, EditorGUILayout.FloatField(“Radius”, _target.radius));
    if (GUILayout.Button(“Make”))
    {
    var angle = 2 * Mathf.PI / ((_target.nodeCount-1) * 1f);

    _target.nodes.Clear();

    for (var i = 0; i < (_target.nodeCount-1); i )
    {
    var x = _target.radius * Mathf.Sin(i * angle);
    var z = _target.radius * Mathf.Cos(i * angle);
    _target.nodes.Add(new Vector3(x, 0f, z));
    }
    _target.nodes.Add(_target.nodes[0]);
    }
    EditorGUILayout.EndHorizontal();
    }

    and that's it, now I can create a path based on any polygon

  44. benang
    May 7, 2012 - Reply

    Hi, I’m trying to use your library in my game. Can’t really comment a lot because I haven’t succeeded in using it. FYI, I’m using both iTween and iTweenEditor. And they gave me these errors:

    Scripts named ‘iTween.cs’ exist in multiple locations (Assets/iTween/iTween.cs). Please rename one of the scripts to a unique name.

    Scripts named ‘iTween.cs’ exist in multiple locations (Assets/iTweenEditor/iTween.cs). Please rename one of the scripts to a unique name.

    So, does this mean that they are mutually exclusive? Thanks.

    • May 7, 2012

      I did not work on the iTweenEditor so I can’t help on that end of things but it looks like a copy of iTween was included with the installation of iTweenEditor. I suggest hunting down one of the copies of iTween in your project and deleting the file to stop that error.

  45. Azizi
    July 19, 2012 - Reply

    very thanks for this pachage.

  46. MrUnity
    July 25, 2012 - Reply

    Ok, Stop. PutOnPath does exactly what i want. And much more better 😉 Thanks

  47. gamedesigner
    August 9, 2012 - Reply

    Hi, awesome tool you’ve made–Thanks! Thought I might share one small thing I’ve tweaked:

    To add nodes that extend from the last point instead of at the origin, in iTweenPathEditor.cs replace this line:

    _target.nodes.Add(Vector3.zero);

    with this one:

    _target.nodes.Add(((_target.nodes[_target.nodes.Count-1] – _target.nodes[_target.nodes.Count-2]).normalized * 2.5f) _target.nodes[_target.nodes.Count-1]);

  48. Meldow
    August 24, 2012 - Reply

    Awesome job, just found this and using it for intro cameras

    Epic stuff, and for once, i find a really good feature.. for free!

    cheers from portugal!

  49. UnityRookie
    October 10, 2012 - Reply

    Hey Guys, Im using MoveTo() with the path property to move a gameobject along an arc path. (It’s supposed to jump from a point A to B.) It works fine when moving from A to B, But when i call it to Move from B to A, I see the gameObject move to point A first for a split second, and then it moves back to B and follows the arc path correctly. Any Ideas?? Anything I might be missing here?

    • October 10, 2012

      Hey, take a look at the “moveToPath” property to help remove that behavior. Good luck.

    • UnityRookie
      October 12, 2012

      Hey!! Wonderful!! Thanx a lot!!

  50. Shane
    January 29, 2013 - Reply

    You sir, are a STUD. Thank you!!!

  51. THIS IS AWESOME!!
    March 14, 2013 - Reply

    OMG I LOVE THIS!!! If my game gets popular ill probly donate! 🙂 Thanks (don’t ask what my game is, i’m not telling until its atleest half way through

  52. Mats
    September 29, 2013 - Reply

    This was so good I’m almost crying! Thanks and keep up the awesome work!

  53. Baalhug
    November 17, 2013 - Reply

    Simple, robust, versatile… man, you’re a genius.

Drop a comment

Your email address will not be published. Required fields are marked *