Microbe GUI


[quote=“Oliveriver, post:94, topic:111”]
I still prefer blue. In the blue design the disabled buttons would turn grey anyway.
[/quote]Yeah the blue color works well with the design.

[quote=“Oliveriver, post:94, topic:111”]
No…? Well, in real life it is, but not in-game.
[/quote]So hydrogen will be in game as an orange compound cloud? Sweet :slight_smile:

One final thing that has nothing to do with you or the GUI really, but don’t you think the icons are a bit inconsistent? We have glucose, oxygen, protein, and hydrogen being represented by sugar cubes, air bubbles, meat, and fire respectively, but for the rest we just have their molecules.


See this thread: Iconography


Examining the colors and comparing it to the blue one I can say that the blue one is slightly better. Probably because it fits the area more and because gunmetal grey would fit something more in the future… Just speculation however, It looks great :smiley:


In all due respect, both look great and better than what we have.


Oliver that looks fantastic, and I’d agree that blue looks better. Also although the blur effect is nice I recall that TheCreator said Ogre currently can’t handle blur effects. However can’t we just pre-blur the backgrounds the game uses (I know it’s not the same as the edge blur which you showcased, but blur nonetheless)?

EDIT: @Oliveriver I don’t think the version number should be on the game screen. It’s not information that is relevant to gameplay. Typically it appears in a corner in the main menu, and if wanted the pause menu as well.


I remember there was a protein icon that was fixed to not look like a shoe. I too like the blue theme more. We definitely did not decide to use ATP as a health measure. Health shows how well all of your organelles are working and how damaged you are in general, and works in conjunction with ATP. Check out the bottom half of this post.

I also really like the suggestion of using a hotkey for suicide and having suicide pop out only if you have a small amount of compounds.

Anyway, I think what you did looks great and very professional. Nice job.


@Oliveriver, if you’re working in photoshop can you send me the psd file to the gui? I have an idea for the options menu and I’d like to make it in the same style.


Unfortunately I’m not, but I have kept a personal styleguide for the panels which should work for other programs:

  1. Build a shape based on squares (I’ve been using 1cm squares but this will change in future to a value based on pixels).
  2. Colour it #00FFFF then make it 80% transparent.
  3. Add inwards bevel with these properties: size: 0.11cm, contrast: 50%, light angle: 270 degrees (i.e. straight up) and light elevation: 32 degrees.
  4. Create a white shape over the top.
  5. Add linear transparency with the max transparency around the centre of the shape and min transparency half the height of the shape above the top of the shape.


It would be wonderful if you got me a new options menu (main menu) There are a few things I’m holding off doing because of it.

Also I have photoshop as well if you guys need me to do anything with it.


I really like the blue version too! Really nice work here! :smiley:

For the suicide icon, maybe a red button might be better. The skull and bones means more death to me


So Nartoiza came up with these buttons and we played around with them in the game. I know its only the Main Menu, but this is a stepping stone into the Microbe GUI as well so I thought it should go here.

The 2nd one is at 1366 x 768


It looks awesome! I would suggest that the colour is a bit bright but that’s a choice for you guys to make. Great work!


That looks amazing, A bit of jaggedness however (like a tiny bit) would make it more Shard-ish, I mean it looks gread now just a bit hexagonal :stuck_out_tongue: Good job!


It’s ment to be hexy, but nar is already working on a darker one, it looks way better. I’ll try to get it in tomorrow.


I like the bright colours. Great job.


I think this is the final one. Its a little darker.


I’m not sure if i agree with having the symmetry button between the undo and redo buttons. It seems too exaggerated, as if it’s “the focus” of the editor.


But if it’s not between those then it wouldn’5 be symmetrical!


I’ve been working on polishing the GUI design by incorporating the above feedback. I wanted to get onto the editor too but at the moment don’t have time.

First off, the GUI with everything open. Aside from small dimension changes, you’ll notice a few differences:

  • ATP has been replaced with health (using @Narotiza’s DNA art for the bar). I had both ATP and health up there for a time but it felt too cluttered and too large, so I’ve relegated ATP to the main compounds list.

  • There’s now a pause button. I saw some discussion about this on Slack, and I think it’s worth considering having one. Now, to everyone who keeps insisting on hotkeys at the expense of buttons, I’m trying to make this as idiot-proof as possible. Yes, players could learn to pause with the spacebar during the tutorial, but even judging by the gameplay videos we have already, many people don’t pay attention and end up just as confused as they would be without one. We need to keep reminding them until they get it. Experienced players may find it annoying but I think the button is small enough not to be a problem.

  • The suicide button (also hot property in the hotkey debate) has been moved to make space for it. It could have been placed between them, but that creates the risk of players suiciding by mistake when they wanted to pause (of course, we’ll have confirmation boxes for these things anyway, so it doesn’t matter too much).

  • Rather than have a weird reproduction bar, the editor button is progressively filled in as the player gathers the necessary compounds. I added a button next to it to show the compounds required to fill it (again, idiot-proofing) with the option to hide it.

  • You’ll notice the hydrogen bar in the bottom panel is cutoff in a weird place. Unfortunately this is how the GUI will have to work unless CEGUI allows something different. Since the bottom panel stretches to screen size, the corners and centre will be separate images, with the centre image stretched to match. Therefore the compound bars can only inhabit the portion of the panel that’s the rectangular central block.

Here’s the same image with the game paused and the foldables fodabled.

  • The pause button has switched to a play button, which makes sense.

  • I’ve added fossilisation UI below each nucleus, which I suggest appears automatically when the game is paused. By clicking the text you can type a new name and that species is either saved to your files or overwritten. This is also a sneaky way to get the player species name back in the environment without it being intrusive. One issue is that boxes near the edge of the screen will overlap with other GUI elements, so my solution is to have the transparency of the fossilisation box scale with distance from the centre. I’ve no idea whether this is possible with CEGUI.

Finally, the overlay menu. Not much to talk about here. It’s only just occured to me that I didn’t add a resume button and I don’t have time to fix it now…Belgium. So really there should be one more button.

The font used throughout is Jura, which we’re already using for the compound list and such in-game.


Oh yes this is beautiful!!! :heart_eyes:

The only criticisism I have is the Editor/Reproduction area seems off compared to the rest. It will probably work much better in-game though.