• Register

Experience sci-fi tactical combat and exploration in a procedural world that combines traditional roguelikes with an immersive modern interface like no other. Build yourself from components found or salvaged from other robots. Attach power sources, propulsion units, utilities, and weapons to become a slow tank bristling with weapons, or a fast-moving flier zipping past enemies before they even have time to react, or a stealthy sword-wielding assassin/hacker, or whatever else you can come up with from the salvage you find. The situation can quickly change as you lose components and rebuild yourself from enemy remains. You are the Cogmind. Discover what that means as you explore a living, breathing world ruled by robots.

  • View media
  • View media
  • View media
  • View media
  • View media
  • View media
RSS feed Articles

Iterative UI Design

News 2 comments

Today I'd like to share the process behind the development of a singular UI feature, in particular the part (equipment)-sorting implementation, which is a good example of taking a simple premise and working it one step at a time, examining the results of each new element added throughout the process until as a whole it satisfied (and even exceeded) expectations.

The Issue

Inventory turnover is quite frequent in Cogmind (more on that here), and the result is almost inevitably a cluttered list of equipment in the HUD, especially later in the game when you can equip a couple dozen different parts, and especially with utilities, the most versatile category of parts capable of a wide range of functionality.

cogmind_parts_unsorted

A cluttered list of parts.


While playing I've found myself sometimes having to take time out to reorganize that list, grouping multiple parts with complementary effects like heat sinks, hackware, or other processors to better understand my build at a given time. And I know that some other players do this as well, as having a list of equipment that's easier to parse facilitates rapid decision-making and avoids otherwise unnecessary mistakes.

So what we needed was a way to quickly and automatically group identical parts, or parts with similar functionality.

Initial Work

With interfaces there's of course the important question of how to present this feature to the player, but in this case I didn't start there, having only a vague idea of how best to do that. Instead, it made more sense to start with something more fundamental--without regard for appearances, the first step was to simply make sure the sorting algorithm itself worked, and just display the final result.

In game development, piling on too many features at once, even just multiple facets of a single feature, unnecessarily increases the complexity of the task. Everything should be broken down into the smallest understandable pieces so that any bumps along the way can be smoothed without too much confusion as to where the problem might lie.

Where the sorting is concerned, nothing special is going on, it simply reorganizes items by moving all empty slots to the end of their own category, while the items are listed in ascending order determined by comparing each item's internal database ID number.

cogmind_part_sorting

Stage 1: Sort and instantly move parts to their new location.


As expected, that didn't quite work so well the first few times I tried it--bugs here and there, crashing immediately the first time I tried to use it (this is common :P), and on subsequent attempts doing odd things like stacking a bunch of items on top of each other, or erasing them completely -_-

All issues were resolved quickly, though, because the code was unburdened by whatever else I'd end up doing later to improve it for the final iteration.

Animation

It's no secret that I like to animate everything I can, so it's never a question of if, but how. Animations not only have a lot of potential cool factor, but when done right can also provide good visual feedback for an action or command.

For the sorting I decided to start out with something really simple, which would likely not be good enough for a permanent solution but required the same code along the path towards where I felt like I wanted to head, anyway. Basically the idea is rather than "teleporting," items should somehow actually move, so I started with just having them slide directly from their current slot to their destination.

cogmind_part_sorting_animated_vertical

Stage 2: Slide vertically to post-sort position.


To accomplish this, I repositioned entire subconsoles themselves as part of the animation, which is an approach I've actually never used anywhere else in the interface, though is something I've been looking forward to doing for a long time. (For a detailed look at what I mean by "subconsoles," see this piece I wrote on Cogmind's UI implementation.)

The result is better than nothing, but with all the items shifting over one another it's really hard to tell what is and isn't moving, so the animation doesn't add anything of value to the process.

A better way to make it more obvious what is moving is to shift them along more than one axis, i.e. offset them a little to one side.

cogmind_part_sorting_animated_elliptical_varied

Stage 3: Slide along an arc to the destination.


At the above stage I also wanted to try and convey some information in the amount of offset, specifically that items moving further from their previous position would travel along a wider arc, like so:

cogmind_parts_arc_sorting_paths

Arc sorting path visualization example (not actual sort targets).


But the effect was a little too messy for my tastes, especially since the coarse grid resolution of a strict terminal interface doesn't leave any room for gradual pixel offsets (a rule I'll not break in Cogmind for any reason). Items are either barely offset, or offset quite a bit.

Note: I originally thought I'd have some of them, perhaps the empty slots, offset to the right while everything else moved along the left side, but assumed that would reintroduce too much chaos.

