Integrating TweenMax with our framework

[Vlad]

Hi all, my name is Ricardo Vladimiro and I'm co-owner and programmer at Vortix Games Studio.

 

We have a framework which we are building up as needed for our game development. While I was considering the reinvention of the wheel (read: coding our own tweening classes) I took a deep breath a read all the pages about GreenSock's Tweening Platform and the amount of good things I could do with it instead of melting my brain with our own tweening stuff makes me smile in antecipation.

 

TweenLite with a bunch of plug-ins seems to be the weapon of choice to our framework, but I think I would have to manage a bunch of tweens individually with overwrite set to NONE. That is not a big deal since the framework is modular, but it raises some doubts.

 

1. Let's say I create a tween to move an object from x1,y1 to x2,y2. In the middle of path I want to move it to x3,y3 (from the current position), do I have to kill the previous tween or is there a way of changing the current one? My question is regarding object creation, mostly because of performance, so is there a way of restarting the current tween with new values?

 

2. More or less in the same line of thought, would it be possible to have a tween for acceleration that was active while a key is pressed? Imagine a car game where up arrow is your gas pedal. It would accelerate with key down and apply friction with the key up.

 

I'll start implementing it on our framework's behaviors soon, so more doubts will pop-up, but for now, these come to mind.

 

Thanks for the platform and keep up the good work!

Vlad

[GreenSock]

