I’m trying to create something like Roblox Uno’s stacking card system, as shown in the picture below. Essentially, the cards are stacked in the bottom center of your screen.
And when you click on one of the cards, it gets pulled up so you can see the whole card.
How will I be able to achieve this?
(The card must be stacked in the middle, keeps a distance between themselves and when clicked, the card can rise up)
This is done using the ZIndex property!
TweenService, Udim2 and ZIndex can all help you here.
GuiObject:TweenPosition()
Udim2
GuiObject.ZIndex
I should specify that my problem is more in the maths of spacing out the cards, rather than the properties I need to manipulate. Yes I know it involves UDim2, some tweening and ZIndexing, but how will I space out these cards?
What do you mean by spacing them out? Just set the selected cards ZIndex to the highest so you can read the card.
The cards are not stacked on top of each other, there is a space between each, so you can see a little of each card.
I’m pretty sure it’s just a hacky UIListLayout that makes them merge, no math needed.
How about the overlapping thing?
Again, use ZIndex to set them to overlap over one another. Just use a UIListLayout as stated above to position them ontop of one another to give that “overlapping” look.
Can UIListLayout change the ZIndex of each card?
No, you would need to script the ZIndex value yourself. All UiListLayout does is change the positions.
