Skip to content
April 13, 2011 / Aurélien Ribon

Java Universal Tween Engine

Blog back !

I’ve been really busy these days, sorry for the total lack of updates. I saw that strangely enough, there are many pages viewed each day.

This post is there to present you one of my main recent additions: the Universal Tween Engine.

Description

What I designed is a Tween Engine, for Java, which is able to interpolate every attribute from every object using every Robert Penner’s easing equation. You can get a look at these equations here. Thus, you can use it in any project, being a desktop GUI made with Swing or SWT, an OpenGL Game or an Android application.

Talking about Android, I specifically built this library with performances in mind. There is no dynamic object allocation, so no garbage collection at all (Tweens are pooled, etc.). As a result, it performs very well on embedded devices!

Tweens, Animations, Interpolations…

If you’re not used to the concept of “tweening”, here is the Wikipedia definition:

Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the key frames which help to create the illusion of motion. Inbetweening is a key process in all types of animation, including computer animation.

The concept of tweens comes from the Flash world. The goal of a tween is usually to let you create a nice and cool animation in just one line of code, such as:

// This single line means "animate my sprite rotation from its
// current value to 360° in 1s (1000ms), with an elastic equation,
// but wait 1.5s before doing it". You said pretty cool ?
Tween.to(sprite, ROTATION, Elastic.OUT, 1000, 360).delay(1500).start();

TL;DR

Here’s the library code page: http://code.google.com/p/java-universal-tween-engine.

In the download section, you will find a JAR executable that demonstrates every equation and a small demo (need to add real showcase… :p), as well as the JAR library itself.

All you have to do to use it is to implement the Tweenable interface, so the library can act on your objects. See the provided example source code to begin, it’s a real piece of cake.

The possibilities are (currently) as follows:

// Arguments are (1) the Tweenable target, (2) the type of interpolation,
// (3) the easing function, (4) the duration in milliseconds and
// (5) the animation target values (which count depends on the tween type)
Tween.to(mySprite, TweenTypes.POSITION_XY, Elastic.INOUT, 1000, 50, 50);

// Possibilities are:
Tween.to(...); // interpolates from the current values to the targets
Tween.from(...); // interpolates from the given values to the current ones
Tween.set(...); // apply the target values without animation (useful with a delay)
Tween.call(...); // calls a method (useful with a delay)

// Current options are:
yourTween.delay(1000);
yourTween.repeat(2);

// You can chain everything:
Tween.to(...).delay(1000).repeat(2).start();

Have fun :-)

Future work

The library itself will see many new features added to it. I have many use-cases for special things in mind (especially a reverse() function).

However, what I’m currently developing is a total visual timeline editor for this engine. Something like the Expression Blend timeline (see picture) or the Flash authoring tool one. It would ease the creation of animation by a multi-tons of times !

I will also get a dedicated website up and ready, with tutorials, showcase and examples with source code.

I’m also planning C# and C++ ports, if I find out that there is a real need for it.

Advertisements

11 Comments

Leave a Comment
  1. Kaworu / Jun 19 2011 13:02

    I read the article[GetStartedExample] very enjoyable.
    I was impressed with your work.

    Is tweenParticle1[in GetStartedExample] a tweenable object ?
    How can I create this ?

  2. Aurélien Ribon / Jun 22 2011 13:34

    Hello,

    Sorry for the delay, I was on holidays for a few days (got married last week :-)

    TweenableParticle is an example of the implementation of the Tweenable interface. Indeed, since the engine is generic, you need to define your own implementations for your objects, because the engine does not know how your objects work.

    In the example, the Particle class is one of your objects that you designed and created entirely on your own. Therefore, its behavior is not known by the tween engine. To apply some easing interpolations to its fields (x and y), you have to tell the engine how to mess with these fields. This is the purpose of the Tweenable interface.

    As a result, if you have a “Sprite” class in your application or game, you need to create a corresponding “TweenableSprite” class (or whatever name suits you) that will be used by the engine to apply interpolations and animations to the fields of the Sprite class.

    Implementing the Tweenable class for the classes that you want to animate is the only requirement of the Tween Engine. It is mandatory because of its genericity.

    I hope you understood what I meant. Feel free to ask any question ;-)

  3. Kaworu / Jun 23 2011 10:58

    Happy marriage !
    I heartily congratulate you.

    Thanks for your reply.
    Thanks for your advice, I was able to make the object move.
    I’m so happy (^x^

    However, unfortunately, I do not know how to use callback.
    —-
    Tween.to(sprite, TweenableParticle.ALPHA, 2000, Quad.IN).target(255).addCompleteCallback()
    —-
    In this line, what should I use as a argument for addCompleteCallback ?
    A simple function is inappropriate?

    I am looking forward to your Total visual timeline editor.

  4. Aurélien Ribon / Jun 23 2011 12:46

    Thanks :)

    Actually, you can’t pass functions as parameters in Java, only C# or C++ allows this: Java does not have the concept of “delegates”. Therefore, you need to pass to the “addCompleteCallback()” method an object implementing the TweenCallback interface. Juste create such object in your class and give it to the method, it will work (and yes, you have the right to hate the verbosity of Java).

    For instance:

    —————————————–
    private final TweenCallback yourCompleteCallback = new TweenCallback() {
    @Override
    public void tweenEventOccured(Types eventType, Tween tween) {

    }
    };
    —————————————–

    then

    —————————————–
    Tween.to(…)
    .target(…)
    .addCompleteCallback(yourCompleteCallback)
    .addToManager(yourManager)
    .start();
    —————————————–

  5. Kaworu / Jun 23 2011 13:07

    Thanks for your advise again (^x^

    I finally succeeded in using callback.
    Of course I don’t hate the “verbosity” of Java :)
    Actually, I am new at Java.

    Thanks a lot.

  6. Aurélien Ribon / Jun 23 2011 13:15

    Glad to help you ;-)

  7. Heitor T. Sergent / Jul 20 2011 00:46

    Hi Aurélien,

    I would really like to see this working with C#, it would be really helpful along with XNA.

    Would that take a lot of work?

    Also, I found your website through your post on the msdn forums, but I couldn’t find your email anywhere… Maybe you could put it on your main page just so people can contact you ;).

    Thanks,

    -Heitor

  8. Aurélien Ribon / Jul 20 2011 08:43

    I now it would be helpful, for XNA, WPF and Silverlight, but I’m waiting for the next big update of the java tween engine (custom bezier tweens) to port it to anything else. Indeed, managing to keep multiple versions synchronized is a tough job for a spare-time project, especially since I don’t have many requests for C# or C++ versions.

    However, you can use the project easily with C# thanks to the wonderful IKVM project (http://www.ikvm.net/). I need to look at this more deeply, more reports told that it should work out of the box. Maybe I’ll distribute a .net assembly coming from the ikvm use, but I think that after the next update I’ll write a C# version of the engine, shouldn’t be too much of a hassle :-)

    As for the mail, you’re right, I’ll include it (you’re not the first to tell me that).

Trackbacks

  1. Java Tween Engine
  2. [Java] Javaのトゥイーンライブラリ「Java Universal Tween Engine」を使ってみた。 | R o m a t i c A : Blog : Archive
  3. Universal Tween Engine v5.0 « Aurelien Ribon's Dev Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s