Hey Ricardo. Great questions. I think you'll find that it'll save you a LOT of development time and hassle if you just use the GreenSock platform instead of reinventing the wheel (see http://blog.greensock.com/business-case/ for some other considerations). Let me address your questions:

 

1. Let's say I create a tween to move an object from x1,y1 to x2,y2. In the middle of path I want to move it to x3,y3 (from the current position), do I have to kill the previous tween or is there a way of changing the current one? My question is regarding object creation, mostly because of performance, so is there a way of restarting the current tween with new values?

 

Absolutely. You have several options. First, check out the new updateTo() method in TweenMax. All you'd need to do is:

 

myTween.updateTo({x:x2, y:y2}, true);

 

That second parameter just determines whether or not the tween resets its duration (a common scenario), but you can set it to false and it'll adjust the values internally so that the timing of the tween is honored and the values seamlessly get redirected to the new destination values. So, for example, if a 3-second tween is halfway done and you updateTo(), it'll tween from the current position to the new x/y position over the course of 1.5 seconds and the ease will be honored as well! This one function should give you all the flexibility you need.

 

If, however, you want to prioritize small file size instead of rich feature set, you could use TweenLite and just invalidate() it, update the vars object directly, and restart() the tween. That solution, however, would require that you restart the tween. Another option is to use the dynamicProps plugin which allows you to map the destination values to functions that you define, so you could change the destination values anytime by simply altering what your function returns. See the dynamicProps example in the Plugin Explorer - I think it'll make more sense when you see it visually.

 

2. More or less in the same line of thought, would it be possible to have a tween for acceleration that was active while a key is pressed? Imagine a car game where up arrow is your gas pedal. It would accelerate with key down and apply friction with the key up.

 

This is more of a physics engine request. There is a physics2D and a physicsProps plugin that allow you to set things like velocity, acceleration, friction, etc. So yes, you could do something like this. There are many, many ways to set this up, though, some of which would perform a bit better than others. If you need help with it, I do offer consulting services, so just shoot me a PM or e-mail request and we can look into booking some time in the schedule.

 

Let me know if you have any other questions or concerns.

 

Also, if you haven't looked into the sequencing and grouping capabilities of TimelineLite and TimelineMax, I'd definitely recommend checking out the video at http://blog.greensock.com/timeline-basics/.

[Vlad]

Here I am again, now with more concrete questions.

 

I'm using tweens mostly for behaviors. In the context of our framework a behavior is a functionality that affects both attributes of an object and its state. I'm wondering what would be the best approach to do manage the tweens. I'll use a simple object to explain, but keep in mind that other objects can be way more complex.

 

I have a camera object that can zoom in/out and move along a map. Both of these behaviors are tweenable for 'the looks'!

 

1. Should I have have one tween to handle all the object's tweens considering that different behaviors can affect the same attributes, for instance, the camera zoom and movement act on x and y attributes.

2. Our framework allows object pooling. I seem to be able to reuse tweens easily, but can I expect any data to be saved in the tween that will give me some trouble late on? Or is there a clean way to reset a tween without creating a new one?

 

I'll be back with more weirdness.

[GreenSock]

1. Should I have have one tween to handle all the object's tweens considering that different behaviors can affect the same attributes, for instance, the camera zoom and movement act on x and y attributes.

 

That's up to you, but keep in mind that each tween can only have one ease. I'm not sure if you're needing to sequence things, but if so, you might want to look into using TimelineLite/Max. http://www.greensock.com/timelinelite/

 

2. Our framework allows object pooling. I seem to be able to reuse tweens easily, but can I expect any data to be saved in the tween that will give me some trouble late on? Or is there a clean way to reset a tween without creating a new one?

 

I've done some performance comparisons with object pooling and quite frankly, a lot of the hype just isn't true. In fact, object pooling can be SLOWER in many cases because of the overhead involved with managing the pools, cleaning objects, etc. But sure, if you want to reuse a tween, you could do that. The invalidate() method clears out any starting values that were recorded.

[Vlad]

With only one ease, I'll need multiple tween objects, which leads me to ask what happens when a tween is not active.

 

I know what you mean about pools, but there's this one thing, called an Entity that has a bunch of objects in it. It's the only one I'm managing pools for and to make things worse it's also the one that will use more tween objects.

 

Thanks for the taking your time, I appreciate it.

[GreenSock]

With only one ease, I'll need multiple tween objects, which leads me to ask what happens when a tween is not active.

 

Could you explain your question a bit further? When a tween is paused, it doesn't do anything. After it finishes running, it automatically makes itself eligible for garbage collection, but if it is inside a TimelineLite or TimelineMax that isn't eligible for gc yet, the nested tweens are protected as well. Basically you shouldn't have to worry about gc issues. What exactly are you wondering about?

[Vlad]

Let me dig into it first and I'll get back.

[Vlad]

First and foremost, I have to thank you for this wonderful library. Wrapping our object behaviors in it is working like a charm, everything is easy, works like a charm and we got a project that needs tweens back and forth and I'm amazed by the power and simplicity.

 

New set of questions:

 

A tween changes a numeric value overtime according to some easing function. Is it possible to get the delta between the last and the current values from the tween object? If not, I'll calculate it myself, but I need to know if the onUpdate function is called before or after the value is changed. I can quickly wrap up a solution for this, but I'm wondering what would be the best solution for something like this.

 

Without using any Timeline object, is it possible to pause all the tweens of an object? Again... this is something easily coded but since performance is an issue, I'm wondering about the best possible strategies.

[GreenSock]

A tween changes a numeric value overtime according to some easing function. Is it possible to get the delta between the last and the current values from the tween object? If not, I'll calculate it myself, but I need to know if the onUpdate function is called before or after the value is changed. I can quickly wrap up a solution for this, but I'm wondering what would be the best solution for something like this.

 

TweenLite/Max don't store previous values, no - that'd eat up resources and add kb unnecessarily, but like you said, you could easily store that info yourself either in your own data structure or even use the "data" property of the tween itself.

 

Without using any Timeline object, is it possible to pause all the tweens of an object? Again... this is something easily coded but since performance is an issue, I'm wondering about the best possible strategies.

 

TweenMax has a getTweensOf() method which returns an Array of tweens for a particular object - you could loop through those and pause() them if you want. It may not perform any better than just putting those in a TimelineLite and pausing it, though.

 

Have fun.