Hello, i’ve seen Car system using speed counter that was in a round shape, and line filled from right to left, i wonder how is that made
Reference above ^
How to make gui like that, and how to code it to fill with a counter? any ideas?
1 Like
I’m not entirely familiar with your knowledge of UI, but it isn’t much effort to create!
Here’s a guide on how you can make the the fill work:
1. How it works
You’ll be creating 2 half circles and apply transparent gradients with half the gradient missing. Using the rotating feature, you’ll be able to change how much of that circle is displayed.
(For the right, copy the same method just move the red circle to the right so it aligns with the black box)
2. Designing a half circle
You’ll want to make a frame that has ClipDescendants on and has the same height but half the width of the circle.
Place a new frame/image inside of this frame and make it the same height but double the frame’s width. This will make half the image show.
Next you’ll want to add a UIGradient and set the transparency into 4 keypoints:
Keypoints (Time/Value)
i. 0, 0
ii. 0.499, 0
iii. 0.5, 1
iv. 1, 1
3. Changing progression
To change how much is shown, change the rotation between Left: -180 to 0 or Right: 0 to 180 degree. This will rotate the gradient to show the half visible part (0) or half invisible part (-180)
4. Right-Side
Copy the same for the right but position but place the inner circle in the right spot so it’s the right half showing. Additionally, the UIGradient rotation must start from 0 to 180.
5. Programming
To make this a learning experience, I’m not going to give you the code but instructions on what you must do.
Keeping track of the progress using decimals of (0-1) you can easily figure out where the gradient must be.
Remember, from 0 - 0.5 the left circle is only being rotated between -180 to 0 whilst the right is sitting at 0.
Anything above 0.5 the left circle will sit at 0 and the right will move between 0 to 180.
This is the progress bar, for the line indicator showing exactly where you are, just add it into another box that takes the entire circle and rotate that box.
Replacing the frame for an image:
You can design the image of the UI and then place half the images as the circle instead of frames and make sure the fill is a separate image so you can use the transparency only on the fill.
Given the reference image, you’ll need three 90-degree rings. First, the outline of the meter needs to have a width-height ratio of 4:3. It’s best if it takes up the whole frame for ease of math.
For the ring image, it needs to be a quarter of a full ring that takes up one of the corners of the image. You only need one image, the rest can be copies.
Now, you then want to put this in-game, and parent three copies of the ring image to the outline frame. You’ll also need to set the size of each ring image to {1,0,1.333~,0} in order to give it a 1:1 H-W ratio. This should make it so that rotating the ring image will keep it within the bounds of the outline. Then you can enable ClipDescendants like Don pointed out to make it so that anything out of bounds is not shown.
Finally, to tie everything together, you rotate each ring to fill the meter, each one covering 90 degrees of the meter. For example, the first third is covered by the first ring. Once the meter goes to the second third, you stop moving the first ring and then start moving the second.