Hi, I am wondering how I would go about making a rolling system similar to ink game, this is my first time really dealing with rng. I’ve got a module that on a function call returns a string from a dictionary depending on the weight of the item. Currently I have a very simple animation that just loops a random item until it actually shows you what you got. But I would prefer a cooler animation. If you are not familiar with the way Ink game handles this is. Kind of similar to a spinning wheel but then in a straight line. I have absolutely no idea how I would handle this since I only have simple knowledge with coding when it comes to UI I can’t currently provide a clip but i will sometime soon.
You should first have a template with the title, rarity, icon, anything you want. You also need a table containing pre defined text and colors for the text, images for icons, etc.
You will also need a pre-defined offset in between the frames and an UI to place the frames inside (doesn’t need to be big or cover all of the X axis (i would actually make it square), but you have to change the offset depending on the size you create the frame, if you’re using Scale)
First, for the server, make it generate a random number, between 30 to 40 I would say (or as many as you want before the actual item). Loop through the randomly generated number and call the function that returns a string from the dictionary. Add the string that it returns to a table (i would name it BeforeItem (i’m not the best at naming). Then generate about 5 more random items and add it to another table named AfterItem. Make sure you give both of these tables to the client, with the hierarchy something like this:
{
Item = {Rarity = nil, Name = nil}, -- do this however you want, you can also send the colors and the icons from the server if you don't want to detect them and handle them in the client
InBetweenItems = { -- or whatever you want to name it, i'm not the best in naming
Before = {
Item = {Rarity = nil, Name = nil},
Item = {Rarity = nil, Name = nil},
...
},
After = {
Item = {Rarity = nil, Name = nil},
Item = {Rarity = nil, Name = nil},
...
}
}
}
Now for the client, I would first get the item you got and generate a frame with a function that clones the template and applies colors (either detecting the name and etc and applying them or you can send the colors from the server where I’m guessing you have the table with the items and their rarities, i would recommend the server way). Then I would place it in the middle (0.5, 0.5). After that, loop through all the items in InBetweenItems.Before and place them going to the left by substracting the previous frame’s X position by the offset (you should save the previous frame’s position in a variable). Then do the same but going to the right with InBetweenItems.After . Now you have the UI made.
Now for the animations, you can substract to the X position of the frame the number of items in InBetweenItems.Before (#InBetweenItems.Before) multiplied by the offset (in scale), and then tween it to the original X position (0.5, 0.5).
I haven’t tested any of these, so some might not work (like the tweening), but I hope it puts you atleast into the right track.
1 Like
Thank you for the help! Im gonna try this out in a bit and I hope it works, I already have a template with. a colorgradient inside that will change depending on what you rolled. I just needed to know the second part as I am horrible when it comes to tweening
No problem! Hope it works out for you
So currently I’m kind of taking a different approach cause it will work better in my messy code. I’m pretty much just making a scrollingframe. then making a template that will copy exactly 100 times. and it will tween to the 50th template and that will be what you got. I know its really messy code but I’m kind of tired and if bugs and issues arise i can always change it up.
All i really needed to know is how to move UI, when you mentioned tweening i looked into tweening CanvasPosition and that seems to do the job for my needs so thanks!
This seems to be working well!
This is the result: Streamain - Share Videos Online for Free — Watch — Cool Ability Gaem - Roblox Studio 2025-09-02 12-02-17.mp4
I’m glad I was able to help! I’m not sure if ScrollingFrames that are used like this will work well with phones tho, you should probably check it.
If you give me the code I can help you re-organize it (if you want)
wait first ill finish implementing it into my actual rolling system. then ill check if there are errors with mobile.
Lol i just found the weirdest bug, i just rolled a mythic 0.1%??
That’s either really good luck or your code is wrong. I mean, I wouldn’t really say it’s a bug since, it could be extreme luck, but if youre getting it way too many times then
yeah it was a bug, i didnt even set the power you should get. but i set it to another, i guess it just changed something to the mythic power’s name somehow, anyway its fixed now and its amazing!
btw do you know how i should make it so the frames dont stick to the scrollingframe?, cause right now theres no space in the scrollingframe. and the padding is really complicated? I’m sorry i don’t do UI design
What do you mean sticking to the scrolling frame? Do you mean like too close or touching the edges?
yes its too close, there is a bit of space on the bottom side but not on the upper side
btw i fixed and i just got a 0.01% lol and this time it isnt fake since i actually got the power too
In my opinion padding is too glitchy (or atleast for me). What i normally do is make a frame that is invisible and then add the actual frame inside that invisible frame and scale it down slightly. The bottom space is probably the scroll bar. Did you set the scroll bar thickness to 0?
not yet, i will try that real quick!
I’m not really saying it’s glitchy as in it doesn’t work properly, but it’s really bad for tweening, as it messes up offsets