0 Favourites

[behavior] Twixt - A lightweight tween

  • Hey, folks. Here's my first go at the SDK. I needed a tween that could scale sprite fonts, and decided I wanted to take the code a different direction than LiteTween, so I wrote my own.

    Twixt 0.53

    [attachment=0:1fb7oug5][/attachment:1fb7oug5](This is packaged as a c2addon, but this forum doesn't like that extension. Just rename it to Twixt_0.53.c2addon for drag-and-drop install.)

    Twixt is optimized for efficient, linear tweens. Easing is not supported. It can tween position, size, scale, angle, opacity, and Sprite Font scale.

    Note that tweening Texts is a bad idea! WebGL handles non-bitmap fonts in a very inefficient manner. If you need to tween text, make sure it's a Sprite Font. I recommend using Sprite Font Generator and SpriteFont+ to make them as painless as possible.

    Also note that this is a beta preview. Anything may be broken or become broken at any time. Use with caution! (The 1.0 release should be forthcoming in the not-too-distant future.)

    If you find any bugs or have any suggestions, just let me know!

    Thanks.

    Docs

    Most of it should be self-explanatory, but here are some details.

    Scale

    When scaling a sprite, the internal scale system is used as if the SetScale action had been called. When scaling other objects, the basic width and height properties are used and their start values are used as scale factor 1.

    Expressions

    StartA - Start value for position X, size width, scale factor, angle degrees, opacity percent, or font scale.

    StartB - Start value for position Y or size height. Ignored for scale, angle, opacity, and font.

    EndA - End value, as above.

    EndB - End value, as above.

    State

    Start - Tween is stopped at the start position.

    Forward - Tween is running from the start to the end.

    Paused - Tween is paused between the start and end positions.

    Reverse - Tween is running from the end to the start.

    End - Tween is stopped at the end position.

    Changelog

    08/09/2014 - 0.53 - Fixed tweening only Y or height with unchanged X or width

    08/08/2014 - 0.52 - Fixed scale of flipped/mirrored sprites

    08/08/2014 - 0.51 - Fixed scale reverse end detection

    08/08/2014 - 0.5 - Changed debug tweened and state values to their text equivalents (instead of their constant index)

    08/07/2014 - 0.4 - Added "scale" as a property to tween

    08/01/2014 - 0.3 - Added a condition to check the tween state

    07/31/2014 - 0.2 - Revamped configuration actions and expressions

    07/30/2014 - 0.1 - Initial release

  • It's quite nice, I like it.

    Easy and simple.

    One thing - could you add an action to set "two values" for target. For something like

    Target X - mouse.X

    Target Y - mouse.Y

    Besides that it's nice simple plugin.

  • It's quite nice, I like it.

    Easy and simple.

    One thing - could you add an action to set "two values" for target. For something like

    Target X - mouse.X

    Target Y - mouse.Y

    Besides that it's nice simple plugin.

    Thanks!

    I just overhauled the configuration actions. I realized that trying to set the tween properties individually would break things most of the time (oops), so I moved everything into two actions. There's "Configure", which is just like the editor properties. Then there's "Configure+" which allows one to set everything individually and from expressions. I think that's what you were looking for.

    I also re-did the expressions to make them more meaningful.

    Thanks for the feedback!

  • Yeah, that's it!

    I really like Configure and Configure+ solution.

    Keep it going!

    Just one more thing, If your plugin is called Twixt it should have same name in C2 (for now it shows up as Tween)

  • Just posted 0.3, which adds a condition to check the state of the tween.

  • Yeah, that's it!

    I really like Configure and Configure+ solution.

    Keep it going!

    Just one more thing, If your plugin is called Twixt it should have same name in C2 (for now it shows up as Tween)

    Thanks! Glad I could help.

    The "Tween" name inside C2 is actually on purpose. I wanted a name that was consistent with the rest of the design experience. Texts are called Text and sprites are called Sprite, so similarly I thought tweens should be called Tween.

  • TrickyWidget : It's quite elegant already! I'll wait to see how it evolves, but it will eventually be a nice supplementary tool to c2's arsenal.

  • TrickyWidget : It's quite elegant already! I'll wait to see how it evolves, but it will eventually be a nice supplementary tool to c2's arsenal.

    Thank you! It's nice to hear that it's shaping up to be a useful contribution.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • I just posted 0.4, which adds a "Scale" property to tween (see the docs for details).

    Enjoy.

  • Thanks!

    and like always some requests

    1. Action to stop tween (You can start, reset, reverse and pause only)

    2. Debugger State value. I really like what you did in debugger, showing all available values is powerful. But for better visual sake could State show names instead of numbers? Like Start instead of 1, or Pause for 2

  • Thanks!

    and like always some requests

    1. Action to stop tween (You can start, reset, reverse and pause only)

    2. Debugger State value. I really like what you did in debugger, showing all available values is powerful. But for better visual sake could State show names instead of numbers? Like Start instead of 1, or Pause for 2

    Good suggestion on State in debugger. I'll do the same for Tweened, as well.

    What do you mean by a stop action? How would it differ from pause?

  • If you are moving from point A to point B and you pause in the middle - You actually did not reach the end of your tween. If you press start again you will continue previous motion until you reach the end. In this case "Start tween" works like a "Resume current tween".

    While stopping the tween will mark your current position as the end position. Pressing Start should not do anything until you set new target.

    Don't know... maybe I'm overthinking this.

    And one more expression could be useful - "Current time". To return how many time, in seconds have passed from start of the tween. For example if your tween duration is set to 7 seconds. It will return value between 0 (start of the tween) and 7 (end of tween)

    This could be a nice addition to stack things up. Or do something else at very specific time of the tween.

    Sorry for all this requests (moaning about) but this plugin is so nice and so simple to use. I've been using it for last few days and it saves me already a lot of time.

  • If you are moving from point A to point B and you pause in the middle - You actually did not reach the end of your tween. If you press start again you will continue previous motion until you reach the end. In this case "Start tween" works like a "Resume current tween".

    While stopping the tween will mark your current position as the end position. Pressing Start should not do anything until you set new target.

    Don't know... maybe I'm overthinking this.

    And one more expression could be useful - "Current time". To return how many time, in seconds have passed from start of the tween. For example if your tween duration is set to 7 seconds. It will return value between 0 (start of the tween) and 7 (end of tween)

    This could be a nice addition to stack things up. Or do something else at very specific time of the tween.

    Sorry for all this requests (moaning about) but this plugin is so nice and so simple to use. I've been using it for last few days and it saves me already a lot of time.

    No need to apologize. It's good to have feedback and I'm glad you're already finding it useful.

    On both of these points, it's starting to get outside of how I intended the tweens to work. However, I think you could approximate both by using existing functionality. For your "stop" action, you could pause the tween and then re-configure it to the new values. For the "current time", you could chain multiple tweens with the on end conditions. (I might consider mid-tween conditions at some point, but it would be a bit complicated to implement.)

    One note of caution on making use of Twixt in its "in progress" state: things could break at any time! (Or, indeed, already be broken.) I don't recommend it yet for production use. But if you do, be sure to back up before you install a new version! Hopefully I'll have it hammered out enough for a 1.0 release in a few weeks.

  • Meet 0.5, which tweaks the debug Tweened and State to use their text equivalents.

  • And 0.53, with some bug fixes.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)