How to create this effect? (GIF)

Development Rendering
1

http://cdn.makeagif.com/media/2-04-2015/Tltije.gif

I want to have text that ‘swings’ into place very similar to how it was done in clip from Remember Me. Any suggestions how to go about doing ?

Thanks

2

I dont know if you want it like , but I am doing it by using a plugin which allows me to load HTML pages as materials.

So you can do a simple HTML which displays an icon and a text. You can control the content of both via JavaScript and your JS can be controlled with your blueprints.

The plugin is called VaQuoleUI. There are also other plugins, but one is free.

3

You can also do using 3d UMG widgets placed in the world. You would create a material that is partly translucent (additive would work best) and then apply it to a quad static mesh. How you apply the motion to it would be up to you, it could be done with a timeline animating the rotation (with the mesh pivot placed at the top) to create a simple swinging animation that fires when the player gets close enough.

You don’t even need UMG to create really, the swinging animation would be blueprint based of course, but the text fading in can also be created in the material itself.

4

Hello ,

Seeing you mentioning , do you know if there is a simple “how to” on 3D UMG Widgets please ?
I’ve used UMG a little already to do some basic placeholder 2D UI but I don’t know where to start with 3D UMG Widgets and placing them into the world.

Thanks

5

Hey Max4dmoon,

So far I have no experience with them since they are relatively new (and there is already too much to learn :p), but there is a tutorial from the Doc’s available now, which you can find here.

The only other tutorial I know of was done during one of the recent twitch streams with Dan Hertzka, starting at the 18:00 minute mark of video: https://www.youtube.com/watch?v=dsrZgmv23Yc

It is basically created through the new “Widget” blueprint component and then placing that blueprint into the world, the rest is the usual UMG design.

Hope that helps!

6

You can achieve swinging and bouncing/elastic easily using iTween in addition to the 3D widget component.

7

Thanks ,

It helped a lot and it’s very easy (I can’t believe I missed the one in the doc…)

8

Ahhh… beautiful! UMG is one of those areas I’ve not touched at all, yet. As you say, there’s so much else to learn! However, it seems that it will be on my plate very soon. Thank you for the direction!

9

That’s a great idea. I never touched UMG. I will definitly play around with it today.

10

I’ve jumped into UMG and the water is fantastic! Loving the possibilities.

However, I’m confused how to make the swing effect, still. I can certain move a widget or change the alpha of an image through the UMG animation but I don’t see how I could have it rotate or swing according to a timeline or curve of some sort. What am I missing?

Is the only way to do by rotating the whole widget through another blueprint? What if, just like in the example, I only want part of the text to swing? In that case I wouldn’t want to rotate the entire widget according to a timeline, but just one part of it.

Thanks!

11

The idea is that you would have multiple 3D widgets swinging independently.

12

Got it working! Woo-hoo! Thanks