Microbe GUI

I like the idea of overlaying numbers, I find that cleaner and simpler than bars, but bars look pretty, so bars with numbers on top would be the way to go imo. Of course making it toggleable or activated by mouse hover would be even better.

But I’m not so sure about the histogram thing, Especially with a bar that thin I think we should keep scaling to one dimension, otherwise we’d need to make the bar bigger vertically and take up more precious screen space.

1 Like

I’ve started work on some editor GUI drafts too.

This image shows the editor GUI, the info panel and the structure tab.

  • I tried to keep as many elements as possible in similar positions to the environment to keep everything intuitive. The menu is in the bottom left, finish is in the top right (as editor is in the environment), processes is above menu and the ATP bar is replaced with the MP bar. Suicide is also replaced with new cell, since they kinda sorta have the same function if you think about it (but not really).
  • There’s a hex grid over the background for the structure tab only. With the structure tab selected, the cell will be made of hex grid organelles like those in the game now.
  • Save and load cell need to go somewhere and given there was free space next to finish I put them there. I’m not satisfied with it but I’ll leave it to others to give their opinion. Bear in mind all the proportions and button sizes will be fixed so everything in the top right lines up properly.
  • Clicking new cell, save cell or load cell will bring up another panel. In the case of new cell, it will tell you the MP cost to delete everything you already have, save will let you save and load cell will allow you to load a cell if you have enough MP to change your current cell into that one. That feels a bit confusing and unfeasible now, so I think new cell and load cell will both be deactivated when not in the free editor.
  • Processes here opens a similar panel to that in the environment, except you won’t be able to switch organelles on/off or repair them.
  • Undo, symmetry and redo work in exactly the same way they do in the game now.
  • Clicking the species name allows you to type a new one.
  • Test removes all the GUI except for a return button and allows the player to swim around with their cell in a petri dish.
  • Clicking an organelle in place on the cell or an organelle in the list will bring up the info box. The player can grab the top of the info box and move it around, or close it with the cross. It shows the icon, MP cost, processes, basic description, detailed scientific context (with scrollbar), and options to delete, move or upgrade an organelle.
  • Choosing to upgrade an organelle brings up the upgrades system described here, which is a whole other bag of GUI demons.
  • On the right are the three main tabs. In structural mode, organelles are listed with their icons and MP cost underneath their category.

And here’s the appearance tab, with bonus info on the nucleus.

  • In the appearance tab the hex grid vanishes and the hex cell is replaced by what it will look like in-game with organelle models and membrane.
  • The nucleus can’t be moved or deleted, so those options are deactivated. Can it have upgrades? I also have no idea what processes take place within it.
  • Periphery organelles sound like they should go under the structure tab, but the trouble is they’re only visible once a procedural membrane has been drawn. Perhaps there could be a border around the hex organelles in the structure tab instead to represent periphery organelles? In that case they can be moved to structure. At any rate, only one periphery organelle can ever be chosen, but each can be upgraded.
  • Textures change the membrane texture of the cell.
  • Colour shows a colour wheel where the player can choose, unsurprisingly, their cell’s colour.

And here’s the menu, with all buttons full width this time.

I honestly still don’t know exactly what the consensus on the behaviour tab is, so I’ve left that out for now.

3 Likes

These GUIs look really good Oliver :0

Personally, I think a pie chart would work pretty well for showing how many compounds are in the player’s vacuole(s). Clicking on it could bring up a menu showing the compounds in each individual vacuole.

EDIT: The reason I think that this would work well is because it would be clear to the player how much of a compound they have in relation to another.


Made a quick edit of Oliver’s image. The big pie chart in the corner shows all of the compounds in all of the player’s vacuoles combined. The black “slice” represents unoccupied space. Hovering over a slice gives a tooltip showing info about the compound the slice represents. (e.g: Oxygen: 50 units, 25%) Next to the pie chart is a small bar showing the amount of occupied space.
Clicking on the chart would bring up a small window like this:

Over each vacuole would be a small pie chart showing contents. Hovering over one would (somehow) show it with greater detail.
The colored dots on the bottom are ‘buttons’ that toggle visibility of certain slices on the main pie chart. In the image, the red and green compounds are ‘hidden’.
All hidden compounds are represented on the main pie chart as a beige-colored slice. Its tooltip would be “Other Compounds”

1 Like

It’s a nice idea but I believe we considered it and decided against it a while ago. The trouble is that the proportions of compounds relative to each other doesn’t matter, and vacuole storage space doesn’t necessarily correspond with amount of a compound. The player is likely to have ten or more times as much of the simple compounds (oxygen, carbon dioxide, etc.) than the complex ones they’re often more concerned about (amino acids, proteins, etc.), so they’ll be looking at the smaller parts of the pie chart more often. Even if you hide the more common compounds in your design, what’s left will still take up too small a proportion to make sense of at a glance.

This may be counteracted by another problem though: larger molecules take up more space in vacuoles than smaller ones, so in effect the storage space used for each may be about the same even if you have 10 oxygen and 2 amino acids.

I don’t know what others’ opinions on this are, but in my opinion the simplest solution as far as the player is concerned is to limit each vacuole to storing one type of compound. Then you can use bars or pie charts for each compound which are based on all organelles storing that compound, and you see clearly the most important things: the proportion of a compound you have relative to its maximum storage space and exactly how much of a compound you have, both at a glance. The player could set the compound for each vacuole in the editor, and the maximum number of units of a compound your cell can hold is found by dividing all that compound’s vacuoles by the weight/size of each molecule.

