iTween animation system

Hey everybody!  

Just wanted to spread the word further about the iTween animation framework. We now have a solid JavaScript and C# version and recently added bezier movement. This framework is very similar to the approach Tweener and similar tweeing  engines take on the Flash side of things to make movement easy and I hope everyone finds the system approachable. 

It's free to use, so knock yourselves out and I hope it saves everyone tons of time and helps you at least unify (pun intended) your abilities between Flash and Unity.

Share all of your concerns, bugs, and feature requests here: http://forum.unity3d.com/viewtopic.php?t=47351&start=0 and on the support page.  

Here's the JavaScript version: http://www.pixelplacement.com/itween/

Here's the C# version: http://www.insquare.com/itween/

 

Been using it

It's brilliant. Should really be incorporated into unity as a default~ =3

pixelplacement1: Your documentation is also greatly appreciated. Thanks

 

Wow! Definitely looks like a substantial contribution!

 

Indeed.

It'd be great if there were some kind of way to make it a point and click inside of unity. O-o Maybe get object positions (based on names) and type (by tag) at the awake state and set the stuff that way, so if you are off a bit you just have to drag it... O-o *shrugs* Could be pulled off that way I suppose.

[edit]
^_^ Found out how to use Enums in unity! Kinda cool!

Anyway, maybe with that I'll try to whip up an extended script to where all you have to do is set the main object on the first node, and check a box for if it's a child or not. O-o... I think I'm making this overly complex sounding, but either way, should technically be pretty simple... XD But I seem to think stuff is more simple then it really is some times.

O-o Anyway, bed time for me. (3:14am)
[/edit]

[edit again]
Ok, so I didn't go to sleep... instead I came up with this:

Code (csharp):

1.  
2. var IsActive:boolean = false;
3. var IsChild:boolean = false;
4. var IsVisible:boolean = false;
5. var ObjectToBeMoved:Transform;
6. var NextNode:Transform;
7. var Duration:float = 3;
8. var Type:AnimationType=0;
9. var Ease:float=0;
10. enum AnimationType{Linear=0,
11.                                 Spring=1,
12.                                 Bounce=2,
13.                                 EaseInQuad=3,
14.                                 EaseOutQuad=4,
15.                                 EaseInOutQuad=5,
16.                                 EaseInCubic=6,
17.                                 EaseOutCubic=7,
18.                                 EaseInOutCubic=8,
19.                                 EaseInQuart=9,
20.                                 EaseOutQuart=10,
21.                                 EaseInOutQuart=11,
22.                                 EaseInQuint=12,
23.                                 EaseOutQuint=13,
24.                                 EaseInOutQuint=14,
25.                                 EaseInSine=15,
26.                                 EaseOutSine=16,
27.                                 EaseInOutSine=17,
28.                                 EaseInExpo=18,
29.                                 EaseOutExpo=19,
30.                                 EaseInOutExpo=20,
31.                                 EaseInCirc=21,
32.                                 EaseOutCirc=22,
33.                                 EaseInOutCirc=23,
34.                                 EaseInBack=24,
35.                                 EaseOutBack=25,
36.                                 EaseInOutBack=26
37.                             };
38.                            
39. function Update()
40. {
41.     if(IsVisible)
42.     {
43.         transform.Find("Capsule").renderer.enabled = true;
44.     }else{
45.         transform.Find("Capsule").renderer.enabled = false;
46.     }
47.     if(IsActive == true)
48.     {
49.         if(Type == AnimationType.Linear)
50.         {
51.             iTween.moveTo(ObjectToBeMoved,{"x":NextNode.transform.position.y, "time":Duration});
52.             iTween.moveTo(ObjectToBeMoved,{"y":NextNode.transform.position.y, "time":Duration});
53.             iTween.moveTo(ObjectToBeMoved,{"z":NextNode.transform.position.z, "time":Duration});
54.         }
55.     }
56. }
57.  

Works ok for everything except the iTween stuff it gives me:
"Assets/AnimateNodeScript.js(50,38): BCE0023: No appropriate version of 'iTween.moveTo' for the argument list '(UnityEngine.Transform, Boo.Lang.Hash)' was found.
Assets/AnimateNodeScript.js(51,38): BCE0023: No appropriate version of 'iTween.moveTo' for the argument list '(UnityEngine.Transform, Boo.Lang.Hash)' was found.
Assets/AnimateNodeScript.js(52,38): BCE0023: No appropriate version of 'iTween.moveTo' for the argument list '(UnityEngine.Transform, Boo.Lang.Hash)' was found."

So, I know that those are the 3 lines with the iTween lines on it, and after looking at the iTween.js file, I found nothing obviously missing. Any clue why it's telling me this error?

[/edit again]

 

