Microbe GUI

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

My vote is a mix of both. Sleeker shard shapes that fit together nicely with the darker color scheme. That was really nice.

1 Like

I don’t think I really pulled off the shards very well though. They’re more hexagons, really.

How about having the shape of the buttons following the edges of the background?

Like that or something. Please excuse the awful quality I have no idea how you’re making these things.

EDIT: Also, of course, with a consistent distance from the edge of the panel.