They’re alive! Final month I shared a sizeable assortment of interface mockups summarizing my imaginative and prescient for a playable Cogmind interface that would match inside a 45-row terminal. These mockups are actually a actuality, absolutely carried out kind of as described, and within the time since I’ve even gone additional down that path and carried out the so-called “Part 4” UI with its higher variety of modal home windows.
Though I already demonstrated a lot of the primary new modal UI format in an earlier discussion board announcement, I determine I may evaluate these options right here in an effort to present closure to this sequence, plus cowl some associated dev subjects in addition to the second modal format.
A collage of 45-row interface mockups shared in January as a part of Half 2 of this sequence.
“Semi-modal” 45-Row UI Structure
Though gamers are free to proceed utilizing the complete 60-row format initially designed for Cogmind, anybody who doesn’t thoughts sacrificing some comfort in trade for higher cell dimension can use 33% bigger tiles and textual content by switching to a 45-row format. In different phrases, anybody utilizing dimension 18 fonts (the vast majority of gamers), would as a substitute be utilizing dimension 24 underneath the brand new format.
Comparability of Cogmind’s interface at 1080p when transformed from its customary 60 rows to a 45-row format utilizing a smaller map view and modal stock (open for full dimension 1920×1080).
One of many greatest compromises on this mode is the smaller map view, however it’s nonetheless moderately massive (at the least 50×35), massive sufficient to at the least see out the extent of regular sight and assault ranges, and for data past that each one the QoL lately developed for map zooming is useful, even when not zoomed.
Here’s a pattern screenshot of the 1080p 45-row terminal format within the early sport, earlier than the stock even switches to its modal kind:
45-row UI format with non-modal stock, as a result of there usually are not but sufficient half slots to edge it out of the principle interface.
Stock/Elements
The opposite compromise is interacting with a modal stock for a lot of a run, however I’ve additionally put a number of work into designing QoL options to make it as seamless as doable.
The stock! It’s gone!
Quick access to data and suggestions is necessary, so after all the INVENTORY entry button instantly studies its present utilization and capability, items of information which might usually be discovered on the prime of the stock window itself.
Any time a number of objects are added to the stock by any means (picked up, indifferent, or in any other case) additionally reveals a brand new indicator.
One of the necessary types of stock interplay for mouse customers, drag-dropping, can also be preserved by mechanically opening the stock whereas dragging an element, then mechanically closing it once more after launch, in case you wish to put the merchandise in your stock.
Automated modal stock toggling in motion, adopted by another stock interplay. Dropping the merchandise on the INVENTORY button would really work, too. (Dragging an element out of the stock would nonetheless require opening the stock first.)
In actual fact, fairly a number of operations will mechanically toggle the stock like that wherever it makes sense–the half administration keyboard interface (‘p’), the ‘d’rop shortcut, half swapping, merchandise tagging…
On this instance, hitting ‘p’ to activate the half administration menu, then ‘a’ for connect, mechanically opens the stock, from which ‘2’ is chosen for the Transmission Jammer, attaching it then mechanically closing the stock once more.
In fact the common previous swap menu additionally works simply positive, even when the stock is modal, which means opening the stock is commonly not even vital.
Right here the results of the swap operation additionally shows the indicator for an element having been added to the stock.
The inventory-first keyboard swap system has additionally been modified to stay suitable with a modal stock, with automated opening/closing if vital.
One of the controversial features of the 45-row interface is probably going the way it treats half sort headers. As I wrote about through the mockup descriptions, we are able to save house, and delay stock modality, by quickly eradicating the headers themselves from the elements checklist. That was going to be an elective characteristic disabled by default, however for now I’ve as a substitute determined to have it do this mechanically, and be opt-out as a substitute.
Condensed half headers in motion. They double as CYCLE buttons for mouse customers, performance that may in any other case be misplaced for the reason that header buttons are hidden.
The headers are solely changed by the sidebar technique for so long as the stock conversion to modal kind is delayed (so about two evolutions within the mid-game), after which they’re restored to regular once more since there’s loads of room.
Secondary Home windows
As per the mockups, lots of Cogmind’s secondary home windows that have been initially designed for at the least 50 rows needed to be squished all the way down to 45, together with machine hacking, the standing window, and merchandise/robotic data.
Essentially the most clearly totally different of the group is merchandise data, which saved sufficient strains by transferring its artwork off to the aspect.
Pattern half data as match right into a 45-row UI format.
The opposite greatest new characteristic which took some time to construct and finalize however will doubtless be seen by virtually nobody (:P) is the [M]ore button as utilized to robotic resistances. Such a button was already added to Beta 13 to help the occasional longer merchandise/impact descriptions, however was given new function for the very uncommon risk {that a} robotic might need too many complete strains in its data window, by which case one solution to minimize it all the way down to dimension is to place extra resistances in a popup window.
Extra!
The world map view was yet one more one of many secondary home windows initially designed for a peak of fifty, however luckily eradicating a few of its inside padding was sufficient to shrink that to 45. On the identical time, I additionally took this chance to do one thing else that I’ve wished to do for years: pace it up! Though I first designed the map in 2016 with this enjoyable imaginative and prescient of a map animating the route you took to get to your present location, whereas not too problematic in Cogmind’s early years, the continued addition of latest areas and potential for lengthier routes may make it a little bit of a slot to view the complete map within the late sport, so I’ve rebuilt it to seem in its entirety virtually immediately 😀
Prompt route!
This world map change will profit everybody, no matter UI format. In actual fact numerous tweaks and fixes made all through the format improvement challenge have carried over to the common interface as nicely.
Sport Menu
An excellent half of the work concerned in making a 45-row model of the interface concerned changes to the sport menu and its numerous subwindows. It was rather a lot. The content material was, in spite of everything, largely designed to suit throughout the map space, which had presumed minimal dimensions of fifty×50. A minimum of we didn’t have to fret concerning the width (whew–very glad Cogmind was designed for 4:3), however once more with the peak…
Pages with a 50-row format now wanted 35-row layouts as nicely.
General the most important impacts have been to the Superior instructions web page, which had at all times been pushing up towards the restrict to start with, and all of the information interfaces.
A minimum of the answer was apparent on this case: In spite of everything these years, I used to be lastly compelled so as to add a second web page to the superior instructions 😛
The issue with the Achievements/Gallery/Lore information, and really a lot of the “sport menu” in all, was spaghetti code. Most of Cogmind is pretty nicely organized code, however not the sport menu and its pages–it’s all in simply two information to which I stored including and including and including and sharing variables and it’s simply messy throughout. I used this chance to wash it up a bit, particularly the information code which share a number of the identical performance anyway however as a substitute of utilizing widespread features there was simply copy-pasted code all over the place.
Design-wise, at the least the information weren’t attempting to suit into the map view space, and so they turned out pretty nicely, if barely cramped in comparison with earlier than.
Achievements UI within the 45-row format, with reworked assortment% and export buttons on the best aspect.
Amidst the refactoring, in one other of these “I ought to do that whereas I’m right here” moments that advantages all layouts, I lastly darkened the background when a modal popup is energetic within the sport menu. Doing so at all times made sense, after all, however it wasn’t very important and it by no means felt value dedicating the time earlier than.
Lastly a darkened background!
After constructing this new UI format, final week I streamed the primary run to utilize it, explaining all the main options as we went…
“Modal” 45-Row UI Structure
The primary 45-row format I developed is actually “semi-modal,” as a result of all home windows are seen as normal till solely later when simply the stock is hidden as vital. The true modal interface hides a number of home windows, and does it instantly from the beginning, however in doing so permits for a map view which is sort of as massive as what Cogmind was designed for (50×50).
All three choices can be found in a brand new setting on the prime of the Choices menu.
UI Structure choice menu coming to Cogmind Beta 13.
How can we reclaim our lacking map peak? By making the top-side consoles all however disappear, after all! The data displayed up there doesn’t warrant fixed consideration anyway, consisting of transient logging data and a few menus for accessing management of allies and intel. Something that is likely to be of potential significance could be displayed quickly, and any menus could be known as up as wanted. The result’s a a lot taller map view: 50×44.
Modal 45-row UI format screenshot pattern (1080p). (See right here for a 1440p pattern utilizing the brand new Tamsyn font.)
The highest row buttons serve kind of the identical features, similar to toggling the message log to its full peak, or switching the middle console mode, although on this case the toggle should additionally open the Allies/Intel home windows to make them seen and interactive when vital.
Interacting with numerous buttons atop the map within the Mannequin 45-row format.
The Prolonged Log and Fight Log modes merely decide what the house beneath is used for when messages are being displayed.
Two columns of message log knowledge. The road rely and length could be managed through superior.cfg choices.
You would possibly acknowledge the momentary message log type from POLYBOT-7, which is the place I ripped it from 🙂
An alternate instance combining the common message log, which at all times at the least seems on the left, with a fight go surfing the best.
The automated full-detail fight log messages (those that even within the 60-row format may seem over the map as fight performs out) are hidden by default in 45-row layouts, even when the element stage is about to Full, since given the narrower map view they’ll simply obscure close by motion.
There’s a new config choice to pressure it anyway, for these so inclined, however as normal, so long as it’s at present your flip, in fight log mode you possibly can at all times scroll the fight log backward to evaluate the small print of current fight. (Nevertheless, within the Modal 45-row format there may be at present no method for the mouse to provoke this scroll–it’s keyboard-only…)
Scrolling the prolonged fight log historical past.
I’ll be streaming a run on this format as nicely, as soon as the construct is prepared…
Further Credit score
With playtesting having solely simply begun, I’m certain these layouts may use some extra polish right here and there, however they appear in a extremely good place already. Trying additional forward, there’s additionally the prospect that different associated options is likely to be added as nicely, issues I’ve held off on to date within the curiosity of really releasing this to gamers and getting again to the content material enlargement I used to be engaged on earlier than.
Tutorial
One such characteristic I used to be on the fence about all through format planning, and to a lesser extent all through all of Cogmind improvement, is a extra intrusive vector for tutorial data. I a lot want to take care of Cogmind’s theme of immersion as absolute best, and that has at all times meant avoiding an in-your-face sort tutorial with devoted popups or some comparable impact. A sound cue and flashy log messages, that’s it.
Specifically this Modal 45-row interface has me extra frightened about instructing new gamers, particularly if it’s to be a default format, as a result of log messages mechanically disappear after a short time. Sure the log could be opened in full to view them as regular, however gamers would have to be proactive about it. A log-based tutorial was already straightforward sufficient to overlook bits of earlier than, and other people did 😛
To considerably tackle that concern I doubled the length of particularly tutorial messages within the Modal format, so they continue to be seen longer at the same time as different messages disappear.
One other drawback which had me once more eager about alternate options is the handful of instructional messages that seem when the log space shouldn’t be seen in any respect within the modal format, similar to whereas hacking! (since in that case the machine hacking interface now extends all the way in which to the highest of the display) One would possibly recommend placing these immersion-breaking messages proper within the hacking interface itself, but when we’re going to go that far we could as nicely take the devoted popup route :/
I’m letting this subject simmer for now, and finally the choice could be affected by no matter our default format finally ends up being.
Screenshot Mode
Though not specific to modal layouts, and a characteristic I’ve been contemplating for years, the necessity for some type of “screenshot mode” clearly turns into extra acute with the introduction of latest UI layouts.
One of many authentic rules of Cogmind UI design was the need to have all or virtually all necessary data vital for decision-making seen always on the principle interface–stats, elements and their situation, stock and merchandise states, the map, the log, mainly every part.
I like that by extension this implies a single screenshot might be a complete or at the least excellent indicator of a run’s total state, both as a file or one thing to share with others. For that purpose I’ve typically thought of facilitating a solution to embrace one’s whole stock contents in a single screenshot, since some builds would possibly possess about 10~15 objects that aren’t at present seen within the screenshot (some individuals have taken to sharing Cogmind’s stat dumps to supply that data, and extra, in lieu of a screenshot, however screenshots are typically simpler to digest total; folks have actually stitched collectively their very own screenshots to incorporate a whole stock…).
And now relying on one’s UI format we would haven’t solely zero stock objects seen in a screenshot, but in addition even a lacking message log and checklist of allies and many others. In that gentle, I assume the prospect that I lastly add such a characteristic will solely develop going ahead… I’ll be maintaining a tally of the sharing scene amongst frequent gamers utilizing these layouts.
I don’t have any mockups of “screenshot mode” for you now, however the thought is solely that among the map space might be used to show the extra data.
A New Default
When the following Cogmind model releases, new and previous gamers alike will likely be confronted with a brand new UI format. However which one?
The setting could be modified within the Choices menu, however it wants a default, and even returning gamers who’ve a config file will likely be initialized to that format. It will at the least be a great way to get everybody to comprehend the brand new format choices exist (in the event that they someway miss the repeated information :P).
I actually like the unique format (clearly), particularly designed to immerse with most data, at the price of cell dimension maybe requiring a big show. Which may work for a comparatively particular audience, however Cogmind has many extra gamers lately, gamers who come from a wide range of backgrounds and with totally different setups, and so they’d prefer to benefit from the gameplay, too, so some lodging is important. One of many different layouts then, with bigger fonts from the get to…
My authentic assumption was that the default could be the center option–partially modal with most home windows and data nonetheless seen, simply the considerably bigger textual content (yay for most individuals on laptops) and smaller map view (however nonetheless massive sufficient). Leaning much more closely in a modal route for brand spanking new gamers loses among the total ambiance, plus hiding data could be dangerous. Nevertheless, that will not be the case with what will get instantly hidden in Cogmind–the top-side home windows aren’t important for brand spanking new gamers, and vital messages are nonetheless proven and accessible… so perhaps hiding home windows is okay in an effort to let everybody see much more of the map directly? The message log being completely seen doesn’t appear to indicate that everybody will learn it anyway–plenty of individuals miss necessary messages 😛
The modal stock has the biggest affect on gameplay, and it doesn’t even take impact till half method by the sport, at which level there may be supporting QoL, and applies to each 45-row layouts anyway, in order that doesn’t work in favor of both.
Outcomes on a default: Inconclusive xD
That is the top of our multi-part sequence about constructing Cogmind’s absolutely upscaled semi-modal interface format:
