UI Roundup - The Road of Only Roadblocks Comes to an End

Today, we're going to go through a few of the new interfaces that you will get to use very soon.

UI Roundup - The Road of Only Roadblocks Comes to an End

Hello!

It's been a while since the last post we made and some things have happened. Fortunately, it's now finally time for my first post on this site! I'm so excited. I've got so much cool stuff to show off! Like this:

...Uh, wait, sorry. That was the wrong image. Don't look at that. No! Stop! Look at these instea-

NO! What the hell?! Why on- Oh. I see the problem. It looks like I have the wrong folder open. My apologies.

Anyway, a few months ago, Zeblote made the first post about UI, and things have been pretty quiet on the UI front since. And yet, a lot of progress has been made. Today, we're going to go through a few of the new interfaces that you will get to use very soon. For each interface, I'll post how it looked in Alpha 4, how it looks in Alpha 5, and an overview of various new features we have added.

Let's Begin

The main menu in Alpha 4.

The new main menu is the first thing most of you will see when you boot up Alpha 5. There are many changes to the layout, and while all the original features are carried over (save the defunct "Tutorial" button), we've added a lot of new stuff too.

Behold:

The main menu in Alpha 5.
  • Fancy button layouts are nice, but they get in the way of building an instantly usable menu, and ordering things in a way that makes sense intuitively. Instead, the menu options are now structured into a single stack, in order of relevance to a typical first-time user.
  • That crappy changelog widget we always forgot to update? That's a real-time news feed now, fetching posts directly from this very blog and beaming them right into Brickadia. Included are a bunch of links to more posts, the website, all changelogs, and our Discord.
  • You can now edit your avatar from the main menu.

A minor detail, but: logging in has received a bit of a face lift as well. This started as a routine re-styling, but turned into a small amount of polish. The reason? We anticipate a lot of new users in Alpha 5, and we want the first thing they see to be something that looks fairly good too:

The Alpha 5 login screen.

Change your Options

The options menu is arguably one of the most important menus to get right in any type of game. It's where players go to lower detail settings that affect how well the game runs, how audio settings are adjusted, and, currently, where most players go to learn the game's controls.

The options menu in Alpha 4.

In Alpha 4, the options menu is one of the better UI in the game, but it's still a bit of a mess. Everything is crammed into one dialog, and the whole thing is forced onto the left side of the screen so that you can actually see what you are doing when you adjust graphical settings. For every other tab? That's wasted space.

Here is the same menu in Alpha 5, split into its various parts:

I'd love to go into a lot of detail about all this, but since there are so many new changes and features, here's the basic rundown:

  • No longer are all options crammed into one awkwardly placed, awkward to use menu. Instead, we've made four seperate options menus, with a "hub" that you can go from and back to without the whole thing closing on you.
  • The only part of the menu that is left aligned is the only one that needs to be; Graphical Options.
  • EVERY options menu, without exception, has presets. You can have presets for your General Options, to switch between different building and play styles. You can have presets for your Graphics Options, so that you can switch between high detail screenshot settings and snappy building ones. You can have Audio presets, to switch between what sounds best for different audio devices, or different situations. Most importantly, you can have Controls presets. I'm sure I don't need to give you many ideas for what you might do with those.

Create or Edit Your Game

Here's the thing we threw together for alpha 4.

The map selector GUI in Alpha 4.

There were a few problems with this. Most notably, that it expanded out starting a server to two dialogs, yet wasn't usable for changing the map.

Here's what Alpha 5 has instead:

In Main Menu.

Now, we have a unified UI for both starting your server and editing it. This not only saved us a lot of work, but let us present the server's settings (of which there are not currently many) in a much more paletable way.

  • Advanced things, like your welcome message, quotas, and global damage settings, aren't shoved in your face now when you start a game. You only see the simplified server info on the left unless you go into the tab yourself.
  • Map editing, advanced server settings, permissions and soon visitor management are combined into one easy to use admin menu that lets you control everything about your server.
  • You can make changes to everything you want to edit about your game at the same time, and, crucially, anyone you give permission to can too.
In-game role setup.

This brings us to the redesigned role setup menu:

  • No more chasing up/down arrows to re-order your roles. You now just click and drag them where you want them to be.
  • You can finally change the color of the owner role without editing your JSON file manually.
  • The big one; Custom roles can now be used to deny permissions as well as allow them, such as a role that bans people from building in your server.
  • You might notice we're missing presets in this menu right now. No worries - it'll be addressed in a patch later.

Edit your Avatar

The old avatar was not much of an avatar editor at all - it was only usable in game, and let you change about four things.

  • Your face.
  • Your chest decal.
  • Your hat.
  • Your part colors.
The avatar editor from Alpha 4.

Here is the new avatar editor:

The avatar editor from Alpha 5.

For the design of this UI, we stepped well away from the traditional methods of selecting from lists and using sliders to customize your avatar. In this menu, the name of the game is click and drag. If you want to put parts on your character, you drag them on:

And if you want to take parts off your character, you just drag them off again.

Painting is pretty simple too. You open the palette, select a color, and it stays open and out of your way while you go to town:

Faces and decals are now treated the same. Collectively called Stickers, they occupy their own tab and are dragged onto compatible parts the same way parts are dragged onto compatible sockets.

Some other things to know:

  • Obviously there are presets - you can make as many outfits as you want, name them whatever you want, and put them on and take them off whenever you feel the need to do so.
  • Drag and drop is mostly optional - though reccomended for managing asymmetrical avatars, you can click everything in the catalog rather than dragging it to "quick apply" it to your character.
  • Because this menu embeds a whole world for you to view your character, it's available from the main menu now. No more need to be in-game to edit how you look!

Join a Game

The server list in Alpha 4.

This one's a doozy.

In Alpha 4, the server list was built very deliberately to condense the most useful details about each game into small entries, always ordered by whether passworded, then by number of players, then by name. A helpful blurb from Brickadia Services even tells you the number of servers that are running, and how many people are playing. In Alpha 5, we keep several of these ideas, but add new ones; new information, new buttons, and new visuals.

The server list in Alpha 5.

Here's what's new:

  • You can now search the server list. This has been frequently requested and I'm sure it will be useful once this list fills up to the point where it is longer than the length of the screen - something we've never observed in QA due to the small population.
  • There are server details displayed that previously were only available via the Brickadia Services webpages. These include things like the number of unique visitors, the server's uptime, and the server description.
  • Additionally, there's an even cooler new feature: you can now view the exact list of people in each server. This is the same list you get when you view the server here, on brickadia.com. It'll even tell you how long everyone has been playing.

View the Player List and Server Details

The player list in Alpha 4.

The player list is, and continues to be, an indispensable tool for seeing who is in your game and performing basic actions, be they related to moderation or simply useful for seeing who's around you.

The player list in Alpha 5.

Alpha 5's player list expands on this concept. Not only does it show you the same details panel you get in the new server list, when you select a player it will show you a lot of useful info about them:

Viewing a player's details.

You can see, in order of emphasis:

  • Each person's roles.
  • A summary about what each person has done while in game, and how long they've been around.

Each user has User Actions, and the actions that you can make use of depend on what permissions you have. As a normal user, you can generally:

  • Clear your own bricks.
  • Report other players.
  • Trust/untrust other players.
  • Teleport yourself to other players.

As server owner you can do all of those things and more:

  • Kick people.
  • Ban people for times measured in minutes, hours, days or weeks.
  • Clear people's bricks.
  • Teleport other players to you.

Join and Create Minigames

Like the Create A Game menu, the Minigame List was pretty thrown together in Alpha 4:

The minigame list in Alpha 4.

Functionally, the thing is a fork of the player list, with the exact same layout but different buttons. And so this was one menu where I thought I would really change things up:

The minigame list in Alpha 5.

This one isn't exactly a highly notable menu, but here's a brief list of new stuff:

  • A Minigame's thumbnail shows you at a glance how balanced the population of each team in it is - four red players and four blue players. The thumbnail also shows you the gamemode.
  • Minigames can have descriptions now! Write some text about what your minigame is about to convince other people in the server to join it.
  • Several details are shown; most notably, the number of players inside the minigame, the minigame's creator, and the minigame's game mode.
  • Finally, some small details; I've added a way for you to search through minigames (If you are ever somewhere where the minigame list is hard to find stuff in), and you can also now see how many minigames are running and at a glance which ones are open for you to join, what gamemodes they are running and how many people are already playing.
Closed or trusted-only minigames have a padlock icon next to their name.

Choose Bricks and Items

Alpha 4's catalog.

The catalog in Alpha 4 had a lot of work put into it, but everything was built manually. The new one in Alpha 5 not only has a unique look and feel, but is built as a dynamic family of widgets that can be embedded into other menus. Take a look:

The Alpha 5 main Catalog, showing Bricks.
The Alpha 5 main Catalog, showing Weapons.
An embedded catalog showing spawnable pickups.

In Alpha 4, the catalog was one menu. In Alpha 5 - as you can see - catalogs are everywhere, a first-class part of Brickadia's UX.

In terms of how they work, things are mostly the same - click an entry to select it. However, there's a bunch of new stuff:

  • You can now click and drag things out of the main catalog into specific inventory or brick slots, and re-order your own inventory as well.
  • The brick catalog has been re-categorised to be more friendly to new users, and resizable bricks are now marked with a special icon as well.
  • While all catalogs previewing models retain the standard rotate-on-mouse-over behavior, other catalog types do equally special things. For example, audio catalogs play a sound preview when different entries are hovered with the mouse.

Wrapping Up

Phew! What a lot of stuff we got through.

We're getting very close to Alpha 5 now, and personally, I can't wait! It shouldn't be too long now; in the meantime, if you have any questions or ideas, feel free to find us on Discord, Twitter, or e-mail.