About the Tween Engine demo

In the previous post, I said that I completely changed the test desktop application of the tween engine. I’ll be more precise here.

Actually, I made a demo environment which lets me easily add demonstrations of the new features I may add to the engine. The application is composed of a launcher with multiple tiles (yes, I was inspired by the recent release of Windows8 consumer preview). Each tile is clickable, and will open a scene demonstrating a feature of the engine. Of course, every single animation, from the introduction screen to the launcher and the tests, is done with the tween engine. And, as always, the rendering process is backed with the all-mighty libGDX library.

Who says libGDX, also says desktop-to-android in a few seconds. Therefore, it would have been fool to miss the opportunity to bring the demo to android devices. If you want to test it, the application is now available on Google Play, for easier downloading.

Moreover, I was suspecting that, but now I’m sure: Mario Zechner, main developer of libGDX, can cast magic. Guess what? Desktop-to-web is now a reality, and again in a few seconds. Thanks to the GWT library, and the WebGL technology, libGDX powered apps can be converted to full html5+javascript, directly from your java code. You can try the demo on this page, all you need is a browser supporting WebGL (I know Google Chrome does). Hats off to you, Mr. Zechner.

TL;DR

Project page (with api + source + demo source)
http://code.google.com/p/java-universal-tween-engine/

Google Play page
https://play.google.com/store/apps/details?id=aurelienribon.tweenengine.demo

Html5 page
http://www.aurelienribon.com/universal-tween-engine/gwt/demo.html
Note: use ESC key to go back to the launcher from a test

