• Advertisement
Sign in to follow this  

Animated grid of quads UI Control

This topic is 747 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm looking for a tutorial or example on how to create a grid of quads that animates based on the selected item. The selected item scales pushing the items around it away.
 
A video of the effect (at 19 seconds in):
Edited by Headkaze

Share this post


Link to post
Share on other sites
Advertisement

I am going to presume they used the Scaleform library for those effects. That would take an entirely dedicated library and team to make something that slick. To roll your own would be quite the undertaking. Your not going to simply find a tutorial to show you how that is done and build your own.

Edited by ExErvus

Share this post


Link to post
Share on other sites

There was a guy here who did really cool things with non-linear spaces...

 

Unfortuanatley you cannot implementing just by multipying by a magic matrix(because the transformation is not linear).

 

Additionally this effect could be "replicated" using gradients. 

for example if you have a focus point F, meaning that the "objects" around it are going to bend depending on their distance to F(or something similar, depends on the effect).

A more realistic solution is that they render the UI normally to a texture, and then use this texture on an already bended model (drawn by an artist or generated via functions).

Edited by imoogiBG

Share this post


Link to post
Share on other sites

The closest I can find to the effect is SpringyStars but it's not quite what I'm after.

 

I have a grid of quads rendering and use linear interpolation to animate their translation/rotation/scaling every frame. So as far as animation goes that is already done and now I'm more interested in the application of an algorithm to imitate the effect in the first video.

 

I have stored in each quad an array of the neighbouring quads so I can calculate the distance and scaling of the quads around it. So if the "selected" quad is scaled I need the neighbouring quads to push away from it.

 

I guess it could be as simple as adding the distance * scaling of the selected quad to each neighbouring quad's translation. I would just like to see a working example if possible.

Edited by Headkaze

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement