koobas.hobune.stream
Is there a way to animate dynamic layout group changes?
I have a reasonably complicated layout system in my UI that allows for anywhere from 1 to 16 elements. These elements are in either 1 or 2 rows, and are dynamically centered and resized based upon how many elements were added.
I do this by adding all the elements into the scene, then setting the game objects active or inactive based upon how many elements I want.
This works great – they are positioned correctly, resized, etc. There's just one problem – any layout group changes happen instantaneously, which is jarring for the user.
Is there any way to make the layout basically lerp its changes, as opposed to instantaneously doing them?
float lerp(float v0, float v1, float t) {
return v0 + t*(v1-v0);
}
...really? $$anonymous$$aybe my question wasn't clear. But, your answer... I guess a lot of people don't know how to do much, but I'm not one of them. I have several published games, I am a professional, I know what I'm doing. The question is: when I add another item to a layout programmatically, I don't want everything to snap into its new places, I want it to position slowly. Unity does this position change automatically, there is nothing for me to lerp. I'm basically looking for a checkbox or another technique.
So here's how I did it:
1) Create the hierarchy of what you want in your layout system. Make all those layout elements empty rect transforms (maybe with aspect fitters or layout elements or whatever you need).
2) Duplicate the hierarchy, and put in your visual elements (Image, Text, etc) instead. Delete all layout components from this duped hierarchy (no grids, horizontal layouts, aspect fitters, etc).
3) In every duplicated hierarchy element, I added a script that has it smooth follow its corresponding layout element in the layout hierarchy.
This way, all the player sees is the visual element as it tries to smoothly move to the logical layout position and size.
Yes, it is. It really should be a built-in feature. On the plus side, once you start following this pattern, it's very easy to replicate everywhere.
At some point in the future, I will likely make an Asset Store bundle for this. I'll also make it handled by a single script, and will automatically dupe the hierarchy etc at run time, ins$$anonymous$$d of having to do all this manually.
I lost my s*** when I looked at this picture and realized it was you. Thanks yo, I'm using this advice right now.
Haha. Glad this is useful for you. I also have the scripts that do this if you want them.
is there a video tutorial? I'm not understand how you did it. :(
Are you mean:use the invisible rect to response the control of layout system,and visible element follow it's invisible rect?
Yes, essentially. There are 2 canvas groups that have the same hierarchy. One group has all the layout data in it but no Image component or anything else visual. The other has no layout elements at all, but all the visual elements. It also has some code in it somewhere that causes it to interpolate its position and size to match its corresponding layout element.
Hi, I've done it like this: you can use all your group elements as LayoutElements then Instantiate that element as a "dummy element" to know its location in layout and then Instantiate "original element" with "Ignore Layout" on so you can animate it at the position of dummy element, and when the animation is done you can set "Ignore Layout" false again. I hope this makes sense.
