When you develop games you usually have a lot of animations like moving cursors, menu items, texts, images and more.
Tweening is a method that generates numeric in-between values of an animation from a origin value to a target value.
In the projects I made in the past I learned how convenient it can be to have a library that let you animate any numeric property of any object you provide. While working with ActionScript I used the TweenLite library from Greensock. They recently released a JavaScript solution of their tweening library but unfortunately it requires a global window object and the setTimeout function. Also it comes with a lot of overhead for browser support. So this was not really good for the usage in Sphere.
That's why I went to write my own plan JavaScript tween library. The usage is written in the file. But I will give you a small example how to use it:
Somewhere in your game loop you have to call this once every frame:
tween.update( frameTime );
So a simple gameloop could look like this:
RequireScript( "tween.js" );
while( true ) {
tween.update( 1000 / 60 ); // Assuming we run with constant 60FPS. Use a calculated frame time in your final game!
Delay( 1000 / 60 ); // Only supported in TurboSphere. In normal Sphere you have to implement an own Delay( ms ).
FlipScreen();
}
With that game loop given lets prepare a tween and render something to the screen.
RequireScript( "tween.js" );
var position = { x: 100, y: 200 };
// Tween position to 300,0 in 5 seconds using a smooth ease out:
tween.to( position, 5000, { x: 300, y: 0 }, { ease: tween.ease.quadOut } );
while( true ) {
tween.update( 1000 / 60 ); // Assuming we run with constant 60FPS. Use a calculated frame time in your final game!
Delay( 1000 / 60 ); // Only supported in TurboSphere. In normal Sphere you have to implement an own Delay( ms ).
Rectangle( position.x, position.y, 50, 50, CreateColor( 255, 255, 255 ) ); // Render white 50x50 rectangle to position.
FlipScreen();
}
et voila! ^^ You should see a moving white rectangle.
I also think of timelines, but will not do anything in this direction until I really need it. That would also require some refactoring in the tween.js I think. Sooner or later I will also put those scripts in one github repository. That will be easier with those RequireScripts you currently have to adjust based on your folder structure.
You can get the tween library here:
https://gist.github.com/Metallix/628de265d0a24e0c4acbIt requires the linked list script I provided earlier here:
http://forums.spheredev.org/index.php/topic,30.0.htmlhttps://gist.github.com/Metallix/5373204The tween library: