The Crescent Rises Again
A series of posts on the return of Crescent, what happened, and what will happen next.
Part 3: Just U and I
A series of posts on the return of Crescent, what happened, and what will happen next.
Part 3: Just U and I
Hello yet again, Crescent! Thanks for visiting.
It's been a while since the last post, and for a good reason. The team has been hard at work, cracking down on the to-do list like mad bulls in a china shop. We made tremendous progress in the recent weeks, from implementing major new features, through improving various existing content, to fixing many bugs and issues. As it stands right now, we finished over 80% of the tasks in our to-do list - and that's huge progress considering the size and availability of our team.
One of the reasons for this big boost in productivity is the return of no other than the Embodiment of Code herself - @Mochi, the badass developer from old Crescent, is making a comeback and joining our rows again.
In case you haven't met her yet, mochi is easily considered one of the best GMod developers out there today, with years of experience and vast knowledge in anything that is Source and GMod. An ex-Facepunch forums moderator, Mochi was the mastermind behind NEP, a community which hosted her groundbreaking, fully-custom mini-games servers, as well as one of the founders of Project Crescent and the main driving force behind its development.
With Mochi joining myself and @veri on the mission, Crescent is closer than ever. We can't wait to finally share this new chapter of Crescent with you all, and I hope you're as excited as we are!
Anyway, time for another update on the status of Crescent. Today we will be diving into the world of colors, fonts, shapes and sizes - the UI of Project Crescent.
Trouble in the HUD
Our most recent developments all revolve around a very important part of the Crescent experience: the User Interface (UI). We always took pride in our well-designed interfaces, which are one of the main highlights of Crescent now as well. Unfortunately, even today it is very common for servers and communities to put very little effort into this area, often resulting in a half-baked and very poor experience that can harm other aspects of the game as well. The UI is one of the things that the user interacts with the most, and it plays an important part in the overall feel of a game. Even some of the most popular servers lack in this area, often due to lack of interest or effort. It's easy to half-ass a UI, but there are consequences.
We knew the importance of a solid UI system since the very beginning, and a lot of thought was put into both the look and functionality of our various UIs and HUD elements. The goal was to combine both concepts into a sleek and convenient system that is easy to use and looks hella good as well. None of us are professional UX designers, yet we were able to craft an excellent concept overall, with a clear and consistent design language and simple yet powerful functionality. And indeed, we received a lot of praise for our UI work in old Crescent. The solid and straightforward design was very well received among you, the players, and many of you also praised the nice visuals and feel we added.
However, even with the great work so far, there were still some problems and weak points. The time constraints we were facing during the development of old Crescent forced us to cut some corners and even leave entire areas of the UI untouched in order to hit our deadlines, and there were also some specific designs that could've used more work. Armed with the very valuable feedback we received both during old Crescent's run time and during the work on new Crescent from the alpha testers, we focused our recent efforts on this, and dived into our UI once more to add what's missing and improve what's needed.
One of the main aspects of a successful UI is consistency. Having a consistent look and feel to the UI turns it from a collection of separate parts into a single, continuous system. Colors, locations, fonts and sizes - all these play an important part in ensuring this.
All this led us to develop our very own design language for Project Crescent (and Crescent TTT specifically) - a set of rules and conventions that we base our entire design process on. We picked a consistent set of fonts - the big bold Crescent font for titles and headers, Raleway as an alternative, and good ol' Roboto for regular text, as well as a clear color palette that works well in almost all situations - lots of whites, blacks, grays for the base, and our signature Crescent Yellow as an accent. We also went with the proven-and-tested flat look for most of our UI, a system that is modern, widely recognized, and well received.
It's very easy to understand and recall the general look of Crescent's UI: large, flat buttons and elements; Dark backgrounds with bright front colors; Square and sharp shapes; And the use of drop shadows for heights/leveling. We took some inspiration both from Google's Material and Microsoft's Fluent designs, and then combined it with our own ideas to create what we simply call the "CrescentUI" system.
From here, we created a framework within our code base that allows us to quickly and rapidly create UIs that follow our language. Instead of writing panels and VGUI elements from scratch, we are now able to utilize a whole set of mid-level and high-level functions to create various UI elements with ease.
Some of the high-level functions that create the building blocks for CrescentUI
When it comes to the menus and UIs themselves, our preferred workflow is to create and register new custom panels rather than building everything inside a single panel. This allows for better code maintenance, debugging and reusability. These "mega panels" tend to grow very big and complex very quickly, and therefore we avoid them wherever possible and instead deconstruct each menu into small, self-sustaining components that are then combined together to form the final result. This way, if the need to make changes ever rises, we can easily make them without having to touch the rest of the code at all.
And, of course, let's not forget the fact that CrescentUI is, after all, very sleek and good looking. Flat designs have a very nice feel to it, and our combination of dark and light colors together with solid, bright accents result in a very convenient and comfortable look. We also pay close attention to smaller details like the rendering quality of icons/images, padding and margins, and the overall quality of the design. Together, these aspects make CrescentUI into a beautiful UI system that is also very easy to build upon.
These three concepts - consistency, modularity, and beauty - make CrescentUI into a wonderful system that we are very proud of. With recent refinements we made, it's even better than before, and we hope you will get to experience all this very soon with the re-launch of Crescent.
Rock and Role
While CrescentUI has been very well received, we actually never got around to using it fully in old Crescent. Our initial goal was to recreate all of TTT's interfaces using CrescentUI to ensure the experience is consistent throughout our server, but the lack of time and more pressing matters forced us to leave some of it behind. The Hub and our custom systems were all done with CrescentUI from the beginning, but the existing TTT GUI was left as is, in hope that we can get back to it.
Now that we had plenty of time to work on Crescent's relaunch, we went ahead and returned to this task and finally tied this loose end, completing the conversion of TTT's stock UI to CrescentUI. Those of you who follow #dev-showcase in our Discord probably saw some of this already, but here it is again in case you missed it.
First, the role shop. As one of the most important parts of TTT, the role shop UI has not aged well unfortunately. However, how central and well known this system is by now, we knew we had to be careful with this one. Players are already very used to the layout and positions of this shop, and since it plays a very important part in the gameplay of TTT, we had to carefully tread here. Our task was to renew and improve without steering too far from the old look and layout.
The result was is as following:
The new Role Shop
Keeping the same layout as before - weapons to the right, information to the left, and menus at the top - we overhauled the look of the role shop to follow CrescentUI's language, as well as improved some of the aspects of it that needed the attention. Passive equipment and active weapons are now split from each other and placed in their own categories, making it easier to differentiate the two. The information panel has been simplified to put more emphasis on the important information and reduce the clutter. The name and description of the item is now larger and more easily readable, the slot it takes is now clearly visible, and the buying conditions have been simplified into a single text line that either tells you the purchase is available, or tells you why it isn't. A preview of the item you are buying is also provided. We also added labels to items that cannot be purchased at the moment that quickly explain why, saving you the need of additional clicking and reading. Lastly, we made the action buttons larger so that it's easier to quickly hit them if you are in the process of making a split-second purchase to make a move in-game.
Those who paid attention probably also noticed the new button near the buy action: "Set Quick". This is, in fact, part of a completely new and original system we made to further make your life easier when using the role shop. Introducing: the Quick-Menu!
The Quick Menu in action
(Better quality: https://gfycat.com/miniaturebreakablechuckwalla)
The Quick Menu is a customizable menu that is accessed by holding C (or whatever your role shop bind is). When held, seven circles appear on the screen, each bound to a different command. You can select any of the commands by hovering your cursor on them and letting go of the button, which means taking an action requires no clicks at all! The design of the menu allows for very quick actions by simply opening it and rocking your cursor in that direction, then letting go - the menu will remember the last option you hovered on and use it, which means you don't even have to be precise!
Buying from the Quick Menu is super quick and requires no clicks nor pointing at all
(Better quality: https://gfycat.com/scrawnyimpartialgar)
You can customize the menu to your liking through the role shop itself, by using the "Set Quick" button and selecting which of the six surrounding slots to bind it to. The center circle cannot be changed and is always set to opening the shop, to make sure you can just press the bind to open it as usual. There's even a separate setup for Traitors and Detectives!
We actually have more plans for the Quick Menu in the future, and we hope to extend it to more than just the role shop. Stay tuned for more information!
The next UI in question is no other than the scoreboard, which is probably the most important UI of TTT. The stock TTT scoreboard is fairly good, but we wanted to take it one step further, both in design and functionality...
Note that these are not real players, but mock-up data for the sake of demonstration. Also, no, the rainbow ranks are just a joke.
The new CTTT scoreboard is not just a beautiful CrescentUI recreation. It offers additional functionality that wasn't available before: for example, the little menu button near each player now allows you to easily access some important functions for that player.
So many options!
The top of the scoreboard also hosts some new, useful information, such as the current fun round, exact round count, and a quick player count. We plan to add more information to this area later on to better utilize it, but for now this will do
For the players themselves, the scoreboard implements both our new Titles and Badges system, which can be set by the player to show off - more on this in a future post. We also offer a color-coded ping column to quickly identify the connection quality of every player, and a color coded karma column to find quickly become aware of trigger-happy players.
Of course, all the old functionality of the scoreboard is still there. Bodies that were searched can be previewed from it, and marking players is still possible. All in all, this is a win-win situation!
Hub At Ya
Our quest for UI perfection did not only involve recreating TTT UIs, but also improving on our existing work. A good example is no other than the Hub, our biggest and most complex interface, which hosts the majority of what Crescent is about.
There were a few weak spots in our Hub design that we received many complaints about in old Crescent. Most of them were about navigation and organization, which are important aspects indeed. A good UI allows you to quickly understand what you see and where you need to go, and it was our priority to improve any areas that don't do it well.
So we went into the code and made some changes. The first one is to the Inventory tab:
I swear I don't have an AK47 fetish...
What's going on, then?
The first thing you'll notice is the removal of the item preview panel on the right. This panel has actually been quite a pain for us due to its fixed size and limited space, which prevented us from adding more information or functionality to it. Not only that, but it also took a lot of valuable space from the inventory itself, which made browsing through your items more time consuming than it should be.
We therefore decided to ditch this panel in favor of item tooltips. Hovering over an item in the inventory will now show its preview and information in a tooltip instead, which means we are no longer limited in size either. This also allowed us to revamp the information panel a bit, adding more important information and styling it better with CrescentUI's language.
Trance 1 on a legendary? Who the hell does that?
But why stop here? Tooltips are nice and all, but we can do more than that! We know some of you are hungry for even more information, so we want ahead and recreated the weapon inspection panel too:
Positioning that actually makes sense? Yes please!
The new inspect panel shows all of the information about a weapon in a much better and more clear way. The new positioning of all the elements makes it easier to find what you're looking for, and the model preview is actually working well now. The new WepMod slots view at the bottom makes it easier to see and install new WepMods into your weapon, so you can do more with less clicks overall.
A third improvement to the Hub is the new navigation system, which you can see below:
(Better quality: https://gfycat.com/disastrousconcernedimago)
The new navigation system makes it easier to find what you're looking for by dividing the menus into categories. This way, menus that revolve around the same thing are grouped together in a single category so you can quickly find them and access them. It also saves us space in the header! And, of course, the sleek transitions and animations sure feel very premium as well.
And lastly: icons. This is something we admittedly didn't do a very good job with in old Crescent. Some of them were inconsistent, poorly made, and generally not good looking. This time around I took the time to personally come up with a consistent theme and look for our icons so that they will end up looking better and nicer.
A good example of this are the sound bits, which all received sleek new icons that also follow the new theme:
How many of these do you recognize? Don't worry - there are 165(!) sound bits to choose from!
But I kept the best for last. After all, what's a UI overhaul without the very heart of it - the HUD?
The Heads Up Display (HUD) is what you see on your screen at all times when you play the game. Your life bar, your ammo status, the game notifications at the top right - all these are part of TTT's HUD, and they each player an important part in it.
Unfortunately, it's also clear that the TTT HUD isn't very good overall. It looks old, feels old, and has some strange design choices. For example: the game notifications, those that hold all the of most important information about the round, are being presented in tiny text at the top right of the screen - not exactly where you'll be looking most of the time. It's very easy to miss them this way, and many players already complained about this fact.
Another one? Here you go: keeping track of the round through the scoreboard can be a pain. There can be tens of players in a server at a given time, and trying to read what's going on with each one through the scoreboard while under the pressure of the round is not a great thing. There should be a faster and more easy way to do that.
And so, our talented UI master Mochi dived into the work, and recreated the entire TTT HUD using CrescentUI - and then some more.
This image is clearly fake - I never use my microphone...
The new Crescent TTT HUD offers both superior visuals, new information, and a better layout.
- The game notifications moved from their forgotten corner at the top right to the lower center of the screen, and were given a larger, bolder font, so they can always be seen. We made sure to time their in and out animations precisely so they will be as non-intrusive as possible while still noticeable in the heat of the battle. This makes it so much easier to keep track of the game and what's happening around you without having to constantly move your eyes away from the center of the screen, potentially losing track of something or even taking fire.
- We also have a new panel at the top of the screen that serves as a quick overview of the round: how many players are alive, any living detectives, and - if you're a traitor - an overview of your traitor buddies and which one of them is still alive. Of course, all this still follows the rules of TTT: players who died will not show as dead until their body is found and searched, and you cannot see the health or status of a player - only whether they are dead, missing, or alive. This is basically a quick overview of the scoreboard in a way that is easy to understand and read without having to go through the player list in the scoreboard, and is overall a great addition.
- Another one? Sure! Voice chat boxes now show the volume activity of a player, so you can more easily understand who is saying what in a crowded server, or find that one mic spammer that is breaking your ears and mute them. Additionally, staff members now have a shield badge appear in their voice chat box, so you can immediately notice if a staff member is speaking in case they need to communicate with the server.
But wait - what if you don't want that new top bar? What if you *do* want your notifications at the forgotten corner of the screen? What if you want your ammo in one side, and your health in the other, and your role in a third? Until now, none of this was possible in TTT - but not anymore...
Let me just put this here...
(Better quality: https://thumbs.gfycat.com/GracefulJadedBlackbird-small.gif)
That's right, ladies and gentlemen. Crescent's new HUD is fully customizable. Every single element can be moved around and even completely hidden! All of this can be done using our super intuitive UI editor, with a simple and straightforward drag-and-drop system to quickly position things where you want them and get rid of what you don't want. This powerful new tool is bound to make your game even more yours, and will certainly be of much use for many players. Regardless of whether you want more space or more clarity, Crescent TTT's HUD can do it all.
And that's it for today! Quite a lot to take in, I know. We worked a lot to further improve the UI of Project Crescent and make it even better than before, and I'm certain you will find much use and ease in it. There are, of course, more things and changes done all the time, and I can assure you our UI work will not end here. However, these are all the important highlights we have for you, which are aplenty anyway.
We also have some other, non-UI related features that we completed in recent weeks. In fact, we have fully completed all of our gameplay-related tasks for the launch, which means the initial state of CTTT's gameplay is now fully completed and developed. Woohoo! We even ran an alpha play-test with our alpha testing team a few days ago, and we all had a serious blast. We added some really cool features for that - one of them is especially awesome - and we will probably talk more about these in the next post.
Now that the UI is mostly behind us, we are starting the work on the final major overhaul that CTTT requires: the economy. We spent a lot of time in the last few days planning the new take on this and crunching all the numbers, learning from the mistakes we did in old Crescent and from the feedback you provided us with. With no time constraints either, I am certain the new economy will perform much better than last time. It'll be more rewarding, more diverse, and a lot more stable. Stay tuned for more information on that.
Whew. That's a lot of text. I think I should stop here before I enter another 5 paragraphs spree.
Thank you for reading, and thank you for your patience with CTTT! It's all going to be worth it.