Seeing as the distance-based variable offset was causing a problem, I just removed the variability, setting them all to use a static animation offset whether they were moving to an adjacent slot or to a position ten slots away. At this point I also changed the movement path from an arc to a straight up rectangle to make it easier for the eye to follow given the grid.

cogmind_parts_rect_sorting_paths

Rect sorting path visualization example (not actual sort targets).


cogmind_part_sorting_animated_elliptical_static

Stage 4: Slide along a rectangle to the destination.


With the desired movement path more or less determined, I saw that when many items were moving at once, while you could sorta tell which they were, it would be far more helpful if the movements were easier to follow, and the first way to tackle that is to simply not do them all at once!

Thus each item is "staggered," beginning its movement animation at a random time within an acceptable range from when the command is entered (in this case 0~700ms). Each item takes 300ms to reach its destination, regardless of the distance, so the entire animation will take no longer than 1 second, regardless of the number of items involved.

In addition to the staggering, it was also time for some cosmetic enhancements to moving items in order to further improve readability. Two such effects were added:

  • Any item that will/is/was moving will have its reference letter repeatedly replaced with a random one for the entire duration of the sort. The letter is going to change anyway (because it's moving to another position in the alphabetical list), so rather than just have it suddenly change, why not spruce it up with a little something? This also works well in combination with the staggering, since any given sorted item is only moving about one-third of the time during the sort, but even while it's not moving you'll be able to identify which those are.
  • On arriving at its final position, an item will flash white and fade back to its original colors, a process that takes 400ms. The flash reinforces which items just moved, and just plain looks cool. To me this plus the staggering really makes the whole effect :D

cogmind_part_sorting_animated_final

Stage 5 (final): Staggered sliding with randomized letters, and white flash on arrival.


Oh yeah, and there's a little beep each time an item reaches its destination :D

From inception to its final form, this process took approximately four hours.

Notes

Other considerations encountered during implementation:

  • Item order doesn't normally hold any meaning, except with weapons, which when active will fire in the order listed. For strategic reasons some players may prefer that certain weapons to fire first, so in that case it was necessary to add an option to ignore them for sorting purposes. Sorting was primarily meant for utilities, anyway, and to a lesser extent propulsion. I do a lot of weapon toggling myself, but don't really care about their firing order, so I'll be happy to sort them with this new feature :)
  • Further improvements could maybe include the option for fully automated sorting which operates immediately when a part is attached, so the player never even has to use a command to do it manually. Less impressive than seeing a bunch of items being sorted together, though :P
  • The current system doesn't yet take into account integrity differences between items with identical ID numbers (this is obvious with the Exp. Heat Sinks in the final sample, as they reverse positions twice), so there is still room for better consistency and other sorting improvements.
Alpha 9 Released: Epic Showdown

Alpha 9 Released: Epic Showdown

News 0 comments

Alpha 9 is here with lots more lore, epic battles, plus new and improved machine mechanics.

Cogmind, 1 Year of Alphas

Cogmind, 1 Year of Alphas

News 6 comments

A summary of Cogmind's first year of sales, including basic player and revenue data, a breakdown of development time, and a quick look at the rest of...

Fabrication

Fabrication

News 0 comments

The how and why of the new fabrication mechanics, greatly simplifying the robot and part construction process.

Alpha 8 Released: The Plot Thickens

Alpha 8 Released: The Plot Thickens

News 0 comments

Cogmind is @ Alpha 8, a lore- and plot-heavy release. Make new friends. Or enemies, your choice :D

Comments  (0 - 10 of 56)
salejemaster
salejemaster

Lets push this project into the top 100 indie games of the year! Don't forget to vote people!

Reply Good karma Bad karma+2 votes
Kyzrati Creator
Kyzrati

So yay, we did it, Top 100 :D

Thanks everyone for your votes!

Reply Good karma+1 vote
Kyzrati Creator
Kyzrati

Cogmind made the top 100 last year, and that's before it was even released, so I'd be disappointed if we couldn't do at least that well now that so many are enjoying the alpha!

I appreciate any votes to help make that happen :D

(I imagine the top 10 is currently out of our league, being a niche game still in alpha, but I think 100 is completely doable.)

Reply Good karma+1 vote
Orac|
Orac|

HOLY ****. Like, usually I wouldn't go for profanity and caps lock to voice my opinion, but the latest round of gifs are seriously good.

I haven't really played a roguelike of this old style since I sank hundreds upon hundreds of hours failing at Nethack. This revitalizes my love of this genre.

Like... in the mainstream, roguelikes have been being updated and reworked for current sensibilities by taking the ideology of the old school and applying it to new things. FTL for instance checks a bunch of roguelike boxes but is still a totally different beast. Permadeath, random generation, hard decisions and that high learning curve. It's a great game and probably my favourite to come from this permadeath resurgence.

This looks to checks all the same boxes, but it looks like it applies that ideology right back into the source genre? And with all the style and panache available. It's looks like everything I loved about old terminal rpgs, but what I imagined them to be rather than what they were. And I love that. The full gamut of colour and the incredible UI are wrinkling my brain with anticipation.

Goddamn I am psyched. Keep up the amazing work!

Reply Good karma Bad karma+3 votes
Kyzrati Creator
Kyzrati

Thank you for the kind words (including the profanity, sure =p), and yep, the difference here is I'm more or less doing the reverse of what everyone else is doing. Good way to come up with something unique, eh? ;)

With regard to what you "imagine," that's exactly where I'm coming from! When I started working on this the whole idea was to produce this world I was imagining where the interface really comes to life, kind of like a mash-up between roguelikes and Hollywood terminal UIs (but where everything actually means something!). This approach doesn't make much sense with fantasy, the traditional roguelike setting, but with sci-fi it's a natural fit.

My brother was watching the (unreleased) trailer in his office recently and some co-workers came by and thought he was programming on some awesome new terminal, haha.

Alpha Access launches next week Tuesday if you're interested :D. The announcement will probably come to IndieDB a little late.

I just added that composite gif today since there wasn't anything yet showing off the tileset, and I have that one as the new lead gif for the updated website (not yet live).

Reply Good karma+3 votes
Khian_101
Khian_101

When i look at the GIF previews... I became to excited, I started searching for the download link... :3 looking forward to play this game...

Reply Good karma Bad karma+2 votes
Kyzrati Creator
Kyzrati

Excellent! Though the current lack of a download link is not quite so excellent ;). You *can* play the prototype version linked from the FAQ--some people are doing that in the meantime, but it's extremely old and unpolished compared to what we've got now :D

