Hello, i was wondering how can i make case system that when i open the case there is spinning animation like the CS one. Can someone help understand how to do the animation? I can do the rest.
1 Like
Iâve not particularly made one myself, but I could just guess how they probably work.
Youâd likely store items in a module with different rarities/rates, and when you do a ârollâ the server has already chosen an item for you to get based on the values. The client is then told the item and the only real part of the roll is the predetermined landing spot where youâll have the correct item shown as rolled on. All the rest of the items are just filled in using the values and are purely there to mock you.
Hope this helps
3 Likes
The client opens the case, then fires a signal to the server with a remote event. The server picks the item from a list with different chances and rarities, the server sends a signal to the client to play the animation. After the animation is done, the server takes the cash, crate or whatever from the player and instead gives them the chosen item.
Iâm guessing the effect is done with a ScrollingFrame. You put images of the items on the list in the ScrollingFrame, then lerp along its CanvasPosition or Tween it to the Position of the label with the item the client received.
Not Sure, Iâve never made one but thatâs my best guess.
Thereâs also a video on youtube about this. It doesnât explain much, but thereâs a free model, maybe you can do it yourself after deciphering the code of the model:
Video :
The Model from the Video: https://create.roblox.com/store/asset/12667650400
Not sure if thatâs what youâre looking for but I hope it helps.
1 Like
Im looking for the animation code and how it works with comments like:
local test = script.Test -- doing something
so i can understand how it works.
Btw thank you and i will check the video out
Please do, if the video and the free model donât help, I might be able to throw together a draft, but since these systems are rather complex, I wonât be able to explain it in detail, just make a rough draft.
Well i checked the video and even inserted the model into a game but i still havenât figured it out. If you can help me figure out where is the animation implemented in the code or even do your own code i will appreciate it.
Thanks in advanced!
The free model has its animation part at the end at around line 161 of the CratesClient localscript. Since its a lot and you donât need all of it to understand the concept, I shortened it into an explanation of sorts.
First of all, the setup is important! You will need a frame with a horizontal list layout in it. That frame should be empty at the start. It will be the frame that contains the items and âspinsâ them. In the example script that frame is the âItemContainerâ.
First you wrap it all inside an OnClientEvent that is linked to the Remote which the server fires to the client when the player opens a case:
-- chosenItem: The item that the server chose
-- crateName: the name of the crate they are opening
CaseEvent.OnClientEvent:Connect(function(chosenItem, crateName)
end)
First of all, inside the function, we start off by defining how many items to display in the spin and at which position the one the server picked should be displayed.
local numberOfItems = math.random(50,100)
local chosenPosition = numberOfItems - math.random(5, 10)
Now we run a for loop to generate all the images or viewport frames for the items to display.
for i = 1, numberOfItems do
end
Inside the for loop we check if its at the picked itemâs position, if not we pick a random one to display. For this youâll probably need a module that handles picking items from crates and rarities and stuff.
local newItem = i == chosenPosition and chosenItem or
ChanceModule:ChooseItemFrom(crateName)
Now that we have the item to display, we can create the frame that displays it. You can either use imageLabels and store the imageId for all the item icons somewhere, or you can use viewPortFrames, But thatâs not really important right now.
Just set everything you need to set for the itemdisplay frames here such as background color depending on rarity, image, viewport, or whatever you want.
local newItemFrame = template:Clone()
newItemFrame.ItemName.Text = chosenItem.Name
...
Now parent the itemFrame to the ItemContainer frame and end the for loop
newItemFrame.Parent = ItemContainer
end
Okay! Thatâs the setup for the animation done! Now we actually need to animate the spin! For that we calculate the position the ItemContainer should have at the end first.
local CellSize = template.Size.X.Scale
local padding = ItemContainer.UIListLayout.Padding.Scale
local nextOffset = -cellSize - padding
local finalPosition = (0.5 - cellSize / 2) + (chosenPosition - 1) * nextOffset
Great, now we create a tween! You can make the tweenâs settings whatever you want. And if needed you could also provide the remoteEvent another parameter to define how long it takes to open the crate if not all your crates have the same opening time.
I use Quad and Out in the tweeninfo here because that would gradually cause the spin to slow down, but you can pick whatever you want.
local spinTweenInfo = TweenInfo.new(caseOpeningTime,
Enum.EasingStyle.Quad,
Enum.EasingDirection.Out)
local Tween = TweenService:Create(ItemContainer,
spinTweenInfo,
{
Position = finalPosition
})
Tween:Play()
Alright, now the animation is playing! Now we wait until it finishes and delete the stuff inside the container and reset it. If you want to, you could also clone the container from a template at the start of each spin and simply delete it at the end. You can also add fade out effects or something here.
task.wait(caseOpeningTime)
ItemContainer.Visible = false
ItemContainer.Position = originalPosition -- The original position that you set the container to
-- Delete all the stuff in it
for _, item in pairs(ItemContainer:GetChildren()) do
if item and not item:IsA("UIListLayout") then
item:Destroy()
end
end
Now just end the OnClientEvent and thatâs pretty much it for the animation!
Of course this isnât supposed to be a resource or anything, just an explanation, so it wonât work on its own, youâll have to make some adjustments to make it fit into your game.
I hope this helps!
2 Likes
Ok thank you so much i will read this carefully and will try the things that you sent me. Thank you again and have a nice day or nice night. Appreciate the help
1 Like
Hello, i just had time to test some of the code you provided and it seems to give me error, The error is ot on the TweenService
The error is TweenService:Create property named âPositionâ cannot be tweened due to type mismatch (property is a âUDim2â, but given type is âdoubleâ)
i think i know how to fix it, but not so sure
local Tween = TweenService:Create(ItemContainer,
spinTweenInfo,
{
Position = finalPosition -- The error is here
})
1 Like
i used a bit code from the Free model code and it seems to work now. Thank you tho for the help. I understood some things
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.