Completed Custom GUI - JohnMH


#1
I’m going to be completely frank here, the current GUI that’s in the game… kinda sucks. While it’s relatively effective for what it’s meant to do, it just isn’t… pretty.
Because of this, among some other reasons that I probably shouldn’t mention due to ToS, I’ve decided to make my own GUI! It certainly went through a lot of changes, if you’ve checked my WIP thread on the matter.
Keep in mind that this falls under a slightly different window resolution, which would also impact gameplay positively.

Basic GUI

(This is simply an example of how it would look, excluding some variables. Also, I didn’t bother to add the friends list, because who uses that?)

There’s already some quite noticeable differences on here, if you look close enough. The inventory is completely revamped to not only have more of a refined look to it, but the tabs that come with it are also colorful! This, of course, is to add more character to it, rather than simply having it be… gray, and that’s it.

Directly under that, you can probably see the purple box that mimics the inventory. This is where all bags would appear, and you’ll be able to see different variations in the next part of the post. For now, I’ll move onto other things.

Ignoring the weapon that’s in the equip slot(again, for ToS reasons) you can probably immediately notice that the little tab for equips is a different color than the inventory. Probably. This isn’t 100% necessary, but it adds a little more character, and helps it to stand out from the gray just that little bit. After all, your equips are a bit more important than what’s in your inventory most of the time. The Nexus and Options icons are also connected to it, and are both visible at the same time. Before you ask why, it’s because there might be a time or two where you’d want to change your options in the realm, without needing the hotkey to do so.

You might also notice that, rather than your HP Pots and MP Pots being below your inventory, they instead connect your equipment to your inventory. This is completely intentional, as it’s easier to make it connected by this rather than slapping it down at the bottom. (Besides, it makes it easier to see it, since it’s closer to your HP/MP Bars.) At the same time, these will come with three separate options for the both of them. One of them is the simple ol’ text… while the second is unique bars that are color-coded to show how much is there! The third is simply both of them, with the number instead being at the bottom right of the bar, just in case you’re that one dude who likes both.

Speaking of HP/MP Bars, I’ll touch on those next. They have a lot more character to them, and more of an RPG vibe for sure! They’re still labeled accordingly, but you can easily tell they’re in a little disconnected segment of their own and not just… existent. They also have a little bit of shading on the ends just to drive their character home even more. As a bonus, scrolling over HP and MP will provide small explanations as to what their stats do, since newer players could use it.
HP: This stat is what keeps your character alive. Run out, and you’ll die.
MP: This stat is used for your abilities. The higher the tier, the higher the cost!

Directly above this, you’ll see the little player area. It’s most definitely revamped from the original, which is just… your character icon, and then your name. Instead, you get a nice little box with everything, including your Fame and XP - separated, too! - as well as three different boost icons. All of these are separated by the type that they are: Loot Drop, Loot Tier, and 2x XP(as to separate it from the bar). Scrolling over them will still display their time, though separately, and you can finally see how long an XP Booster is active for!

Moving directly above that, you have the map. It’s mostly unchanged, outside of the zoom in/out buttons being at the bottom left corner rather than the top right, and the top right being replaced instead by a button. You’ll see what this button does in the next part of the post, but I’ll give you a hint… ever notice the nearby player list is missing?

Just to the left of the map, what’s this? A status effect indicator?! Yes. It is. This will most definitely be explained a bit later, but to make it short and simple, this bar will show all status effects that you have, how much they give if they are a stat boost, and how long they last. In the case of a “?”, this will be for effects with an undetermined duration, such as Sick if you are standing in Toxic Sewage. Of course, it can get very long, but you’re pretty much never going to get so many status effects that it covers that much space. (Note: The numbers change in increments of 0.5.)

And onto the top left, where you’ll see a remade Star icon, remade Fame icon, and remade Gold icon. These are simply because the stars would fit better into the RPG style if they were… well, sprite-based, and because I find the old Fame and Gold to be… mediocre. As for their positioning, this is mainly due to the fact that Fame and Gold are only normally visible in the Nexus, so having them near the other part of the GUI that’s only visible in the Nexus would make a lot of sense, no?


Overlays

(This is also mainly an example of how things would look. Icons and bags/chests are there for helping navigation.)

I’ll go ahead and start with the most obvious part of these overlays: colored bags! This was by far one of the things I thought should’ve been in the game the most, what with the various different kinds of bags. In situations where there’s way too many people to see the bags
COUGH LOST HALLS
you’ll be able to tell what kind of bag it is before you even see any of the items. Outside of that, it’s mainly just a neat little change to make the game more A E S T H E T I C. Also, you’ll notice that chests get their own kind, and the lowest level loot containers all share the same one. This is mainly for simplicity’s sake. Also, Gold bag currently has no desirable drops, so it gets purple. And Egg Baskets are… Egg Baskets.

Moving onto the top left, what’s this? A large box with a button at the top right? Well, if you couldn’t guess based off of the TOTALLY SUBTLE HINT in the previous part of the post, this is of course a swap with the map. By doing this, not only can space be saved at the bottom right for slightly more visibility, and not only does it make for a much more clean GUI, but it also allows up to 16 players to be seen! This is by far the thing I’m most proud of with all of this, as going from 6 to 16 is a very big thing. (Don’t mind the icons that aren’t Archer in that area, as it is again for ToS reasons. Also, note: names fill up from top to bottom, starting on the left side and then going to the right.)

Directly to the right of that, you’ll see the little window that shows up when you hover over someone’s name. This is mainly done to look a bit nicer, and not transparent for whatever reason, as it isn’t really necessary. It won’t be getting in the way of gameplay that much, either, as you’d have to switch from your map to the nearby players in order to see it. It also includes the new star, as well as bigger text for rank, the name and class being on separate lines, and a smaller overall structure so that it isn’t as invasive when it is on screen.

Moving back over to the left and underneath the nearby players, this is merely a small little showcase for how the structuring of the status effect indicator works. It also includes the single status effect, since there are plenty of times where you’ll only be getting one status effect.

Moving right below that, you’ll see the backpack. This isn’t anything super interesting or anything, but it’s absolutely a way to see which one you’re on, since having one darkened or brightened to show which tab you’re on isn’t always the most visible thing in the world. (I’ve often gotten my inventory confused for my backpack.)

And directly under that, the pet GUI! Of course, things like the Name and such are purely to show what goes where, but you get the point. This particular part of the GUI is made to better separate the abilities from the details about the pet. Nothing much else.

Lastly, stats! These are easily much, much different than the one currently used in the game, and for a very noticeable reason: there’s no abbreviations… there’s potions! While this may seem like an unusual change at first, this is entirely for a reason. Upon hovering over a potion, not only will it show the name of the stat, but it will also show tell you what the stat does, just like the old days! This addition may not be the biggest thing, but for new players, it will help them get used to it a bit better, as without knowing what the abbreviations mean, you’re kinda lost.

These are what each potion will say.
Attack: This stat increases how much damage your weapons do!
Defense: This stat decreases your damage taken. Beware of Armor Piercing, though!
Speed: This stat makes your character move faster.
Dexterity: This stat makes you fire your weapons faster!
Vitality: This stat increases how much HP you gain per second.
Wisdom: This stat increases how much MP you gain per second, and aids certain abilities!


Components

This is self-explanatory. Here are some things to note.

  • Black Star would be used for a potential 6th class quest if it ever gets added.
  • The bars under the stat menu are, in order, 0 - 6 potions. They’re color-coded, as stated before, for easier reading.
  • The empty space in the player menu is where XP and Fame would go. Duh. As for the small, dim icons for boosts, they remain dim like that unless they are in use.
  • Empty bars for HP/MP and darkened bars for XP/Fame act like they do in the game currently.

With all of that insanely long typing out of the way, that’s the end of the post! Hopefully it wasn’t just a snoozefest and gave a bit more insight to what I was hoping to achieve.

If you have any comments, concerns, or critiques, absolutely make sure to tell me, as I’d love to hear it, regardless of what it is!


#2

mmmm
pretty sexy gui ngl.


#3

Nice black star


#4

I couldn’t see the yellow “L” at first, so I’m not sure if it would be considered “easier” reading.

I love everything else, though! I see you put a lot of effort on this!


#5

That’s just the text being a rainbow color, because I’m special. I meant the bars.


#6

Oh…I thought when you said

you meant the colors for “color-coded”, not the bars.


#7

I’m back after a year break bois. I hav 4/8 ppe lol. Also, great GUI, should implement


#8

if deca dont see this ima kms


#9

okay so basically i didn’t notice that in the components area i didn’t remove the shadows of the equips so i needed to update the entire post for that one change and basically i’m dumb lmao

also :b:ump