Static way for tweens

stortof

Hi there,

I think it would be nice to have a static call of the tween engine in Starling like in many other tween engine.

For the moment I use a homemade one...it's not heaven but you can use it if you want :

package
{
	import starling.animation.DelayedCall;
	import starling.animation.Transitions;
	import starling.animation.Tween;
	import starling.core.Starling;
	import starling.utils.deg2rad;

	/**
	 * ...
	 * @author ALPHA STUDIO
	 */

	public class StarlingTween
	{

	public static const LINEAR:String = "linear";
        public static const EASE_IN:String = "easeIn";
        public static const EASE_OUT:String = "easeOut";
        public static const EASE_IN_OUT:String = "easeInOut";
        public static const EASE_OUT_IN:String = "easeOutIn";
        public static const EASE_IN_BACK:String = "easeInBack";
        public static const EASE_OUT_BACK:String = "easeOutBack";
        public static const EASE_IN_OUT_BACK:String = "easeInOutBack";
        public static const EASE_OUT_IN_BACK:String = "easeOutInBack";
        public static const EASE_IN_ELASTIC:String = "easeInElastic";
        public static const EASE_OUT_ELASTIC:String = "easeOutElastic";
        public static const EASE_IN_OUT_ELASTIC:String = "easeInOutElastic";
        public static const EASE_OUT_IN_ELASTIC:String = "easeOutInElastic";
        public static const EASE_IN_BOUNCE:String = "easeInBounce";
        public static const EASE_OUT_BOUNCE:String = "easeOutBounce";
        public static const EASE_IN_OUT_BOUNCE:String = "easeInOutBounce";
        public static const EASE_OUT_IN_BOUNCE:String = "easeOutInBounce";

		public function StarlingTween() {}

		static public function to(target:Object, speed:Number, params:Object):void
		{
			var easing:String = params["ease"] == null ? Transitions.EASE_OUT_BACK : params["ease"];
			var tween:Tween = new Tween(target, speed, easing);
			var key:String;

			for (key in params)
			{
				switch(key)
				{
					case "delay" :
						tween.delay = params["delay"];
						break;

					case "ease" :
						break;

					case "onComplete" :
						tween.onComplete = params["onComplete"];
						break;

					case "onCompleteParams" :
						tween.onCompleteArgs = params["onCompleteParams"];
						break;

					case "onUpdate" :
						tween.onUpdate = params["onUpdate"];
						break;

					case "onUpdateParams" :
						tween.onUpdateArgs = params["onUpdateParams"];
						break;

					case "onStart" :
						tween.onStart = params["onStart"];
						break;

					case "onStartParams" :
						tween.onStartArgs = params["onStartParams"];
						break;

					case "rotation" :
						tween.animate(key, deg2rad(params.rotation));
						break;

					default :
						tween.animate(key, params[key]);
				}
			}

			Starling.juggler.add(tween);
		}

		static public function from(target:Object, speed:Number, params:Object):void
		{
			var easing:String = params["ease"] == null ? Transitions.EASE_OUT_BACK : params["ease"];
			var tween:Tween = new Tween(target, speed, easing);
			var tabKey:Array = [];
			var key:String;

			for (key in params)
			{
				switch(key)
				{
					case "delay" :
						tween.delay = params["delay"];
						break;

					case "ease" :
						break;

					case "onComplete" :
						tween.onComplete = params["onComplete"];
						break;

					case "onCompleteParams" :
						tween.onCompleteArgs = params["onCompleteParams"];
						break;

					case "onUpdate" :
						tween.onUpdate = params["onUpdate"];
						break;

					case "onUpdateParams" :
						tween.onUpdateArgs = params["onUpdateParams"];
						break;

					case "onStart" :
						tween.onStart = params["onStart"];
						break;

					case "onStartParams" :
						tween.onStartArgs = params["onStartParams"];
						break;

					case "rotation" :
						tabKey.push( { key:"rotation", to:target.rotation, from:deg2rad(params.rotation) } );
						break;

					default :
						tabKey.push( { key:key, to:target[key], from:params[key] } );
				}
			}

			var i:int;
			var lengthTab:int = tabKey.length;

			for (i = 0; i < lengthTab ; i++)
			{
				target[tabKey[i].key] = tabKey[i].from;
				tween.animate(tabKey[i].key, tabKey[i].to);
			}

			Starling.juggler.add(tween);
		}

		static public function remove(target:Object):void
		{
			Starling.juggler.removeTweens(target);
		}

		static public function delayedCall(delay:Number, callback:Function, params:Array=null):void
		{
			var dc:DelayedCall = new DelayedCall(callback, delay, params);

			Starling.juggler.add(dc);

		}

		static public function removeAll():void
		{
			Starling.juggler.purge();
		}

	}

}

You can use this like :

StarlingTween.from(myImage, 1, { delay:.5, scaleX:0, scaleY:0 } );

Daniel

Yes, something like that will be added to Starling in the future. It has to be simpler to start tweens.

Thanks for sharing!

wideeye

As a bit of an aside, I use TweenMax pretty much exclusively with Starling and it seems to perform fine (and allows the static calls mentioned above). Is there any particular benefit from using the Starling Tweens or am I ok to just stick with the TweenMax implementations?

stortof

@Daniel : cool! 🙂

@wideeye : can you show me an example ? to be animated a tween must be added to the Juggler so I am not sure the way it can be done with TweenMax...

wideeye

Ahh, I suppose I come at it from a different way - for e.g. creating a movieclip, adding it to the juggler then just starting the tween... If you're manually moving objects (say) they don't need to be added to the juggler, or am I missing the point here?

danieldourado_2

You do not need to add TweenMax to the Juggler. It works right out of the box.

qoolbox

Thanks for sharing the class!

I suggest we make this part of the Juggler class (instead of static members) because in Starling, it is possible to have multiple jugglers.

So, we should be able to do something like this:

Starling.juggler.from(myImage, 1, { delay:.5, scaleX:0, scaleY:0 } ); // using default juggler

These convenience methods (to, from, delayedCall) should also return the created IAnimatable.

Thanks again!

tsangwailam

i also doubt why need a tween engine when there already have a good one. I use TweenMax/TweenLite a lot and it have supreme performance.

stortof

On phones, it's good to use Starling tween because they will respond to the starling.stop()...In my first game (https://play.google.com/store/apps/details?id=air.fr.alphastudio.junglememory) i used a TweenMax delayedCall until I realised that when I come back from a call, the delayedCall has been executed and the game was over.

joshtynjala

It may be possible to subclass TweenMax and TweenLite to add it to the juggler instead of using its own timing methods. I was able to do this with GTween. It will run on the default juggler automatically, or you can pass in a different one, if you prefer.

nicotr014

Any updates on this? I'm wondering if anyone has extended TweenLite to implement Starling's IAnimatable to be compatible with the juggler.

If not, if anyone could give me any more info, I'd like to try it. The interface only has one function but I'm not sure how and when to modify the TweenLite enter_frame update. It should accept and multiply all of its values with Starlings timeDelta property right? Hopefully someone has a bit more info, I'm kinda lost.

joshtynjala

My link to GTween with IAnimatable was broken, so I just fixed it. Take a look, and maybe it will help to see what I did.