Not entirely sure what you are trying to pull off with this but your error is with the 'objecttobemoved' declaration. iTween expects a GameObject not a Transform. Hope that helps!

 

Update v1.0.14:

* Changed punchPosition and shake to use localPosition instead of worldPosition
* Fixed shake's callback routine
* Added "loopType" argument for most methods (check the documentation for which ones now have it) with the ability to set it as "loop" or "pingPong" (there's issues with the moveToBezier and moveToBezierWorld that I "may" get to)
* Added new sample project to support page

 

Pretty much what I'm trying to do is make it more like a property window. Instead of programming the script and figuring out the position at random, you would place Animation Nodes that are a visible, movable, object that you can see.

I didn't realize that most of the options in the enum are transitions, not movement types, but same concept applies.

I just wish I knew of a way to program something to where it's an array for the properties. (Kind of like adding tags, where when you add a new one, it scales larger and lets you add more and more) That way instead of clicking on each node and setting the next node, you can just use the first node. O-o... I doubt I'm making sense now... I need sleep. (I have it working on the base node btw, but I need to get it working with children nodes.)

 

Ok, let me know how it works out for ya!

 

sounds interesting! unfortunately i dont have experience with flash so is it possible to post small unity examples?

 

They are ALL over the support site: http://pixelplacement.com/iTween/

 

UPDATE:

*JavaScript version of iTween is now 1.0.15

*I threw together a simple game with source code for everyone on the support site to help show some uses of iTween in an actual project.

*New video on the support site that goes through EVERYTHING that iTween can currently do for you!

http://www.pixelplacement.com/iTween/

 

Update: v 1.0.17

For those who prefer using native data types instead of separating out individual properties ("x","y", etc...) I've added a ton of new properties that leverage Vector3 and such - check the documentation for details.

# Added "position":Vector3 to moveTo, moveToWorld, moveFrom, moveFromWorld
# Added "amount":Vector3 to moveBy, moveByWorld
# Added "color":Color to colorTo, colorFrom
# Added "scale":Vector3 to scaleTo, scaleFrom
# Added "amount":Vector3 to scaleBy, scaleAdd
# Added "rotation":Vector3 to rotateTo, rotateFrom
# Added "amount":Vector3 to rotateBy
# Added "position":Vector3 to punchPosition
# Added "rotation":Vector3 to punchRotation
# Added "amount":Vector3 to shake

Examples:

Code (csharp):

1. iTween.colorFrom(gameObject,{"color":Color.yellow});
2. iTween.colorTo(gameObject,{"r":2,"delay":3});
3. iTween.moveFrom(gameObject,{"position":Vector3(-1,-1,-1)});
4. iTween.moveFromWorld(gameObject,{"position":Vector3(-1,-1,-1)});
5. iTween.moveTo(gameObject,{"x":2,"delay":2});
6. iTween.moveTo(gameObject,{"position":Vector3(0,0,0),"delay":4});
7. iTween.scaleTo(gameObject,{"scale":Vector3(2,2,2)});
8. iTween.scaleFrom(gameObject,{"scale":Vector3(2,2,2)});
9. iTween.moveByWorld(gameObject,{"amount":Vector3(2,2,2)});
10. iTween.rotateTo(gameObject,{"rotation":Vector3(12,12,12)});
11. iTween.rotateFrom(gameObject,{"rotation":Vector3(12,12,12)});
12. iTween.scaleAdd(gameObject,{"amount":Vector3(2,2,2)});
13. iTween.scaleBy(gameObject,{"amount":Vector3(2,2,2)});
14. iTween.rotateBy(gameObject,{"amount":Vector3(.5,0,0)});
15. iTween.punchPosition(gameObject,{"position":Vector3(1,0,0)});
16. iTween.punchRotation(gameObject,{"rotation":Vector3(.1,0,0)});
17. iTween.shake(gameObject,{"amount":Vector3(.2,0,0)});

 

UPDATE JS v 1.0.20


* Smoothed out orientToPath controls for bezier movements
* Fixed some slight issues with local and world space with bezier movements
* moveToBezier (only using local) with orientToPath doesn't work for correct lookAt on contained objects (objects that have a parent) - ANY SUGGESTIONS?
* Deleted moveByWorld since it wasn't logical (if this is in error, let me know)
* moveFrom wasn't calculating correctly between local and world space - does now
* Fixed pingPong loop failures throughout
* Added rotateAdd
* Rotational math for local usage is still odd - ANY SUGGESTIONS?
* Fixed pingPong loops on bezier movements
* Added loopType to scaleBy, scaleAdd, rotateBy, rotateAdd

 

@suggestion:
Check to see if it has a parent, if so modify the parent rather then the current object. But that would somehow have to be an option I would think... (IE, you won't want to move the whole camera if say you were in first person and just wanted to move the gun.)

Code (csharp):

1.  
2. if(transform.parent != null)
3. {
4.     transform.parent.transform.position = newPosition;
5. }
6.  

Hard part would be to do it to an entire chain, but I suppose you could use a while loop, but while loops could be a hassle if you have a few things going on. Slow downs and infinite loops are not fun.

Code (csharp):

1.  
2. var topParent = transform.parent;
3.  
4. //loop code
5. while(topParent != null)
6. {
7.     topParent = topParent.parent;
8. }
9. topParent.transform.position = newPosition;
10.  

O-o That is assuming that parent returns a game object of course. I'm not 100% sure, as I've not used parents before in unity, but that is how it works in things such as VB. Hope this helps some! (also, might I suggest possibly uploading this to the UnityPrefabs.com when it gets up and running. I'm so surprised there isn't a place like it out already, you know, dedicated to the Unity engine's stuff. This is a great script so far, and I'm sure it will be a standard pretty soon as far as animation goes.)

Oh, and on a side note XD I haven't had a chance to work on what I was doing, so it isn't quite working yet. XD

 

UPDATE: JavaScript v 1.0.23

This version ushers in the first of many new 'Continuously Callable' methods. That's right boys and girls, no more hunting around for smooth camera controllers and the like! You can easily cause iTween to act as a smooth camera follow script by the first offering called lookToUpdate:

Code (csharp):

1. var target : Transform;
2.  
3. function Update () {
4.     iTween.lookToUpdate(gameObject,{"target":target.position, "lookSpeed": 3}a;
5. }

 

Thank you Sir for adding this. I'll give it a go tonight!!

 

You're welcome. I also add a moveToUpdate that will ease an object to a position set either as a Vector3 or as individual axis.

Have fun, let me know if anything breaks!

 

Just released a sizable update to the JavaScript version, can you guys let me know if any new bugs crept up!

1.0.28 JavaScript iTween
Fixed:
-All "By" and "Add" move methods can now take "position" or "amount"

-All "By" and "Add" rotate methods can now take "position" or "amount"

-Every "By" and "Add" method now snapshots it's start position when it is run rather than when its initialized to avoid odd behaviours when delays ae utilized

-Changed lookFrom to use startRotation not endRotation

-Added moveAdd to enhance flexibility

-Cleaned up and optimized all move methods to be more predictable and reliable (utilizing Translate for better local space movement)

-Cleaned up and optimized all rotate methods to be more predictable and reliable (utilizing Rotete for better local space movement)

-Cleaned up and optimized punchPosition and punchRotation to be more predictable and reliable (utilizing Translate for better local space movement)

-Cleaned up and optimized all scale methods to be more predictable and reliable

-Added lookToUpdateWorld and corrected world usage for lookToUpdate

-Corrected issue with bezier move and orientToPath failing if the object was a child

-Bezier move now uses lookToUpdateWorld regardless of situation (I "think" this is the correct solution)

-Added moveToUpdateWorld

-Added axis argument to bezier move to allow locking of look application to single axis

-Bezier move lookAt now uses lookToUpdateWorld

-Added lookToWorld

-MoveBy and MoveAdd are now identical in operation

-Added shakeWorld

-Shake methods not correctly resolve magnitude to 0

-Consolidated rotateToDefaults and rotateByDefaults into rotateDefaul

 

Nice one!

Thanks for this awesome toolkit...
And nice website btw. Clean, clear and fast.

 

Awesome, awesome. Thank you and I'm glad I was able to help you.

 

Wow, this looks really usefull. Great work.

 

Just wanted to say a HUGE Thank You, Bob!





P.S. Is there any 'hard copy' documents for this? (PDF etc)......

 

Nope, but there "might" be in the future.

And you're welcome!

 

JavaScript Version 1.0.30 is now available:

* Color applications were using fade's defaults<
* Fade applications now fail gracefully on any children if includeChildren is run and the child doesn't have a renderer
* Color applications now fail gracefully on any children if includeChildren is run and the child doesn't have a renderer
* Ripped out and rebuilt the fade routines
* Ripped out and rebuilt the color routines
* Fixed duration issues with shake
* Fixed issues with punchPosition related to easing curve involvement
* Added punchScale

http://pixelplacement.com/iTween/

 

Hey everybody,

Just wanted to let everyone know that the C# version of iTween is now caught up to the JavaScript and is at 1.0.31. Yeah Patrick! Let us know if you encounter any problems.

 

Thank you for iTween!

Is there a possibility to use it for gameObjects that are moving on a terrain? I'm a little worried about the gap between the terrain and the moving object, if there are hills in the terrain.

Keep on the great work.

regards,
Jürgen

 

You are welcome!

For your situation I would recommend putting the GameObject inside an empty GameObject. Put your iTween movements for X and Z on the outside GameObject and put a collider, rigidbody with gravity on the contained object so the physics engine can handle your Y movements and therefore keep the object on the terrain.

Cool?

 

that's really a cool idea, I'll try it out.

Thanks
Jürgen

 

I'm curious if it works!

 

Hi, I have recently started using iTween, and it works great

So i am trying to use iTween to make a gun to jerk backwards when firing, to make a very basic recoil like effect. Here is the script:

Code (csharp):

1. function Update () {
2.     if (Input.GetButtonDown ("Fire1"))
3.         iTween.shake(gameObject,{"z":-0.1,"time":0.1});
4. }

My problem is that it only animates this once, and then it stops. I want the iTween animation to loop as long as the player is firing. If I had the animation play whenever the button is pressed, then the animation will keep playing, even when out of ammo. But my main focus is getting the itween to loop as long as a button is held down.

 

Glad you like iTween. Don't have a ton of time to give you a decent, thought out answer but...

Try starting a shake with a ridiculously large time interval thereby ensuring it will not resolve, then when the player is done firing call an iTween.stop or stopType on that tween. You will need to put some sort of boolean into this setup to make sure you aren't starting multiple shakes but let me know if that helps!

 

thanks for sharing

how can I make a curve?

 

Do you mean moving an object on a curve? You will want to use moveToBezier. There's a few examples on the support page and the second video on the site goes into thorough detail at the end.

 

yes .. but moveToBezier rotate the object ... i need to use it in a 2d game ... i wrong something ?

 

Take a peak at the docs you can set orientToPath to false and it will nolonger rotate it as it moves.

 

Hi,
thx for sharing this great animation framework!
But i´ve a question about tweening the color-values of a go-material. If i´m using "colorTo" oder "colorFrom" on a gameobject, the material get´s the "(instance)" appendix. I thought that isn´t the best way - it´s better to manipulte the "sharedmaterial"-value, isn´t it? Any disadvantages on this?



And a second question:
I want to tween the different color-values on a shader. For example "_Color", "_SpecColor" or "_ReflectColor". How does this work?

Thanks for your help..

 

You sure about using sharedMaterial? This will change all usages of this material and could potentially alter elements of your scene that you don't want to affect (hence why I went with the default material). Currently there's no way to alter the color-values other than the overall default material. However, I am in the middle of a complete rewrite of the system for a soon to be released version 2.0 that will possibly allow for this behavior. As I learn more about people's work flows and desires I can hopefully offer more functionality with iTween. In the meantime, you can check out AniMate http://www.unifycommunity.com/wiki/index.php?title=AniMate on the script wiki if iTween is lacking something for ya!

 

Just a little FYI. I put up a blog post about using the JavaScript version of iTween in a c# project along with some examples of how I'm using iTween.

Blog is here:

http://dokidokigames.tumblr.com

iTween is an awesome library and I'm only scratching the surface of possibilities with it.

 

Just by a show of hands who prefers the js hastable approach and the previous mention of using this approach to the current method overriding approach of the c# version?

Stay tuned for 2.0

 

Hey pixelplacement1,

thanks for your answer.
Yeah i´m already using Ani.mate but i thinks yours itween is much easier to handle also with cool new features.

Any plans when you´re ready to release the itween 2.0 version??? 8)

Thanks for all your time you´re investing in this lib...

 

You're welcome! As far as a time frame all I can give you is the answer Id gave on Doom 3's development cycle: "When it's done." I have quite a busy schedule right now (and quite a pregnant wife) so I'll get it to you guys as soon as I can!

Thanks for all the support!

 

*puts up hand for JS!*

Cheers

 

I forgot I made a request for a "show of hands" and almost told you to put your hand down and to stop disrupting the class. Yeah, I'm tired.

 

haha

I've never been the disruptive student before - better late than never

 

I'm telling your parents.

 

Keep the hashtables.

 

*votes to keep JS and hashtables*

 

Thanks guys. The vote however was whether the C# version should get hashtables, sorry for the horrible wording. So... should the C# version get hashtable?

 

Hit us with some examples of what we have to choose between

Maybe we can then come up with other ways too

 

I really don't want to open up a huge can of worms at this point (because of the fact that I'm neck-deep in ripping the JS version apart for 2.0), the only reason I'm offering this debate is because of the recent interest in calling the JS version from C# to gain access to Hashtables rather than the written out arguments of the C#'s interface.

I guess at this point aside from what version 2.0 is going to offer is everyone happy with the two versions (JS vs. C#) and their interfaces as they currently stand?