Crosshair animation on line trace trigger

I’m trying to create a crosshair that appears with animation only if the line trace hits something.
I’ve ended up succeeding in that part but the only issue is that the fade-out animation is starting at full opacity and if the fade-in animation doesn’t reach the end of the animation the transition between the two animations looks a bit weird.

Here’s an example.

As you can see I moved my mouse fast enough so the fade-in animation won’t reach the end of the animation and the fade-out animation starts at full opacity which looks weird.

The only solution I have figured out that would work is that the animation keyframes are somehow connected to each other.

For example, the last frame value of the fade-in animation should be the first frame value of the fade-out animation.
I’m new to widget animation so I don’t know if that’s possible and I would highly appreciate you guys helping me figure this out. :slight_smile: Thanks!

|
|
|
|
|
|
Solution:


A bit messy, but works.
If anyone has a better solution it’ll be awesome if you share :slight_smile:

I will go over this briefly: First, you check for any hit, in case there is you check if the opacity reached its maximum and if it is you do nothing.
(You do not have to do this but for safety and save from setting the variable to the same value)
Otherwise means it’s less than 1 so we will add a value as you prefer to the “Crosshair Opacity” (The value you add is determined by the speed of the animation you want) and we will set the Crosshair opacity variable to this new value for further use and setting the actual opacity of the crosshair using “Set Render Opacity”.

In a case you don’t have a hit we will check if the Crosshair opacity is not equal to 0, if it’s false then do nothing, if it is true then we will subtract with the same animation rate value you chose and used earlier, now we’re clamping the value so it won’t go beneath 0 and then set the Crosshair opacity variable to the corrected and clamped value for further use and set the actual Crosshair opacity value using “Set Render Opacity”.

How are you kicking the animation off?


Here I check if there was a hit and if the crosshair is visible, without this approach things get messed up.

The fade-in and fade-out custom event is just playing the animation forward or backward depending on the need.


This is the animation, I use render opacity to fade the crosshair, I actually don’t if there are any differences between the opacity and the render opacity, for now, I just use the render opacity.
For more details, the crosshair’s render opacity is 0 by default, It is not set to 0 once initialized, I changed the value in the designer.

Ok so if I understand this correctly, on tick you are running a line trace… If it hits something you want it to fade in as long as it stays on target and fade out when off target. The issue you are having is that when you play the animation in reverse it is starting at the end instead of where the fade in left off.

Right, so it’s not clear to me that this is possible with umg animation unless you can retrieve the current playback position. I don’t see a way to do that albeit I don’t have access to an editor to see what’s available. The documentation only shows get start time and get end time which is not what you want.

In lieu of a current playback position, if I were implementing this I probably wouldn’t rely on the animation…I would fade it in and out myself. Since you’re running this on tick it should be pretty straightforward and you’ll have complete control. From your blueprint you should be able to set the opacity directly. Decide what your fade in time will be then use the Delta time to determine an opacity factor. Make sense?

2 Likes

That is actually a pretty smart idea, didn’t think of it at first, it will also enable me to let the user decide the maximum opacity depending on his decision.
That will change my course of action, I will try it right away and come back with an answer, Thank you.

Howdy, what animation node are you calling? When you call a node to play the UI animation, flip flop between “play animation forward” & “play animation backwards”. Each of these respectfully will begin playing at the current point of the animation, it won’t start at the end or beginning of the animation. Ignore the do once for our purposes

That is a great solution, but I changed things a bit.
Because I want the user to set their maximum opacity preference, from what I know it’s not possible because you can’t bind the animation keyframe value to the specific value the user set, so I set the opacity per tick and you can set the user preference in the equal boolean as shown here:

That works, but after the line trace hits, the “animation” is delayed for some reason, haven’t figured that out yet, I would really appreciate it if you have any solution.

Anyway thanks for the solution :slight_smile:

1 Like

Glad it worked out. I can’t say I would have executed it the same way but with what you have if it’s working for you then run with it.

One issue I think you might have from the BP is that once you hit the user’s desired level you are still executing the set render opacity… Can you verify that the entire expression isn’t being evaluated? Meaning the value isn’t continuing to raise our fall?

I’ve managed to fix it, thanks for helping! :slight_smile:
I’ve attached the solution beside my post question if you need it.