12 User Interface Examples (Ui Competition)

Script Library
1

Here are my 12 separate submissions to the Ui Competition

Info Panel:

A simple info panel in the top left of the screen with coordinates and the number of entities in the game.

Pause Menu:

A pause menu with buttons for Resume, Settings, Save, and Quit.

Radial Menu Click Select:

A radial menu where you must click to select an option.

Radial Menu Key Up Select:

A radial menu where you can release a keybind to select an option.

Teams List (2 Teams):

A 2 team list where you can join a team and change the team name if you are the first on the list.

Tab System:

A tab system for multiple shops in one Ui panel.

Hover Change Html Element:

This hovering example uses the tilde ( ~ ) Html selector to allow you to hover over an element and as a result change the styling of a different Html element somewhere else on the page.

Loading Screen:

A cool loading screen.

Hide Interface:

This example shows how to hide the interface, including the top menu bars, chat, player names, and your mouse cursor.

Progress Tree 1 (Scroll):

A progress tree that you can navigate by scrolling your mouse wheel.

Progress Tree 2 (Drag):

A progress tree that you can navigate by clicking and dragging. You can zoom with the mouse wheel.

Drawable Region:

This example shows you how to create a drawable region on the client and then send that created region to the server to affect entities on the server.

1 Like
2

Wow! I will have fun reviewing these later.

3
  1. Info Panel:

Awesome for debugging game scripts without cluttering chat. I could see this turn into a custom dev console

  1. Pause Menu:

not sure which Moddio games would need pause tbh, but it looks nice. Not responsive at all, elements should shrink to accomodate smaller screens

    1. Radial Menus:

I think you are right about us needing a way to save local variables on server. One thing I noticed in your implementation is that you use 8 if statements, you should be able to refactor that into a script with less repetition. One benefit of refactoring this to more generalized code is that you can support any amount of radial items.

  1. Team List:

amazing, but lacking in responsiveness. I think the feature to name teams should be optional (maybe add a global boolean for opting out). Another useful addition to this would be some code to balance the teams, like disabling team switching when a team is too large.

  1. Shop Tabs:

I don’t think you can easily populate these shop tabs with actual items yet. We are working on displaying shop contents in custom UI, so this might become more useful soon. This also does not feature any responsive css breakpoints, so it does not display well on mobile.

  1. Hover Selector:

Hover does not work on mobile, so this demo currently only works on desktop. This demo shows that we need to give access to the image of each entity. Thinking sth along the lines of image url of <entity> at <frame:int> + inventory image url of <item>. Then you could iterate through all elements and display a dynamic list.

  1. Loading Screen:

Hmm, not sure what this would be useful for. Maybe for transitioning between different scenes. When playing on mobile, users can’t press the R key.

  1. Hiding Interface:

This will be incredibly useful in a bunch of games. I’ll copy this to some of mine actually :) Works best in combination w custom UI buttons, but that’s not needed as part of this example.

    1. Progress Trees:

Distance between nodes is way too large, can you put them much closer to each other? Right now there is no logic for purchasing/unlocking nodes, so it’s difficult to imagine this in use.

  1. Region Multi-select:

This one is also incredible! Seems quite customizable, one thing that would improve UX would be treating small selections as regular tap instead. Another improvement would be the option to ‘select on mouse release’ without confirmation. Because of how we handle our mobile input, this demo does not work on mobile. However if you change selecting to happen on right click/tap and drag, it would work.
If you want to improve usefulness, you could turn ‘deselect units after command’ into an option as well.

Some really great examples, thanks for making them!