Any kind of interpolation inside of a function?

Hello!
I have so many instances where I need to smoothly interpolate between two values, to make gameplay feel smooth, etc.
For the past 7 years I can’t figure it out, I asked before and I shall ask again:

How do you guys make stuff smooth? Just thousands of timelines scattered around all the blueprints?
How about some universal function library with timeline that will get triggered, do it’s thing, like “Move Component To” node does?

Thank you.

There’s iTween for that!


iTween : Free, smooth, procedural object animation
easyCSV : Read data from any CSV and put them in an easy-to-access string map!
Runtime DataTable : Import and export game data to and from CSV or Google Sheets while your game is running!

1 Like

Ah! I though I had it installed, but then I noticed that I had “TweenMaker” vs. iTween. This one is so much better, just tested it, amazing! Thank you.

Oh, glad to hear that! I know there are a few tweeners out there but I like to think iTween is the easiest to use :smiley:

Cheers!

Jared - Sorry to bother you here, but I have gone through all the forums in search of how to use float interpolation “Float From/ To”. Would you please have some example somewhere? I can’t figure it out. It would help me grearly, thank you.

Basic interpolation in BP would look like so:

But you cannot allow Interp Value go out of scope as there will be nothing to sample next frame. There’s also a bunch of these:

image

There’s curve sampling and there are Timelines + Lerp, too.

Yes, though this is usable only with tick, or using timeline as source of tick - which brings it back to the original problem. You cannot use this inside of functions or UMGs (make using tick and gates after the interpolation is done = hassle).

Why not? Besides UMG has its own animations system so this is pretty redundant. You still can use it, though. Just keep the interpolated values in scope.

If you want to see an interpolated result every frame, you must calculate it every frame - there’s no way around it.

Interp in a function:

Each rotation interpolates with different speed, same function.

Hard to disagree but this works OK for simple stuff:

Call the event to start interpolating, do the matching rotation check in the function, it then calls the event to close its own gate.

This is for a situation, where you need to update it constantly, but not really usable in case of for example doors, animating of material parameters inside of UMG, and simple lerps between two values - each actor would need to have tick, or timeline, to update that specific smoothing function.

Timelines are good enough for some time, but after hundreds of actors, it’s not efficient to keep setting up timelines for each small effect. And when we call BP functions from C++, that’s where the real hassle starts - I have to then reroute the fuction back to event graph where timeline can be created, get the effect “done”. It’s incredible amout of spaghetti, and to re-read these scripts 1 months later is a pain.

Therefore I am searching for the tweening workflow.
So for example I have a door that player can “barricade”, and this function is called from C++.


Now, when the player barricades it the metal grate closes - instead of doing all the spaghetti and setting up timelines, I made a public function library, into which I set up “Animation Rotate Component”. Therefore, from anywhere in the project now, I can call this function for rotating components:

Now all is nice, this is how it looks inside of the function itself, it’s basically simplified iTween node, that I can customize later:
Though here is the problem - I can’t find a way to animate materials with iTween, specifically floats. I have a material in UMG that I need to lerp between two values, but with iTween it doesn’t seem possible. With the UMG animations it’s not possible either - cannot take out float value, and Timelines cannot be created inside of UMG.
Eitherway - yes I was doing very similar stuff to you this whole time, and it’s creating a mess in the entire project just because I need to interp between two values… :slight_smile:

Think of the UMG animation as of 0-1 value over time, an alpha. You cannot pipe in the data into the animation but you can read its current time and sample against an external curve. And animation speed is adjustable. Example:

Scroll down to the image with a curve - plenty of fine control. Quite usable with MDIs.

Here’s another auxiliary method:

This allows you to fire off events during UMG animations.

When you combine both, you actually have a timeline inside UMG that allows you to load external curves. Once set up (in a Data Table), it becomes quite versatile. The upfront work is considerable, as with everything moderately complex.

I can’t speak for iTween, looks crafty AF.

For another approach to reusable, modular interpolation for any actor (not umg):

Create an actor component that interpolates necessary values for its owner (you can’t have a timeline in an actor component but it will Tick), the component removes itself once it’s done. This way those effects only exist where they are needed. The only thing you need to do is to Add Component with the desired interpolation data.

Or, or, or wait for @JaredTherriault to blow our minds with his answer :wink:

1 Like

To clarify:

  • the component:

image

This would rotate the target actor and destroy itself.

Some times I use this

and the actor dont need tick active

@Everynone this is actually pretty smart, I’ll explore this further! Did you create just a component class BP?

Yup.

And do note that the actor components work with inheritance. But you cannot instantiate them from class like an actor, not in BPs.

Nice, I’ve set it up, and it seems to work! I can create just bunch of components for the needs I have - bit of a setup but very controllable which I like.


Definitely less spatghetti and very modular!

1 Like

@Pavelioso It looks like you found a good solution here already, but just to answer your question about how to use iTween’s Float From/To:

This is easiest to set up in an ubergraph, but you can simply add a bespoke function to update the float if you prefer.

Basically you call the tween, set the function name for the update which will be called every Tick. In the full node, the field is “On Update Function Name.” In this example, I pass the “oufn” parameter with the function name as a shorthand. Then I set the object that has the named function which in this case is self, making sure to plug it into the “on tween update target” pin.

Then on each Tick the function I named is called and I just need to get a reference to the iTween actor created by the node and access its DataTypeValues struct. Since I’m doing a float tween, I access the float value member of that struct. The value in the struct is the interpolated value specific to that tweening actor. As long as you save the actor as a variable you can access it globally from any function in your blueprint if the Ubergraph route is not for you.

Please note that this system does not allow for parameters in the named functions.

I know it’s not as simple as the other tweens, but this allows for a completely agnostic tweening solution with a little setup :slight_smile:

You can remove getWorldDeltaSeconds node and just use delay by 0 seconds. A 0 seconds delay will always wait until next tick.

1 Like

Hello Jared, thank you for taking your time to answer my question - helps a lot - it’s exactly what I needed. I am gonna try to implement it into the project. Also by Everynone I have succesfully managed to implement the component actors, which might be better solution for us because its native - upgrading out versions might be a bit complicated with plugins. Though, I can’t use that solution in case of Widgets. So I will see! Jared, great plugin nevertheless!

2 Likes