Thanks for stopping by!

Reply Good karma+1 vote
Khian_101
Khian_101

oooh oooh i found one Download link but it's kinda old but looks cool tho... FYI i am not a fan of ASCII ( but this game got sprite mode ), damn i got hooked due to its attractive GIFs teasers which showcase unique animations....

Reply Good karma Bad karma+3 votes
Kyzrati Creator
Kyzrati

It's a pretty unique aesthetic :D. I think it works better in ASCII, but the sprites are nice, too, so you can play with those when the time comes! Come to think of it, I should add some sprite screenshots to the collection here. They're also so new I don't have any on the website, only the dev blog. Thanks for the reminder.

Reply Good karma+1 vote
Uogienė
Uogienė

Is it possible that nearby cleaner bot would clean a good drop just before you would pick that up?

Reply Good karma Bad karma+2 votes
Kyzrati Creator
Kyzrati

Currently it is possible, yes. They don't care that you're around, and will even pick up debris from a battle while the battle is going on nearby! So if you take too long to fight, they'll start hauling things away before you've had a chance to pick up the loot :D.

However, I don't think I made it clear enough when describing their behavior towards the end of the post: If/when you destroy them they'll drop *everything* they picked up. So you can get it back--just track them down before they get to a recycling unit!

In some senses, you may curse them because they take stuff from the battlefield, and in others you may thank them because in taking stuff away for a bit they prevent it from being destroyed due to collateral damage from the fighting!

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Icon
Cogmind
Platforms
Windows
Developer
Grid Sage Games
Engine
Custom
Contact
Send Message
Release date
Game watch
Start tracking
Share
Style
Genre
Roguelike
Theme
Sci-Fi
Players
Single Player
Project
Indie
Boxart
Boxart
Twitter

Latest tweets from @gridsagegames

#roguelike dev FAQ #41 in progress: Time Systems Reddit.com So far: Dungeons of Everchange, Abyssos, SotW, MMRogue, Cogmind...

Jun 24 2016

RT @Roguelicker: COGMIND- This was a fun series to do, and we'll return down the road. I hope @fritzy is satisfied with our... Youtu.be

Jun 23 2016

r/RoguelikeDev FAQ Friday #41, Time Systems: Reddit.com (last time: Inventory Management: Reddit.com)

Jun 23 2016

Embed Buttons
Link to Cogmind by selecting a button and using the embed code provided more...
Cogmind
Statistics
Last Update
Watchers
299 members
Articles
87