Animated grid of quads UI Control

Started by
2 comments, last by Headkaze 8 years ago
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):
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.

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).

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.

This topic is closed to new replies.

Advertisement