Recent Posts
Pixel Camera
Recently I needed very granular control over 2D elements for Unity that needed to be workable...
Screen Fade
A simple, static solution for fading the screen in Unity. This solution fires off three...
Collider Button
Buttons should be easy and now they are. Collider Button is a simple component that...
Search:
Visual iTween path editor
Posted date:
December 3, 2010 |
83 Comments
December 3, 2010
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.
83 Comments
© 2013 Bob Berkebile (PixelPlacement™) and additional respective holders all content used with permission
lovin this addition to iTween!!
Great tool- and beautiful presentation. Mono Develop really helps one understand the beauty of iTween.
Thanks Again.
~K
Really great job!
This is Awesome
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
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!
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.
Very cool, great work!!
OH,That so cool , I like it!
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?
Yup! Check out the “orientToPath” parameter.
cool,,, I Can’t thank enough….
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.
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!
Bob,
You continue to amaze.
Love,
Earl
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.”
Thats great Bob thanks
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.
[...] 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 [...]
Update: Added a toggle to enable the visual representation of the path as well as some simple documentation for the GetPath() method.
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.
Oops – ignore that – meant for the iTween Editor guy!!! Not the path editor
I was gonna say…
Hi!
Assets/iTweenPath/iTweenPath.cs(50,17): error CS0103: The name `iTween’ does not exist in the current context
Why?
Thank you!
RTFM
Thank you!
LOL.
Amazing. I can’t tell you how much sweat and tears this has saved. Well done!
Hearing that makes my sweat and tears worth it. Thanks for the support.
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});
Try putting the iTweenPath.cs file in a “Plugins” folder. Let me know if that helps.
I had the same error, did what you just said and now it works fine! Thanks!!!
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!!!
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!
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!
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! =)
Are you trying to use this with Unity iPhone?
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
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?
This is a fairly easy fix, simply create a Start() function and place the initialization code there.
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.
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
Looks like you are using Safari? Right-click the link and choose “Save Link As…”
Well can we use this the Path point at Runtime . How can we do that
Ummmm, yup – the video shows it in action.
Can we Point this Begin and End Point at Run time .
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?
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.
Is there any known issue with iTween Path Editor when used with Unity iphone?
Yes – you might need to adjust some things. I don’t really have the time to make this compatible that far back – sorry.
Great Tool!! Thanks for sharing your amazing work!!!!
Added an update via neoriley and added: “GetPathReversed()” for quickly getting an edited path in reverse.
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!
Bob, Thank you for this great editor, as well as the iTween code. What a great solution for many, many tasks! -Mike
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
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.
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
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
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.
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
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.
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…)
Yup, this works fine in JavaScript. Simply drop iTweenPath into a folder called Plugins.
[...] 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 [...]
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?
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!
good job!i want to a gameobject move to and stop at one of the node in path.can i do it ?
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.
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.
Not sure why you are having these issues. I just tested it and everything is working fine even in 3.5.
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.
Look into the “Generating Random Paths” example for how to generate a path dynamically:
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
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.
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.
very thanks for this pachage.
Ok, Stop. PutOnPath does exactly what i want. And much more better
Thanks
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]);
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!
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?
Hey, take a look at the “moveToPath” property to help remove that behavior. Good luck.
Hey!! Wonderful!! Thanx a lot!!
You sir, are a STUD. Thank you!!!
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