Microbe GUI


IMO we want the gui to visually tell the player how to play the game. So I would be in favour of having a suicide button on screen all the time (I like the idea of it offering 3 options too) because what if you want to start again? Why should we tell people they can’t yet, they’re not weak enough?

Moreover I like the idea of a reproduction bar that fills up towards a grey button that says “Reproduce” or “Editor” or something. It gives a really clear signal for what the player is supposed to be doing. Having it off the screen may be cleaner but new players might get confused. They might just swim around and not realise they need to reproduce.

I don’t know if you guys agree but the basic principles are

  1. Look good

  2. Offer the player easy access to the controls

  3. Make it obvious what the player is meant to do.

Edit: Like here is a super obvious bar to tell you what to do. Do you see what I mean that it makes things super clear? (I know from a design perspective this is horrible.)

To wax lyrical a little more something I’ve been meaning to bring up recently is accessibility. So how can we help disabled players play the game? This guy’s story is interesting as I’d never really considered what it would be like to play as a disabled gamer until I read it.

Anyway what is the least number of buttons we could let someone play the game with? Is there any way we can let people play with just the mouse and leftclick? (That would be a really awesome step for accessability).

Anyway keep accessability in mind as you design. If you want to talk about it more that’s cool, I don’t really know anything about it, I’d just like to try and help people access the game.


Well, I guess we could move the editor button to the right of the reproduction bar and grey it out. It wouldn’t take too much space, and would actually fit in there pretty well. But it definetely shouldn’t be by the menu. I’m also not convinced we really need a suicide button during normal play time. You would very rarely use it, and it would clutter the UI. It should only pop up when you are close to dying or something.


What exactly is the point of suicide if you’re already going to die then?


This is quite off topic but it’s a general argument as to why a suicide button is important.

Right now I don’t believe there is any mechanism for a cell to die of starvation. You can just get lower and lower amounts of compounds, there is no point at which a catastrophe happens.

It can’t really be in terms of compounds either. Like maybe you run out of ATP and that means death. But ATP is more like “stamina”. If you are using it faster than your cell can produce it then you will burn up all your stores and then the value will sit at 0 while your cell is healthy and swimming at it’s maximum, sustainable, pace. It would make no sense to tell the player they died if they have a massive store of sugar which is being continuously thrown into the furnace as fast as it can.

In fact there’s no single compound which should really mean death when it runs out. Maybe protein is the best candidate? But again is a cell with all other compounds full + about to make a tonne of protein really dead?

We discussed having “water pumps” which have to be continuously powered or your cell will implode (I think it is an implosion, not an explosion, because it’s water rushing in) and if so then these losing power would cause a catastrophe, but we haven’t really fixed this yet.

Also what about all the annoying situations? Like when you are just stuck in a cloud of photosynthesizers and you can’t push them out the way. Or maybe a cell is following you which is continually spraying you with an agent which slows you down, but it does nothing else to harm you. We want people to have an out for these situations when their cell is healthy. Because the game is procedural we can never know if these will happen.

The suicide button could be in the pause menu for cleanliness and pop onto the screen when it’s suggested you might be done with this cell. I do think it should always be available somewhere though.


Thanks for the response and sorry for getting off topic! I’ve been a bit out of the loop :grin:

New 3D modeler/Vectorial artist

I’d quote tjwhale’s post and write QFT but that seems to have gone out of fashion since we left the old forum. Needless to say, that’s exactly what I was trying to get at but couldn’t quite deliver so convincingly.

This too is the right argument for having the editor button on-screen at all times. Even when buttons are unavailable the player needs to know that they’ll be available eventually, especially for what is arguably the most important action they can perform. If combined with the right reproduction meter design, they’ll get the gist that filling up those bars will enable the button without ever actually having to be told anything.

Hmm…I might have an even better solution. Have a single long bar but divide it up horizontally by compound. This seems like the most intuitive solution for me.

We should probably start considering iconography. There are two sections to decide upon: icons on buttons and panels, and the dedicated icons for compounds/organelles/biomes used throughout the GUI (and even in for game guides in the future).

I’ll make a separate thread for the latter, but we can discuss button icons here. It was another of the previous GUI’s biggest issues, leaving some players in the dark about what exactly they’re doing. The idea was to get rid of as much text as possible, but the replacement images didn’t exactly convey what they needed to.

We need icons that are relatively simple, can have their colour scheme adapted to that of the GUI as a whole, and are easily understood. Some could incorporate text.

For the moment I’ll stick with the environment and list my ideas for each of them:

  • Menu - I quite like just the “arms” of the Thrive logo for this, although I do feel it may not be the clearest thing in the world to represent a menu. Perhaps having text as well wouldn’t be so bad?
  • Processes - I’m thinking something related to chemical reactions. A test tube maybe? Or a chemical structural diagram?
  • Suicide - If we’re going for morbid, a skill and crossbones could work. I can’t really think of a better icon to represent death.
  • Editor - We could keep the cell splitting idea from the current GUI, but I think it should be clearer that’s what it is. Perhaps show a simple progression from one cell to two? Or would that be too complicated?
  • Fossilise - I remember this being discussed in the old thread, and the consensus was a fossil ammonite.
  • Quicksave - Erm…really not sure. I think the pause menu options in general should have text as well as an icon for clarity’s sake.
  • Resume (which I forgot to include in the mock-up image) - A play button.
  • Save game - Floppy disks are the universal symbol for saving, so I’m thinking a floppy disk.
  • Load game - Similarly, a slightly open folder.
  • Statistics - A simplified graph.
  • Help - A question mark.
  • Options - A gear, which was what I tried to make for the previous GUI. I used the asterisk from ~sciocont’s Thrive font, which in retrospect may not have been the best idea.
  • Exit to main menu - A cross accompanied by text saying “Main Menu”.
  • Exit to desktop - A cross accompanied by text saying “Desktop”.


I don’t think so, it’s pretty common for pause menus to be all text (I can’t actually think of any that use icons). Also I’d suggest having the last two buttons take up a whole row each so they are not so compressed, that way you could fit “Exit to Menu” and “Exit to Desktop” in one row each.

And thus, we won’t need icons for quicksave, save, load, resume, or either of the exits.

Besides that though, I really like the draft, it’s looking good!


Are there any objections to this general layout? The reproduction meter is now one long bar with all the locked up compounds represented…somehow. It’ll be divided either horizontally or vertically depending on how many there are. I also realised that we don’t actually need an HP bar, since ATP is effectively HP. If the new GUI is implemented before the switch to ATP as a health measure, it could just show HP instead.

If no one has any objections, I’ll move onto the editor, which will be a lot harder and more confusing.


I like it, but about ATP being HP, I’m not sure about that. I assume much discussion has gone on about it, but HP should really just be membrane integrity, I don’t think we should get rid of the concept of HP altogether, especially since attacks from pili wouldn’t directly affect your ATP levels.

As for the reproduction meter, maybe a single bar with several dynamic sections that when filled all fill the bar? I made a picture to explain it because I don’t know how to explain it in words.


I like this a lot, but how can we make it also easily display how much more of each compound you need?

Perhaps have the bars not simply fill up sideways, but fill up vertically as well? So then, if you have all of the yellow you need but half the blue, then the blue bar is only half height. Sorta like, combining this bar idea with a histogram.

Or we could overlay numbers onto the bars, maybe toggleable as an easily-accessible setting, or on mouse hover.


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.


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.


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”


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.


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.


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.


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.

Options Menu