18 Comments + Add Comment

  • On chrome 17 in Ubuntu 11.10 the webGL demo says webGL is not supported by the browser, even though it can successfully run webGL demos.

    • Yep, seems the GWT backend of libgdx does not support every webgl compatible browser. However, I used an alpha version of this backend, so I’m sure it has improved since then. I just did that as a proof of concept :)

  • Hi,

    Congratulations. I love your library because is very powerful, and is similar to iTween (http://itween.pixelplacement.com/) for Unity3D (the main idea).

    I am having a lots of problems with Android I implemented the example and the library works but no correctly (setValues is not called, getValues only once, I try using a simple loop with sleep…) I am sure that something is worng, therefore I try to download the source code of this demo, but I can’t find it in the main webpage.

    Thanks for post a solution ;)

    • You’re trying to use it in an android application or an android game?
      Your issue makes me believe that you don’t update the tween manager in an infinite loop.

      The complete source code of the demo is available here.

      Try to reduce your issue into an SSCCE so I can help you more :)

      • Ok thanks for the link :)

        I am trying your library in android application. I created a special loop for check that everything are correct:

        int lastMillis = 0;
        for(int i = 0; i<5; i++) {

        int deltaMillis = (int) (System.currentTimeMillis() – lastMillis);
        man.update(deltaMillis);

        Log.d("loop", "loop");
        try {
        Thread.sleep(2000);
        } catch (InterruptedException e) {
        e.printStackTrace();
        }
        }

        If this issue persists I put more information in the official forum in Google Code.

        Thanks

        • The reason is that the first deltaMillis will be equals to System.currentTimeMillis(), which is more than huge, and will terminate the tween instantly.

          Several things need to be changed in your code:

          - lastMillis has to be initialized to the current time, not 0,
          - You never update lastMillis,
          - lastMillis has to be declared as long, otherwise the delta will always be huge

          See this for the correct code: http://pastebin.com/9CYVezSR

          • Thanks Aurelien, now all works perfectly. I can print some values and apparently all is correct.

            Now I need to create some thread for update all continuously or use some android thread. I am not and expert, but I use iTween library for Unity3D several times, and I know it is not the same, but it is possible that your library in future versions give to the user the possibility that TweenManager creates this special thread for android or java applications transparently (similar to iTween).

            By on the other hand, I think that wiki needs some update (GettingStarted part) because this kind of things are not explained or have some errors (long types, don’t start with 0 and set methods in Particle class are not implemented). I am not an expert, but I had some problems.

            Thank you very much for your help; we are in touch.

            • I updated the wiki, thx for letting me know :)

              About the update thread: actually, the engine is mostly used in games, and every game already has an infinite update loop (called the “game loop”). So tween manager update only requires to put the update call in the loop.

              For android or desktop java applications, you need to create this loop yourself. I can’t really create it for you, since you would have a lot of synchronization issues. You need a total control over it to avoid concurrent access to your animated objects, and therefore need to create it yourself. iTween relies on the Unity engine, which features a game loop, so the update process is trivial. The Universal Tween Engine does not target any specific framework, so you need to synchronize the updates yourself. It’s trivial when you have access to a game loop, but requires a dedicated thread if that’s not the case.

  • I am working on an android application and a newbie to animations. I am not sure this question is relevant for you .Can i use this tween engine in android applications? . I have checked out the link http://stackoverflow.com/questions/5437936/android-tween-animation-of-a-bitmap and when i trying to implements Tweenable it shows error. I am using Latest version (6.3.2) library. Also do you have any sample code for android applications ?.

    Thanks

    • Don’t know if you were the OP of this stackoverflow question, but your answer is there :)

      Oh and by the way, the Tweenable interface is no more present since version 6. it has been replaced by a much more flexible TweenAccessor interface. See the Get Started page to know how to implement it.

      I don’t have a sample code for using it on a real Android UI since I only use it in Android games, but the answer I made in stackoverflow should point you in the right direction.

  • good engine

    hi iam newbie . i want to make a timeline for splash
    how can i change the screen when i finish the time line ?

    sorry for noob question . i just one to learn .
    thank you

  • please game a good tutorial … Thank you Very mutch

  • Hey Aurelien! Really cool library. You rocks!!!
    I’m learning about this amazing library
    @jacsdev

  • Hey Aurelien. Please im having abit of a problem. Is it possible to add a an SLPanel to a panel? I have been trying to add one and it just doesnt show up.. But when i place it on just a frame, it shows up.

    • It should be possible since it’s a JPanel behind the scenes. I can’t remember if I already tried that.

  • good library!!
    i am going to make an android application using animation for end task in college. May I use some codes from your application? If it’s yes, is there any requirement that I have to do?
    Need your response quickly. Thank you very much.

  • I am often browsing on the internet for content which could benefit me. Thx!

  • Having problems on Android getting a fade operation to work. I’m using libgdx 1.1.0
    I’m using TweenEngine-6.3.3. Basically, what is happening is the values returned through SpriteAccessor newValue[0] is constant and doesn’t change.

    Splash page code
    public class Splash implements Screen {

    private Sprite splashImage;
    private SpriteBatch batch;
    private TweenManager tweenManager;

    @Override
    public void render(float delta) {
    Gdx.gl.glClearColor(0,0,0,1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    // Start the TweenManager and link it to the running game delta
    tweenManager.update(delta);

    // Tell LIBGdx to start the batch and draw the object(s) and then end the batch.
    batch.begin();
    splashImage.draw(batch);
    batch.end();
    }

    @Override
    public void resize(int width, int height) {

    }

    @Override
    public void show() {
    batch = new SpriteBatch();
    tweenManager = new TweenManager();
    Tween.registerAccessor(Sprite.class, new SpriteAccessor());
    Texture splashTexture = new Texture(“images/libgdx.png”);
    splashImage = new Sprite(splashTexture);
    splashImage.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
    // Tells Tween to use the splashImage and adjust the ALPHA (Opaque) values
    // from 0 to 1 and then from 1 to 0 following a two second delay.
    Tween.set(splashImage, SpriteAccessor.ALPHA).target(0).start(tweenManager);
    Tween.to(splashImage, SpriteAccessor.ALPHA, 1).ease(Cubic.INOUT).target(1).repeatYoyo(1, 1).setCallback(new TweenCallback() {
    @Override
    public void onEvent(int type, BaseTween source) {
    ((Game) Gdx.app.getApplicationListener()).setScreen(new MainMenu());
    }
    }).start(tweenManager);
    }

    @Override
    public void hide() {

    }

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

    @Override
    public void dispose() {
    batch.dispose();
    splashImage.getTexture().dispose();
    }

    }

    SpriteAccessor
    public class SpriteAccessor implements TweenAccessor {
    public static final String TAG = SpriteAccessor.class.getName();

    public static final int ALPHA = 0;

    /**
    * This method is required by TweenAccessor. It is responsible for getting
    * color values from the target Sprite In this case we are returning the
    * opacity color a (r,g,b,a).
    * Returns int indicating the number of returnValues we are returning, or -1
    * if the default condition prevails and the assertion is fired.
    */
    @Override
    public int getValues(Sprite target, int tweenType, float[] returnValues) {
    int retVal = -1;
    switch(tweenType) {
    case ALPHA:
    Gdx.app.debug(TAG, “returnValues[0] = ” + returnValues[0]);
    returnValues[0] = target.getColor().a;
    retVal = 1;
    default:
    assert false;
    retVal = -1;
    }
    return retVal;
    }

    /**
    * This method is required by TweenAccessor. It will set the color values
    * in the target Sprite. (r,g,b,a).
    */
    @Override
    public void setValues(Sprite target, int tweenType, float[] newValues) {
    switch(tweenType) {
    case ALPHA:
    Gdx.app.debug(TAG, “newValues[0] = ” + newValues[0]);
    target.setColor(target.getColor().r, target.getColor().g, target.getColor().b, newValues[0]);
    break;
    default:
    assert false;
    }
    }

    }

    Output
    com.wws.kscepter.tween.SpriteAccessor: returnValues[0] = 0.0
    com.wws.kscepter.tween.SpriteAccessor: returnValues[0] = 0.0
    com.wws.kscepter.tween.SpriteAccessor: returnValues[0] = 0.0
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.0
    com.wws.kscepter.tween.SpriteAccessor: returnValues[0] = 0.0
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843
    com.wws.kscepter.tween.SpriteAccessor: newValues[0] = 0.99607843

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>