But this is a concept the team created a while ago but now it annoys me and I feel like there’s a better solution somewhere. Do cells in real life store multiple resources in one vacuole? If they don’t it’s fine, but even so that’s not how vacuoles in the game now work. Plus, to store even the most basic compounds a cell would have multiple vacuoles. So maybe vacuoles should be general storage instead, the trouble then is working out how to reconcile that with the problems I mentioned above.

Also, pie charts aren’t the best.

1 Like

Working on a GUI Prototype with some basic button and cell movements so we can see how it would work within the game. I’m using Game Maker as my engine because I know the system very well and can make the mockup very fast. It should take me a day or two to get it up. Once I do I’ll do some recordings and put up a link for the exe file. I’m going to do a few GUI’s all within one, so you can quickly see the differences between them. I’m going to start with the current GUI and Oliverriver’s one(s) (with some minor tweaks). Right now I have a basic “cell” with simple movement and the background. But I should have it down within a day or two.

I think being able to see how it works within a game settings will give us more insight than static pictures.

Edit: Here is a picture to demonstrate what I’m doing.

Worked on a bit tonight, Used oliverriver’s environment Draft 4 to start with, here is what I got so far. Sorry about the poor video quality, still need to learn how to stream/record better.

3 Likes

I’ve started expanding from the basic layouts to decide how everything should be coloured/designed.

With the tabs open and editor unavailable:

With the tabs closed and editor available:

It still looks a bit bland. My original intention was to have a shard pattern behind the buttons “holding them up” but whatever I tried ended up messy and distracting. I think slightly darker colours are a good way to go since they won’t distract from the gameplay, although transparency should probably be included somewhere and I don’t yet have it in this design (not for want of trying).

The compound bars were problematic. At first I had the unfilled bar coloured a darker shade of the compound’s colour, but the result looked garish and too bright. Then I tried having every bar the same colour so it would be more coherent with the rest of the GUI, but that wasn’t clear enough. In the end I opted for a compromise of having the filled bar coloured to match the compound and the unfilled bars constant.

The main advantage of the design above, without complicated backing designs, is that it (should) perfectly adapt to screen size. The only complex part is the bottom bar which will have to extend to match, but otherwise the size of every other element will be constant, independent of the monitor size. I used 1366x768 above since that’s around mid-range in size, and I’ve left room in some places to account for smaller ones.

6 Likes

Hey the GUI looks really great, Oliver :slight_smile:
Just a question, what’s that bar above the compounds?

This looks really good! In reference to transparency though:

I (tentatively) don’t think it should be transparent.

Given how busy the edge of the screen is liable to be, I think it’s better to sacrifice the few centimeters of play area to be less distracted when viewing stats and searching for buttons.

I say tentatively because I haven’t seen a transparent version yet so I could be entirely wrong about what it would bring/detract.

But otherwise I very much like that GUI and the plans you mentioned.

I made some assets for Lavathor’s options menu and the new GUI in general, as well as a mockup of what the current concept would look like with my theme.

Mockuphttps://i.sli.mg/DVnUoh.png
Options Menu
Imageset
2 Likes

These look amazing, can you do one for the Microbe Editor as well and combine its imageset with the image set you have?

Wow, nice job @Oliveriver! I really like the new UI. I was quite against moving away from shards, but seeing your design has completely convinced me that minimalism was the way to go. It looks very proffessional.

If I may comment on two things,

  1. The top left corner should feature an HP bar in addition to the ATP bar.
  2. I feel like the reproduction bar should always be on screen and the player shouldn’t be able to hide it. On the reproduction overhaul thread I believe we also decided that it should be one long bar rather than multiple smaller ones. Might be worth it to have it extended to fill the whole top row and have the ATP and Health be under it.

@Narotiza, I really like the options panel you made. However, I don’t think that polygonal buttons really fit into the squares. In my opinion it makes them seem a bit unstable.

1 Like

Is it possible to see some other colors for it such as a RevGames Black or a darker blue? I want to see if there’s any conflicting colors if people decide to mod the gui

With the big buttons, the thrive logo one and the split one. Can you make them hexagon shaped like the options panel one?

Yeah, I really just pasted the buttons on top of Oliver’s thing. If I had spent more time on it, I would’ve made the backdrop follow the shapes better.
Also, the large button is already hexagonal. Do you mean octagonal? If that’s the case, I can definitely do that.

  • Metro
  • Shard
  • Some other weird combination

0 voters

So after talking a bit about this on slack, I feel like we should have an official thrive style, so that GUI’s for different game states aren’t terribly different from each other. The poll options are as follow:
Metro is the simple, plain, and elegant design provided by oliveriver. It uses rectangles and everything is at a right angle. There are no hexagons or shard sticking out.
Shard is the one we currently have in the game as well as milder versions of it like the option menu window and the mock ups Narotiza just did.

How do I undo my vote.

And which one is Metro??

Metro is the one made by Oliver and Shard is the main one (use Narotiza’s as a reference)

Also to undo your vote press hide results and rechoose.

An example of a metro-ish options menu:


Should I change the color scheme at all?

To be fair I think the color scheme is really good, it highlights whats needed and un-lights whats not (if that makes sense).

Naro if you can real quick can you test like a sort of “Mix” between the two? Like, add some shard-esque shapes to the tabs, like on the sides?

1 Like