Show off your UI designs

Little custom console i made in my free time (i was bored)


Personally id prefer this instead of the normal console but the console doesnt have a huge impact to the actual game anyways so yea.

19 Likes

Still Work in progress a Ui that i’m making for a Closed Community, a very simple Menu Ui made with Figma.

8 Likes


For the game I’m making.

1 Like

This “tween” (or lerp??) looks really clean! what easing did you use?

This looks really cool, whish i could get that

1 Like

i was planing on releasing it but its really unsupportive on mobile and its not fully developed. Maybe ill try to fix it up and release it at some point.

Well continue the good work then

A new color picker I made for my gradient editor plugin, CS Studio, features radial sliders for each color space component. You can try it out now if you own the plugin.

Demo

26 Likes

How did u make the script behind this o.O

2 Likes

How do you like my re-work of the website?

14 Likes

I’d recommend spacing things more out everything looks crammed onto the screen. But I like your vision







17 Likes

Updated Version This one is Sorta Old

10 Likes

Where did the sidebar go?
You wouldn’t be able to trade, view transactions, etc.

I was gonna make like a little overlay on the left side when you move your mouse near there it pops up

Ok, ok.
I just saw you added a bit more padding, and the inbox/welcome back message.
Nice job!

1 Like

Well, I wanted to take the mobile path and put the other things at the bottom of the screen but Im not sure if that will look as apppealing

You can try it, then if you don’t like the design, remove it.

Today, I made my (still very much unfinished) experience’s disclaimer screen cuter! My friend and teammate @rafa902O15 designed the new logo (which is the third iteration), which inspired me to change everything else’s colors to fit it.


Also, the button that teleports the player to the test map has been redesigned to look more 3D, inspired by some of the buttons in Royale High. In the future, most buttons will have this look, because it looks nice and animates well!
The new button click animation.

Without the new color scheme, the logo looked out of place; If you want to see what it looked like, click below…

EDIT: Rafa also made the “PMM” heart graphic that is shown beside the text in the blue box.

8 Likes

For context here’s what some of the variables mean:

  • start: The angle where the slider begins (going clockwise)
  • finish: The angle where the slider ends (going clockwise)
  • angleSize: The angle size of the slider (it is 270 degrees in the gif)
  • clampSize: The angle size not being taken up by the slider divided by 2 (it is 45 degrees in the gif)

And this is what the core of it looks like.

calcSize(
	clampValue(
		convert180sTo360(
			math.deg(
				math.atan2(
					mousePosition.Y - hitboxOrigin.Y,
					mousePosition.X - hitboxOrigin.X
				)
			)
		) + 90,
		start,
		finish,
		clampSize
	),
	start
) / angleSize

The convert180sTo360 function takes the 0 to 180 (0 to 180) and -180 to 0 (180 to 360) degree angle and converts it into 0 to 360 degrees.

Then, the clampValue function makes sure the angle isn’t going out of the slider range and handles the logic behind what happens when the user is out of the slider range.

Finally, the calcSize function finds the angle difference between where the user’s cursor is and where the angle starts.


After everything, it returns a value ranging from 0 to 1 which is sent to a function to apply it to the entire GUI.

3 Likes