RabbitTween is a brand new AS3 tweening engine, simple, fast and very light weight.
Yeah I know, I have been away for a long time, giving no news and posting absolutely nothing for months !… and look who is coming back with an already existing thing that everybody has already seen everywhere ?!? …
It may look stupid and useless as there are so many engines out there that may do the job a hundred times better. And that’s what I was telling myself till a couple of days ago…
But why would I start making my own tweening engine ? isn’t that too hard ? is it worth the time spent ? will I be able to get a decent speed ?
All this time I have been using TweenLite or TweenMax because they are easy to use and quite fast compared to other engines (Well they may well be the fastest after Tweensy, but we will see that later…)
Making money ?
During my extended absence, I took some time to have a look at how people were actually trying to make money out of flash “things” (components, code snippets, classes, etc…) and I naturally ended up on websites like FlashDen, FlashLoaded or UltraShock to only cite those I know best.
People there are selling stuff (some interesting, some not at all) at a very low price. The idea is obvious, the cheaper it is, the more you sell… but you need a good visibility and that’s why websites such as FlashDen exist !
They regroup the “most interesting” items that you may need and take a commission on the sales.
It may sound pretty interesting as they are offering a good visibility (more or less as there are many other items…) but you quickly step back when you realize how much they actually take.
They generally start by taking 75% of what you sell and then go gradually down to 40% if the item is selling well and if you only sell it there…
It’s true that they are offering a good visibility for your products that most of us could not get otherwise. But I believe the commissions they take are indecent. Items are usually sold between 5 and 30 US$ and if they take, let’s say, 60%, you ony get 2US$ out of 5US$ that people are paying for. So you need to sell a lot of them to get a sufficient income for the work you’ve put in it. And a simple look at the selling counts (average 20 to 50 per items) makes you understand that it might not be a so good idea.
Of course, some people are making quite a lot of money but still, most of it goes to the intermediaries.
Why making another tween / tweening engine then ?
It may sound a little but when you think of selling your items for 3$ and know how much you’ll finally get from it, it doesn’t look very worthy any more. It may look a bit cheap (or stingy ? not sure about that word) but I don’t think money is the only reason that made me do it.
Of course, I didn’t think of making my own engine straight away. I was a bit sceptical about doing so. It would be so much work and I would certainly not get the same results, it would be slow, etc… So I started looking for other engines that would do the job and I stepped on Tweensy.
Tweensy looks like a good engine and is fast. It doesn’t have all the simple and usefull things that TweenLite and TweenMax are offering straight away (I’m only really thinking of “tint” right now and I even may be wrong) but it does a good job in terms of performance.
So I tried it with a component of mine that was using TweenMax. Unfortunately, the results were not the same. Some of my objects would simply not move or in a very buggy way.
It is by looking at how TweenLite was actually made and comparing it to Tweensy that I slowly started to understand how a tweening engine was working.
And it is actually very simple !
I don’t really like the way TweenLite/Max were written and I’m apparently not the only one. It has a taste of AS2 and some things could have been more clear but the performances are on rendezvous…
But as I wasn’t finding this “thing” that was making my tween not to function properly with Tweensy, I just decided that it would be easier to start making my own engine to clearly understand why it was so. And so did I…
Making my own engine
I think the most important thing to think about when you start making your engine is the way you will manage your tweens and its properties. I read that Tweensy was making use of linked list but then I remember reading somewhere else that linked list were actually slower than vectors… all those performance things, it seems to change all the time. So I made a choice and decided to use both.
The main reason why I did so was simplicity of programming. In some cases, linked lists are easier to manage than arrays or vectors.
In total, it took me 3-4 days to realize that I had to make an engine, to make it, optimize it a bit, make a Speed/Performance tester that would test it against other engines and write this post.
I won’t talk about how the engine is working and how you can use it as I feel like this post is getting too long. I will simply put the Speed/Performance tester I made so you can make your own tests and of course post the sources of the RabbitTween classes.
The Speed/Performance tester
It’s ugly, how does it work ?
Well, I know, it has not been made to be spectacular but to try to get as close as possible to the way most of us will actually use a tweening engine. That is : creating a lot of simple tweens without carring about anything.
It works as follows:
- a MovieClip is created with an alpha of 0.0 and positioned somewhere on the screen.
- a tween is created with a duration of 2.0 seconds( by default, it can be changed) and a random delay (between 0 and the current duration)
- tween is given a onComplete function with the current MovieClip as parameter. Event is set if needed (GTween)
- when tween is finished, MovieClip is removed from the DisplayList and a new tween is created (starting at step 1)
You can set the number of tweens you want to have and their duration.
You can choose the tweening engine you want to test. I recommend to refresh the page to make sure flash starts with a fresh “environment”.
Now the results
2 – RabbitTween:
- average fps: 22.7
- max memory (average) : 119.000
3 – TweenLite:
- average fps: 22.5
- max memory (average) : 117.000
4 – TweenMax:
- average fps: 20.7
- max memory (average) : 114.000
6 – Tweener:
- average fps: 11.5
- max memory (average) : 24.000
1 – Tweensy:
- average fps: 23.3
- max memory (average) : 131.000
5 – GTween:
- average fps: 17.4
- max memory (average) : 121.000
So in order of performance comes Tweensy, RabbitTween, TweenLite, TweenMax, GTween and Tweener.
RabbitTween and TweenLite are very close but each time I ran the tests, RabbitTween would keep the advantage.
Tweensy always stayed first and Tweener always last.
It’s interesting to see that there is some kind of analogy between the fps and max memory used.
Tweener is by far the slowest engine but it does a really good job at keeping the memory usage low.
On the other hand, Tweensy is the fastest engine but is also the one having the biggest memory usage.
If you pay attention at how the tweens are actually starting, you can see that Tweensy is a bit different than the other engines. I now know why because RabbitTween was behaving like Tweensy before. But now it’s “solved” and allows for a more flexible use of the engine.
Download the classes
I won’t explain here how to use it but it’s really close to the way TweenLite is used.
Anyway, here it is: RabbitTween 0.1, tweening engine in AS3
Filters are not managed yet. It will come with the next version and the next post that will officially launch the RabbitTween tweening engine.
Thanks for reading this till the end.