Final time was all about exploring a high-level course for Cogmind’s shift in the direction of supporting an elevated dimension for interface fonts and tiles by lowering the quantity of house out there to show info, starting particularly with the map view. Now it’s time to make concrete plans to find out what we are able to truly match right into a 45-row terminal. Concrete interface plans means… mockups! Heaps and many mockups.
Throughout my earlier Yr 10 of the Cogmind put up I shared a collage of the preliminary set of mockups put collectively in late November, so at present we’ll be referencing a bunch of these individually to look at what must occur with a view to assemble this new UI format.
Mockups put collectively in REXPaint throughout a dev stream in preparation for Cogmind’s new UI format (open for full dimension).
We’re now working beneath the belief that just about everyone seems to be utilizing a widescreen facet ratio show. Over a decade in the past I didn’t go that far, as an alternative supporting 4:3 by default and permitting for dynamic home windows to fill any remaining width. The change doesn’t imply 4:3 gamers received’t be capable to play, in fact, there would merely be some letterboxing on the highest and backside (there aren’t but any plans to make the total sport top dynamic, though it wouldn’t be unimaginable to make it so sooner or later, simply as width is dynamic now).
Earlier than we proceed, know that each one mockups are designed in dimension 12, and all of them will be opened to their full dimension for nearer inspection if desired. Additionally their content material could generally embrace gadgets and trace at mechanics that don’t truly exist–we’re simply doing layouts, these particulars aren’t vital 😉
It’s mockup time!
Most important UI
Cogmind’s essential UI is the place the participant spends the overwhelming majority of their time, and the unique aim of its design was to make sure that it supplies instant visible entry to something an skilled participant wants with out opening every other home windows. Dropping from a 60-row to 45-row terminal goes to pressure us to bend that requirement, so it’s only a query of what to take away.
When you recall from Half 1 I confirmed a diagram highlighting the completely important elements of the principle UI, and the saved stock is the one subsection of the right-side HUD that isn’t included in that highlighted space.
Modal Stock
Whereas a visual stock will be fairly useful, it’s not what I’d contemplate completely essential.
Now I wouldn’t have stated that a few years in the past in early Cogmind improvement, however within the years since then we’ve gotten a variety of inventory-related QoL options that cut back reliance on the stock window within the first place, for instance the slot-specific type-wise swapping menu, or half auto-replacement which makes some frequent stock administration attainable with out even trying on the stock in any respect, a lot much less instantly work together with it.
Slotwise half swapping, which doesn’t require any direct interplay with the stock. (This previous demo recording additionally contains some utilization the inventory-first model of that characteristic, which isn’t related right here, and I’m not even certain if anybody even makes use of it…) Keyboard enter has the identical entry, although it’s more durable to comply with a recording of that so I’m sharing the mouse model.
Altogether this means that our primary goal for information discount is to show the stock into some form of modal window as present in just about each different roguelike.
A primary 45-row essential UI mockup with out the stock window.
It simply so occurs that the stock alone saves us 14 strains of top, which is a mere 1 line under what we want 😀
The opposite recovered line comes from eradicating a beforehand empty line from the highest space, as marked by my notes on the mockup. With the info in that space changing into even denser, the order of the 2 backside strains is swapped and the much less vital non-compulsory ones (if seen in any respect) are darkened to regain among the desired visible separation.
The stock is accessible by way of a button on the backside of the elements record (and if it really works out, merely transferring the cursor over that button may also present the stock and permit interplay that manner, no click on required).
The stock window in its authentic type would merely pop up subsequent to its authentic place, adjoining to the button. The button itself can maintain the stock capability info usually displayed on the prime of the stock.
Pure keyboard gamers would be capable to toggle the stock window with the ‘i’ key, newly relieved of its performance as described through the map zoom sharpening stage. It is going to additionally possible mechanically seem/disappear when utilizing associated “modal half instructions” (the ‘p’ menu).
Apart: I’m at the moment writing about a few of these new UI format interactions in hypothetical phrases, since these are plans slightly than truly applied at this stage, so there could also be unexpected roadblocks or options essential with respect to particular performance relying on how all the pieces works out in apply.
One other idea for supporting this new modal stock is an indicator that pops up within the bottom-right nook of the map exhibiting the title of the merchandise and pointing to the stock button any time an motion provides an merchandise to the stock (comparable to selecting one up) when it’s hidden. These indicators may stack if there’s a couple of in a brief interval, and disappear after a period. Non-compulsory and adjustable, in fact.
Dynamic Elements Window
Now it might be that skilled gamers well-versed in Cogmind’s inventory-related QoL options and acquainted with elements, mechanics, and techniques received’t have a lot hassle managing a modal stock if essential. It does, nevertheless, intrude a bit with the pure movement of Cogmind’s extremely accessible drag-drop interface, a truth which mixed with hiding the stock’s existence by default shouldn’t be as nice for brand new gamers.
Does the stock should at all times be hidden? The reply is a powerful NO! Additionally yay!
Whereas Cogmind can ultimately purchase as much as 26 merchandise slots to fill, that quantity begins at solely 7, which means we’ve 19 strains which begin out unused. Recall that the stock requires 14 strains, and you’ll see the place that is going…
The conventional stock window displayed under a shorter elements record that doesn’t but make use of its full top.
For nevertheless lengthy the elements record is able to showing in a shorter format and nonetheless present all the pieces it must (important, in any case), the stock can simply be seen as regular! On beginning a brand new run, with the stock seen there are nonetheless 5 strains of additional house for slots going ahead, which means the stock doesn’t have to enter a modal state till Cogmind’s third evolution, or getting into -7/Manufacturing facility.
Technically we may even have the elements record shrink once more and unhide the stock in case your whole slot depend is as soon as once more lowered under the edge, for instance attributable to host switching in Polymind, or for, uh, different causes a few of you understand 😉
Whereas fascinated with all of the methods to save lots of house, I additionally got here up with an much more excessive model of this “dynamic elements record,” one that will be non-compulsory and undoubtedly off by default. It additionally wouldn’t even be applied straight away as a part of the primary iteration, however since we’re speaking about mockups we’d as properly take a look at it–mockups are virtually free 😛
A header-free idea for the dynamic elements record.
Eradicating the headers and corresponding separators between slot varieties from the elements record provides us again one other 4 strains, equal to 2 extra evolutions, which means beneath this format model the stock wouldn’t develop into modal till getting into -5/Manufacturing facility, or half approach to the floor.
It’s more durable to parse at a look, however does save house and the necessities are nonetheless there, with classes as an alternative mirrored with gentle or darkish bars alongside the facet, and I assume they’d have to double as cycle buttons for mouse customers who use these (as they usually seem alongside the separator line).
And with that our essential UI is basically taken care of! The modifications I’ve described thus far in help of a 45-row interface are sufficient to maintain our essential UI extremely playable, which was what I used to be largely anxious about to start with, being the principle UI and all. I used to be fairly happy with the [hypothetical] outcomes this could produce, and it’s the principle UI so which means we’re largely achieved, yeah?! Effectively, no it turns on the market are literally fairly a number of different issues that must be modified as properly xD
Data Home windows
There’s a vary of secondary information home windows we’ll want to check out, a few of which have at all times been particularly crowded, so they may current some new challenges. This class contains merchandise/robotic/machine/standing information and the machine hacking home windows.
What actually hyperlinks all these as a part of the identical group is that they share the identical dimensions and open in the identical space: over the map. Primarily based on the unique assumption of a minimal 50×50 map view, they have been all thus designed for a top of fifty rows. Now what occurs when not solely the map view is not giant sufficient to comprise them, however even assuming we not restrict them to that space, the 45-row interface as an entire isn’t even large enough xD
Essentially the most worrisome of the group is merchandise information. In lots of circumstances it’s advantageous with house to spare, however a portion of things have at all times pushed up towards the peak restrict. Scrolling for stats is one thing I by no means need to require on precept, so we’ve to make do with what house we’ve.
Doubtlessly useful here’s a characteristic I already conceived and applied months previous to even contemplating a brand new UI format: The opportunity of a button to open extra mechanical particulars distinctive to an merchandise. Merchandise and impact descriptions usually maintain this information, particularly related to utilities, however there have been at all times a handful of weapons (which largely fill their window with stats) that additionally have talents and there isn’t a lot room to elucidate these.
Extra!
This will probably be particularly helpful going ahead as we get increasingly distinctive gadgets. However for our new format it’s not sufficient! Neither is it even appropriate since that is just for exception elements slightly than the norm. No matter this performance, what used to require as much as 50 strains now solely has 45. In the long run the reply is fairly apparent:
Merchandise information mockup, with artwork displayed off to the facet.
Merchandise artwork occupies a top of 10 within the merchandise information window, so let’s simply transfer that apart and there’s loads of house.
Analyzing the opposite mockups on this class…
Robotic information usually suits, though there are most likely one or two circumstances of robots which have a ridiculously lengthy record of elements and resistances that might trigger it to increase outdoors the window bounds. I’ll simply wait and see the place this is a matter.
Standing information can generally exceed 45 strains, however I’ll be assuaging among the stress by eradicating two strains of low significance, and we might have a pop as much as show the total record of injury resistances or modifiers? That is one other case the place I’m simply ready to see it in motion and can determine what to do then.
The hacking interface is basically okay as is. With a very full direct goal record (not all that frequent) it nonetheless suits, even when the ensuing output space to the underside finally ends up on the small dimension. At most this window may need to chop quick the record of related hacking utilities proven (if somebody has a completely insane variety of them in possession), that are there primarily as fluff anyway.
Escape Menu
The multipage Escape menu, or sport menu, is a bit problematic.
It was designed round a 50-row map view, permitting us to show particular person web page information over the map whereas additionally displaying all of the instructions instantly of their related essential UI home windows. I wouldn’t need to redesign all of it to vary this habits, and never solely as a result of that will be a variety of work, nevertheless it was achieved this fashion as a result of I very very like the immersive really feel offered by that stage of integration with the principle UI. So we’ll have to seek out various options for no matter issues come up… they usually’ll undoubtedly come up contemplating the out there house was lowered from 50 rows to 35, a 30% loss xD
The sport menu and primary instructions web page (1) is okay, since that’s stored easy to keep away from overwhelming new gamers with greater than they should know straight away.
Then again, there’s no manner the superior instructions (2) would ever match. They fully-utilize the map view house, and I needed to preserve among the extra esoteric ones off the record within the first place, relegating them to the total in-manual record since there merely wasn’t sufficient room, which means what’s proven with 50 strains is already a considerably slimmed down model. I attempted to see if a two-column method could be attainable with a view to match the minimal required set, however the width is inadequate.
The reply is, lastly, subpages. Superior instructions within the map space will simply should be given one other web page accessed by Left/Proper or buttons on the backside.
The primary web page of superior instructions when divided into a number of pages.
Seen above, with our dynamic elements record top the lack of rows additionally impacts the house out there to indicate its instructions, however plenty of these have been both not likely used or already lined within the primary instructions, so I slimmed that one down simply sufficient to suit.
In-game guide entry (3) is fairly dynamic already because it’s only a record of subjects and blocks of textual content, so no points there.
The choices menu (4) is already divided into to columns, each of which mercifully match into even a 35-row space (properly, 33 as a result of we want the menu bar as properly). We will attribute this favorable end result to the truth that in contrast to the command record it’s an interactive window, and keyboard gamers want entry, too, so we’ve lowercase choices on the left and uppercase on the suitable (26 every, plus some strains for headers and class spacing).
What doesn’t match as a result of resize is the choice descriptions, which usually show in an space under the choices record when hovering the cursor over one. That may be merely be moved to a different momentary popup window and we’re achieved with this web page.
The choices menu in a brand new format, with dummy textual content exhibiting to the facet.
The information web page (5) is kind of easy. No worries there.
Credit (6) doesn’t have a ton of information on it, however undoubtedly will get extra squeezed than I desire, eradicating a variety of the additional spacing that was out there earlier than. Within the curiosity of ending Cogmind a while this century, I’ll settle for it 😉
The Data (7) web page itself is only a menu to entry extra home windows so no drawback there, however the home windows it opens are problematic. Lore Assortment, Gallery Assortment, and Achievements have been all constructed to the identical specification, 55 rows, so we’re going to wish to hack away at the least 10 of these from every…
For comparability right here is the unique Achievements mockup used to construct the one at the moment in Cogmind, designed for a 160×60 terminal:
Cogmind’s present achievements UI (mockup). You may learn all about the way it was put collectively right here.
To squeeze all the pieces into 45 rows we have to cut back the variety of achievements proven directly, merge and align the menus on the left, and, most significantly, discover one other approach to show the secondary home windows under the principle one. This latter half is very vital, as a result of all three of our interactive data interfaces use that very same format, so no matter occurs right here must work for all of them.
It turns on the market’s simply sufficient width to maneuver these issues off to the suitable facet, after which the brand new top comes out to be virtually precisely what we want.
The brand new Achievements UI appropriate with a 45-row format (the page-wise object counter initially within the backside left now seems alongside the top-left border of the principle window, which might be a greater place for it anyway, even when it attracts much less consideration there).
I desire the unique layout–spacier, higher delineation of areas, nevertheless it’s gotta match inside our new restrictions, and fortunately it does with none extra hacking.
Lore Assortment is the simplest of the three, since just like the guide it’s composed of only a subject record and corresponding textual content blocks. This implies we are able to cut back the peak with none actual penalties when it comes to performance, and it’s pretty straightforward to do.
The Lore Assortment UI proven as an alternative with the brand new sidebar parts.
The Gallery Assortment will get a bit cramped, eradicating virtually all the additional spacing that was out there in its authentic iteration, and additionally dropping the additional strains dedicated to offering further info for these alpha supporters and others who’ve their title related to a specific merchandise (the unique function of the gallery). I’ll have to determine a brand new manner to supply that information.
A way more cramped Gallery Assortment UI (inexperienced blocks used to delineate ingredient space for formatting functions, not consultant of what it’s imagined to appear like).
It’s cramped, nevertheless it nonetheless works. In contrast to with Achievements I didn’t need to additional cut back the variety of object seen directly, because it’s already simply 9…
World Map
The world map UI was additionally constructed to suit throughout the map view space, requiring a minimal of fifty rows. We will simply give it the total vertical house, so 45 strains, however that also isn’t sufficient for its present format.
It simply so occurs I wished to revamp it anyway, since as linked there the unique focus was on animating the entire route, which can haven’t been too dangerous a few years in the past, however Cogmind’s world has expanded vastly and routes can get fairly lengthy now (which implies it takes some time to completely hint). Moreover, the structure is such that it truly has to animate the entire thing with a view to draw it in any respect, and it might solely be sped up a lot, so yeah, one thing must be achieved right here.
A brand new 41-row mockup for the world map.
It seems that the unique model nonetheless works advantageous, and I slightly prefer it as a result of it supplies a really condensed format for reflecting all forms of actions, transitions, and maps. Just by eradicating the one further line of padding between every depth we find yourself with a 41-row interface, which is able to match! Like among the different modifications earlier than, it’s a bit cramped however works advantageous.
I’ll nonetheless should rebuild it to allow snappy opening, however at the least the design is acquainted and efficient.
A Enormous Downside
It was solely after drawing all of the mockups and taking a ton of notes that I used to be going via to verify I hadn’t missed something once I realized there’s a enormous drawback: the intro/ending animations. Particularly the latter. There are a variety of them, they’re fairly concerned, and all have been designed particularly for a terminal of 60 rows. Wider is okay, however they will’t be adjusted for one thing shorter. Oh no.
For that I got here up with a loopy answer that I’ll be protecting subsequent time, in one more engine-related detour…
That is the second in a multi-part collection about constructing Cogmind’s totally upscaled semi-modal interface format:
