Last edited on 19 August 2021 - 08:00 AM by GyllieGyllie

Hello everyone,

Welcome to our second developer blog. In today's blog we'll be talking about our custom developed UI system we use for all of our menus across the client. This system was originally created for BLC 3.0 and received a big update for the BLC 3.3 release and some optimizations coming up in the BLC 3.4 release.

The UI system allows us to easily and rapidly design new menus, yet also allows us enough flexibility when it comes down to styling. For those who are a bit familiar in the development world and more specific web development will see that the system is very heavily based on just normal HTML & CSS but just done in a more Java styled approach.

The original BLC 3.0 setup

In the original version that we used for the 3.0 release we created the first base concepts of having UI elements that each allowed to receive different styling like positioning, sizing, coloring… All of the methods, elements and such were named after the HTML/CSS concepts it was based on and worked exactly the same. This allowed us to easily port over all the values from the designs made by our UI designer.

On top of the default HTML type of elements our system also has a bunch of custom elements which allows for easier reuse across multiple menus. Examples of this are things like a LogoElement which is a combination of an IconElement (which holds the lion logo) and a TextElement (which holds the name Badlion Client).

The changes for the BLC 3.3 restyle

After the feedback we received from the initial BLC 3.0 launch we redesigned all our menus for the BLC 3.3 update including more transparency as well as streamlining the colors more. Here we noticed that our original system had some limitations due to the fact we didn't work with classes yet and you had to put each CSS element on the element directly. This made us not only have to write many extra lines of code in each menu definition but also limited us to reuse the same styling in multiple places to be able to change a color in just 1 place for example.

We therefore decided to also spend a little of time implementing this classes mechanic like CSS into our system along with a debugging tool to easily check where the used data is compiled from. In the screenshot below you can see an example of how multiple classes are being combined to style the hovered element (outlined by the red box).




During this restyle we also changed how scaling worked. In the original BLC 3.0 setup we had everything designed in 4K and then scaled it down based on your actual screen resolution. This caused some issues for people who played with a resolution that was a lot smaller and made some buttons or text too small to use/read. In this update we changed it so everything is designed in 1080P and not scaled to your resolution. We did make sure that other things did still scale in some form where parts of a menu that are scrollable grow along with your resolution. An example of this is the mod sidebar menu where you'll see a lot more mods if you have a 4K screen compared to a 1080P screen.


The BLC 3.4 Optimisations

So as mentioned above we changed a lot of sizing to more relative sizing compared to fixed sizing. This brought some performance issues in certain menus due to how calculations were done when opening a menu or during searching or any action that changed how the elements were positioned. In the upcoming BLC 3.4 update we changed the calculation logic to be more performant and also be more cached. For example only recalculating a percent length if the parent size was changed. What does this mean for you as the user? It means less FPS drops when opening BLC menus! Poggers!

This change will also allow us to add even more functionality to the UI system in the future. Some examples of features we are planning to add are media-queries which will help us to do a certain class based on the screen resolution. For example on a 4K screen make the menus a bit more wide as they currently might look a bit tiny.


Conclusion

Since the start of the BLC 3.0 development process we've been working on our own HTML/CSS styled UI system that allows us to create menus very easily by just copying over the structure/values our graphic designers give to us. We have also been optimizing this in the last few updates and still plan to add more functionality. The UI system is a big part of a lot of our features and there are many more features coming where we'll be extending the use of this even more.

Thanks for taking the time to read about the UI system in this latest Developer blog. Let us know below what you would like to learn more about in the next Developer blog from our team at Badlion.

Posted on 19 August 2021 - 08:24 AM

Nice :)

Posted on 19 August 2021 - 11:37 AM

ok great

Posted on 19 August 2021 - 12:00 PM

Automatically Deleted

Posted on 19 August 2021 - 02:42 PM

Great job, well done!

Posted on 19 August 2021 - 02:44 PM

3.3 UI Looking really clean!

Posted on 19 August 2021 - 06:18 PM

sick

Posted on 20 August 2021 - 12:18 AM

pogg

Posted on 20 August 2021 - 04:43 AM

Bom trabalho

Posted on 20 August 2021 - 06:35 AM

poggies

Posted on 20 August 2021 - 08:21 AM

Automatically Deleted

Posted on 20 August 2021 - 03:18 PM

Good job =)

Posted on 20 August 2021 - 09:45 PM

Best Gui everrrr poggggg!!!!

Last edited on 21 August 2021 - 03:55 PM by Siktyer

Everything looks neat! whats missing is if BadLion added a feature where the client launcher closes when Minecraft launches (Maybe if you dont have the BAC ANTI-CHEAT installed?) + remove "User Account Control" when opening BadLion its kinda annoying, then its golden. :)

Posted on 23 August 2021 - 09:21 AM

You can already make the launcher minimize if you launch Minecraft. On the launcher click on the settings cogwheel below the version selector and check "Minimize Badlion Client Launcher when Minecraft is running."

The User Account Control unfortunately cannot be disabled. Windows doesn't allow us to change the level based on certain options. It's just global for the whole application.

Posted on 30 August 2021 - 11:13 AM

pls help idk how to download it xD