koobas.hobune.stream
Smooth transition of objects in Grid Layout Group
I have constructed a UI shop element using a Grid Layout Group on a canvas. On the grid object I have a script with an array of button-prefabs which can instantiate into the grid. When I click a button, the button is destroyed and all of the buttons below are moved up one step.
It looks like this:
What I want to do is make the second and subsequent objects have a smooth transition when moving up the grid.
I could use a function to interpolate the entire grid object to move it up, but that would be a sloppy solution. (I would have to force the player to buy the first item)
I can't change the position value of the child objects in the grid. Is this effect somehow possible with grid layout groups?
Hi, I am trying to get a similar system like this into my game. Did you ever figure out how to add a smooth transition in your grid?
Not really the way I wanted to. There seems to be very little coverage on grid layout groups in Unity.
What I ended up doing was to dynamically change the height of the grid's rect transform as items were added. I measured the height of the buttons in the grid, and had a bit of code telling it "for each item in the grid, increase grid height by x with a smooth lerp".
The grid was set up as a vertical, upper left child alignment, so when an item was added it would first be added outside of the screen (as it would not yet fit inside the grid), and as the grid's height started increasing, the first item would follow along the top of the grid, and the new item popped up underneath.
Likewise, when an item was clicked and removed, the grid height would decrease and the items inside would follow.
It looks like this: 
Not sure if that's a kind of solution you could go for but I hope it helps.
Hi again,
So I actually I got something that works really nicely. I based my stuff off this video tutorial series: https://www.youtube.com/watch?v=bMuYUOIAdnc. Pretty much what the guy in the videos does is he creates invisible placeholders and puts those in place to where the cell was and he does some rearranging on the grid by modifing all the childrens sibling index. In my solution I do it somewhat similarly but I have added DOTweens so everything has a smooth transition.
That's a neat technique. Will look into DOTween aswell, might come in handy. Thanks!
