Cool image effects with easing functions

Yesterday, AFRLme showed me an undocumented (?) feature: Image transformation/rotation with "easing functions". A very powerful tool and very easy to use (only one single line of LUA!). Here is a simple example with some effects, but there are no limits to combine these functions to generate spectacular effects inside your adventure. Move your mouse around over the images:

https://www.dropbox.com/s/anzow3vz0h67rn5/easing.zip?dl=0

Please be free to extend that example with other effects and upload it again.

Here is the code of a falling tree for example:

You need a link to an object (first line), you have to set the rotation center to the root of the tree (second line) and the third line rotates the tree a quarter turn (90 degrees) in a time of one second (1000 ms) with a bounce effect at the end of the rotation.

This easing functions you can apply to: translation, rotation, scaling, visibility (did I forget something?)

More informations about easing functions you can find here:
http://easings.net/

In Visionaire the keywords are swapped. For example "easeOutBounce" on the website above is "easeBounceOut" in Visionaire!

This is super cool, and very useful for animated menus!
Thanks!

Tweening with the to() & startObjectTween() functions can be applied to most data structure fields from position, to offset, to opacity, to rotation, to scale. Or to other things such as scene brightness & much much more.

Just think of it as a loop, but in which you get to control the transition time it takes to get from point a to point b, as well as specify an easing value to control how the transition builds up & ends.

@ Lebostein: that's some really nice examples there mate, I especially like the balloon example as you showed both movement as well as scale, which made it look like the balloon was traveling up & to the north on on the z-index.

Neat!
I think the subject has been discussed on another topic, long ago, but I wonder whether it would be possible to apply an ease-in/ease-out to the camera scrolling. Maybe by overriding the normal, "un-eased" scrolling effect and using action areas to decide where the camera should be centered?

Of course. Actually you could use the openGL viewport camera with the follow character shader toolkit function if you wanted to.

By default the easing can't be set for the function, but it wouldn't be complicated to update it so that easing can be specified. It's as simple as adding a new input variable to the function & then removing the current easing & replacing it with the variable name.

Very nice showcase. Thank you!

@AFRLme: I understand, you don't have enough time covering all these things in the Wiki in the near future. But simple example projects like the one Lebostein provided would be of great help to learn about the scripting possibilities that still lack documentation. If you find the time to do something like that quick-and-dirty, please do so (thinking of shaders and such).

The shader stuff would be best showcased by SimonS as he wrote the openGL shader into the engine source code as well as the shader toolkit script.

I have actually already created a few examples of various shader functions (ved & resources) which were linked in the resource section of some of the shader toolkit function pages on the script index page in the wiki.

I'm really swamped at the minute & creating .ved examples, no matter how quick & dirty still take quite a while to organize & sort out. Usually about an hour or sometimes more, which is quite a lot of time considering that's on top of the time it takes to write a single wiki article, spell check & go over it multiple times to make sure it's written ok & all in order. Minimum time I spend on a wiki page is about 20 minutes, but most of the time it will be a lot longer, as I tend to spend a lot of time trying to think how to phrase things in a way that will make sense to as many people as possible.

P.S: the problem with the wiki is that I've mostly covered Lua related stuff as opposed to editor related content. I think more people would appreciate the basics (such as editor & small tutorials) instead of the advanced stuff like Lua functions, openAL sound functions or openGL shader stuff.

@AFRLme: Thanks for the great help with that stuff!

Some questions remain:
1. What is the difference between the startObjectTween() function and the to() method?
2. For example, If I start more than one rotation modifikators at one object. Are they running parallel and interfere/compete with each other or they replace each other?
3. How I can stop/pause a tween (or how I can reset the object without delay)?

No problem.

1. to() function is a much neater shorter version of startObjectTween()

2. I'm not sure, you will have to test it, but I think it should either wait until other is finished or it will cancel it out & replace with new tween. I think the tweens are created inside of a table.

3. Just enter the default value with a delay of 0...

Ok, thanks.

To point 3: reseting with zero works. But it gives strange effects if I try to reset and restart a tween. The rotation speed decreases with every restart:

Maybe I need a pause between the calls...