Universal Tween Engine -- Give life to your java projects (games, UIs...)

Engines, Libraries and Tools
#1

Hello!

A few months ago, I was desperately in need for an animation library, in order to make nice splash screens and UI animations for my android game. However, while Flash is crawling under powerful tweening engines, there was no such thing for java. Therefore, I made one, open-source, which reached its maturity a few days ago with the release of its 6th major revision.

A tween is basically an interpolation between two values that runs for a given amount of time. Of course, the Tween Engine does a lot more than that, and handles the life-cycles and the update mechanisms of the interpolations for you. Moreover, it enables the interpolation of every attributes from any object in any Java project (being Swing, SWT, OpenGL, Android or even console-based).


// In one line, send your object to another position (here x=20 and y=30),
// with a smooth elastic transition, during 1 second (1000ms):
Tween.to(myObject, POSITION, 1000).target(20, 30).ease(Elastic.OUT).start(myManager);

// Also, create complex sequences:
Timeline.createSequence()
    .push(Tween.set(...)) // First, set all objects to their initial positions
    .push(Tween.set(...))
    .push(Tween.set(...))
    .pushPause(1000)      // Wait 1 second
    .push(Tween.to(...))  // Move the objects around, one after the other
    .push(Tween.to(...))
    .push(Tween.to(...))
    .beginParallel()      // Move them all at the same time now
        .push(Tween.to(...))
        .push(Tween.to(...))
        .push(Tween.to(...))
    .end()
    .repeatYoyo(2, 500)   // repeat the whole sequence 2 times
    .start(myManager);    // and finally start it!

Feature set:

  • Zero allocation! Use your project safely on Android without fearing the garbage collector!
  • Supports every interpolation function defined by Robert Penner: http://www.robertpenner.com/easing/
  • Can be used with any object. You just have to implement the TweenAccessor interface when you want interpolation capacities.
  • Every attributes can be interpolated. The only requirement is that what you want to interpolate can be represented as a float number.
  • One line is sufficient to create and start a simple interpolation.
  • Tweens can be easily sequenced thanks to Timelines.
  • Tweens can act on more than one value at a time, so a single tween can change the whole position (X and Y) of a sprite for instance !
  • Tweens and Timelines can be repeated, with a yoyo style option.
  • Many callbacks can be specified (when tweens or timelines complete, start, end, etc.).
  • Simple timers can be built with Tween.call().
  • Source code extensively documented!
  • Wiki documentation to get you started!

[quote]Decription page: http://www.aurelienribon.com/blog/projects/universal-tween-engine/
Google code project page: http://code.google.com/p/java-universal-tween-engine/
Download page: http://code.google.com/p/java-universal-tween-engine/downloads/list
[/quote]
I made two java applets (first one is illustrated below) to let you understand what tweens (and timelines) are, check them out :slight_smile:

#2

Wow this looks amazing, bookmarking for future reference :slight_smile: thanks for making this!

#3

Now THIS is what we need to compete with Flash :stuck_out_tongue:

#4

It’s already night, but “I’ll be back” for this :slight_smile:

#5

Oh my god, ReBirth are you following me everywhere now?!?

#6

you can’t be serious… :cranky:

#7

Thanks guys.

If you really want to compete with Flash, just wait for my next open-source tool: a visual editor for your animation timelines.
It’s called the Universal Tween Studio, and will be as generic as the Tween Engine is.

Only thing needed is to implement the “Editor” interface, so the Studio can know what are the different properties of your objects (like “x”, “y”, “rotation”, etc. on the following screenshot). The editor may also be enhanced so you can directly drag your objects in your game and the modifications will be propagated to the Studio, like in the Flash tool.

For now, I will provide 2 implementations of the editor as examples, dedicated to the LibGDX framework: first one is the minimal implementation (5 lines required) so anyone can create his own implementation for any other framework, and second one is an enhanced version with custom drawing (the “recording” red frame visible in the game) and direct object modification with mouse.

Stay tuned :wink:

http://www.aurelienribon.com/blog/wp-content/uploads/2012/01/tween-studio-preview.jpg

If anyone wonders, yes, it’s heavily based on the Expression Blend design, since I love this tool for WPF development. ;D

#8

Yeah I think a desktop tool will be great. In my place it needs lot time to load the applet. However I already know tween’s capabilities by looking the library before :wink:

#9

This is pretty impressive. Is there any example on how to use it with opengl (ie. lwjgl)? Haven’t found one in the wiki

#10

The library is framework-agnostic. Basically, it interpolates floats from one value to an other. Therefore, these floats can be the x/y/z coordinates of your camera position for instance (to create smooth movements of the camera), or anything else. That’s your decision :slight_smile:

For instance, if your camera class is something like:

public class MyCamera {
	private float x,y,z;
	
	public void setPosition(float dx, float dy, float dz) {
		this.x = x;
		this.y = y;
		this.z = z;
	}
	
	public float getX() {return x;}
	public float getY() {return y;}
	public float getZ() {return z;}
	
	public void apply(GL10 gl) {
		gl.glTranslate(x, y, z);
	}

	... several opengl related lines of codes...
}

Then, you would implement a TweenAccessor like this:

public class MyCameraAccessor implements TweenAccessor<MyCamera> {
	public static final int POSITION = 1;

	public int getValues(MyCamera target, int tweenType, float[] returnValues) {
		switch (tweenType) {
			case POSITION:
				returnValues[0] = target.getX();
				returnValues[1] = target.getY();
				returnValues[2] = target.getZ();
				return 3;
		}
	}
	
	public void setValues(MyCamera target, int tweenType, float[] newValues) {
		switch (tweenType) {
			case POSITION:
				target.setPosition(newValues[0], newValues[1], newValues[2];
				break;
		}
	}
}

Only thing needed now is to let the engine know your implementation (required only once, in your initialization code):

Tween.registerAccessor(MyCamera.class, new MyCameraAccessor());

You’re done. You can now move your camera smoothly by firing tweens when you want directly on your camera object, like:

Tween.to(myCamera, POSITION, 200).target(1.0f, 2.0f, 0.5f).ease(Back.OUT).start(myManager);
#11

Also, I recently released a beta version of the Tween Studio library.
The library lets you create your animations using a visual editor like the one in the Flash Authoring Tool or in Microsoft Expression Blend.

More information here: http://www.aurelienribon.com/blog/2012/01/tween-studio-first-public-beta/

i’ll make a dedicated topic once it will be polished enough for 1.0 release.

http://www.aurelienribon.com/blog/wp-content/uploads/2012/01/tween-studio-preview-mini.jpg