Microbe GUI Finalisation

While the creation of implementable images of the GUI comes under the new Art Assets thread, the large range of GUI sections to be created and/or refined and probable discussion about them means that, in my opinion at least, a specific thread is necessary, partly to stop the Art Assets thread being clogged with discussion rather than actual models/images as Psych0Ch3f pointed out.

The design of most of the main GUI has already been at least partly decided upon in either this thread, this thread or this thread and the accompanying animation. However, if we're going to have a decent amount of interface sections and menus once the programmers are able to implement them, we'll need to begin finalising them as soon as possible.

I've gone ahead and made a set of microbe gameplay GUI sections based on its previous iterations but with added bevels and fades to remove some of the 'flatness':

Spoiler:

The icons in the top left and bottom right are the minimal permanent GUI sections, while in the centre is the pause menu and in the top right the floating graphics accompanying a selected microbe. To cut down on complexity, I replaced the pause menu's text with simple graphics (clockwise from top - quit, game information, help and tutorials, resume, save, options and game statistics). The editor is currently blanked out as it would be while the player has too little RpAse to evolve, and the amount of ATP in the gauge is simply a placeholder for the time being.

If we're going for a design with the same available options as this, then there are a number of different GUI sections or interfaces required:
1. Permanent gameplay GUI (as shown in the bottom right and top left)
2. Selected microbe floating stats (retracted version as shown and following the selected microbe as it moves)
3. Selected microbe floating compound stores (a panel opened by clicking the down arrow on the floating stats shard)
4. Player compound stores (like the floating stats, currently retracted, but opened by clicking the up arrow in the bottom right)
5. Pause menu
6. Save menu
7. Options menu (including audio and video modifiers)
8. Game statistics interface (with nested options for stats such as evolution trees, food webs, game progress, etc.)
9. Game information interface (with engine build data, credits, etc.)
10. Help menu
11. Tutorial and help panels (appear and disappear at stages during the tutorial or when you select them from the help menu)
12. 'Are you sure you wish to quit and return to the main menu?' (when quit option selected)
13. Permanent editor GUI (adapted from ~scio's design)
14. Editor sections GUI (as in structure, appearance and behaviour)
15. Editor attributes panel (extended)
16. Editor save and open interfaces

As you can probably tell, if that list is anything to go by, there's a lot to do (and I really doubt I've covered everything). Furthermore, each clickable shard will need a hover version to indicate when the mouse is hovering above it. My proposal is that the circular transparent overlay (which is currently grey) should turn green, specifically the same colour green as that used for the forums (#90EB90). Here's an example:

Spoiler:

Hopefully, these changes to the GUI will give a more natural and intuitive feel than the current, flatter block colour shards. But before anything can be set in stone, we'll of course need everyone's approval on each interface's design, and indeed the options available on each menu.

Maybe it would be possible to add a layer of grunge or noise behind the text so that the the backgrounds of the GUI do not appear to be a simple gradient?

Just a bit of a question, what happened to the box the player's organism is shown in?

The new design is great, but tbh I personally prefer the originally. Its simplicity has a certain appeal.

I do like the icons for the pause menu, though, so those should definitely be kept in any case.

I prefer the original as well, but i feel the cursor in the original can be bigger. But the thing in the top right of the new interface is quite nice (maybe the red lines could be a bit thicker?) I think you maybe went a bit overboard with the bezels.
We should conserve the text for the menu options, to avoid confusion. But the slight green highlight or blur you suggested in the icon (when its being selected) would be quite nice.
Also, you have a giant blob of dead space in the bottom right corner of the GUI/HUD (whatever its called). Either bring back the picture of the microbe or make it smaller to avoid the dead space between the ATP writing and the the rest of the box. (For those of you that dont know what dead space is: In design its a term used for spaces of "nothing" or plain background that exist in large quantities between focus objects. Though they may be nothing, our eyes are naturally attracted to the open space there)
Oliver, would you mind making another version, with the text and transparency of the original, but with possibly a lighter amount of bezel (to just provide a simple outline to the boxes) and with the fixing of the dead spaces in the design? Oh and the little tabs should be kept on the bottom of the screen imo (like the original).

Psych0Ch3f wrote:

I prefer the original as well, but i feel the cursor in the original can be bigger. But the thing in the top right of the new interface is quite nice (maybe the red lines could be a bit thicker?) I think you maybe went a bit overboard with the bezels.
We should conserve the text for the menu options, to avoid confusion. But the slight green highlight or blur you suggested in the icon (when its being selected) would be quite nice.
Also, you have a giant blob of dead space in the bottom right corner of the GUI/HUD (whatever its called). Either bring back the picture of the microbe or make it smaller to avoid the dead space between the ATP writing and the the rest of the box. (For those of you that dont know what dead space is: In design its a term used for spaces of "nothing" or plain background that exist in large quantities between focus objects. Though they may be nothing, our eyes are naturally attracted to the open space there)
Oliver, would you mind making another version, with the text and transparency of the original, but with possibly a lighter amount of bezel (to just provide a simple outline to the boxes) and with the fixing of the dead spaces in the design? Oh and the little tabs should be kept on the bottom of the screen imo (like the original).

I like aspects of both. Though, I am a bit biased, since I had quite a bit of input in design for the original .3.

Good to start work on the GUI for this stage. 

For starters, I like the new appearance to the boxes, as you said, looking less flat. I also really like the icons you made. With the exception of the gearwheel, in which I would prefer that the teeth not be rounded to maintain the original look, they all look very professional. However, I would like to make some comments on the GUI as a whole.

• Although the "shard" theme or whatever the word was is what Thrive's GUI is inspired by, I don't think that should be taken too far. I think the shapes on the interface are too irregular, and some of the shapes are more complex than necessary. For example, why should the floating graphic containing the ATP bar have all that empty space around the bar by having a shape that doesn't align with the shape of the bar? I understand we want to be unique, but there are some basic tenets of user interface that are timeless, and one of them is alignment and pattern. Scio's image midway down this thread that you linked is a perfect example. There is also the picture below which is slightly revised, which showcases what ~scio wanted as the MP icon.
  

Spoiler:

• Just to add upon ~scio's image, I think the gameplay interface should be as similar to the editor interface as possible. The editor interface does a very good job of lining the sections up with the edges of the screen, as well as keeping the shapes simple enough to not get distracting, while also maintaining that shard-like touch. For example, I think the MP and RpAse take up too much space as it is, and could be fitted more closely together in the interface.
  
• In regards to the pause menu, it should definitely be words. Those are really good looking icons, but they can be used in other situations. For the pause menu, every game I have ever seen has used words, and for good reason. For example, for an option like "Exit to desktop", what kind of icon would convey that? Especially since exit to main menu would have a very similar icon.
  
• I like the fact that the cell picture was removed from the interface. It was unnecessary because the camera will always be centered on the player's cell anyways, and it looked odd and made the interface too big.
  
• For compounds inside the cell, I was thinking that we use bars just like the ATP bar, except with different colours each. Or, I was thinking that all compounds would have blue bars, with only ATP having a green bar. The question becomes how to make all of these easily accessible by the player without sticking them all on the gameplay interface. 
  
• I think that the floating graphic for when a microbe other than the player is selected should look like the below. The X should be replaced by an icon for "Fossilize". I was thinking we create some different icons for that and decide on one. When the name is clicked, the player can edit the name. Clicking the fossilize button will save that generation of that species into the player's content library, and clicking the ellipsis icon will open a more in-depth window on that cell.
  

Spoiler:

• What are the arrows for on the right hand side interfaces?
  
• What would be the point of an in-game editor button when the player is automatically taken to the editor every time the cell divides?
  
• I do not think the player should be able to view the ATP levels and the compounds stores of other cells, only their own cell.
  
• The statistics icon was originally meant to be a button to take the player to an in-depth window on their cell, such as what organelles it contains, its compound stores, etc. However, what you mentioned about evolution trees and game progress is a good idea, and should also be added in as part of that, but I think that it should be moved from the pause menu to the gameplay interface, because the player will use it a lot.
  
• What is game information for? I have never seen a game that offers information on the game's engine in the pause menu. I don't even think that's an appropriate place to put it. Also, I don't think credits need to be accessible from here. I think having a credits button on the main menu is enough. 
  
• I like the idea of colouring a button when it is hovered over, and I would support either white or green being the glow (I personally prefer white).
  

Overall, this is a great thread and its great to see work going towards the GUI. You did a nice job of mocking up some concept to help visualize it.

I like how it looks right now, just:

I agree that it's maybe a bit to much shard shapes, and a suggestion, i think it would look better if the whole button would be light green when hovered over instead only it's center.

@Falthron
Here's the menu button with a very slight 'grunge', i.e. mottled effect:

Spoiler:

@Aiosian_Doctor_Xenox
After the concept animation, it was decided that it would be removed in favour of keeping the camera centred on the player's cell to let them know which they were.

@Psych0Ch3f
Here's the GUI with half the amount of bevel, and I agree that I probably went a little overboard:

Spoiler:

The dead space above the ATP gauge should probably be further discussed in case there's something specific we need to add.

@Aiosian_Doctor_Xenox (again)
This still retains most of the shapes you created for yours, only a couple are reflected or resized slightly.

NickTheNick wrote:

Although the "shard" theme or whatever the word was is what Thrive's GUI is inspired by, I don't think that should be taken too far. I think the shapes on the interface are too irregular, and some of the shapes are more complex than necessary. For example, why should the floating graphic containing the ATP bar have all that empty space around the bar by having a shape that doesn't align with the shape of the bar? I understand we want to be unique, but there are some basic tenets of user interface that are timeless, and one of them is alignment and pattern. Scio's image midway down this thread that you linked is a perfect example. There is also the picture below which is slightly revised, which showcases what ~scio wanted as the MP icon.

Ah, I was wondering what had happened to ~scio's MP icon. Do you know whether he also made an RpAse icon? Anyway, in reply to this, I see two options:
1. We keep the basic ethos of shards and the shattered design but align everything a little more as you said, but overall lose the original effect, no longer shattered at all.
2. We revise it to look shattered but functional.
Either way, we need synergy between the editor and gameplay GUI, so my guess is everyone else will probably vote for option 1. Having made a couple of iterations of the GUI now and seeing how little viable layouts there are with a style between these two options, I suppose this is the best decision, but that will mean sacrificing Xenox's design.

NickTheNick wrote:

In regards to the pause menu, it should definitely be words. Those are really good looking icons, but they can be used in other situations. For the pause menu, every game I have ever seen has used words, and for good reason. For example, for an option like "Exit to desktop", what kind of icon would convey that? Especially since exit to main menu would have a very similar icon.

Huh, I would have thought in terms of exiting, there'd only be the option to return to the main menu. Keeping the icons with accompanying words would probably become too cluttered, but from what others have said here it seems the jury is split on icons vs text. We'll have to wait until ~scio adds his opinion before continuing. And yes, the options gear should be remodeled.

NickTheNick wrote:

For compounds inside the cell, I was thinking that we use bars just like the ATP bar, except with different colours each. Or, I was thinking that all compounds would have blue bars, with only ATP having a green bar. The question becomes how to make all of these easily accessible by the player without sticking them all on the gameplay interface.

That's what I thought the retracted shard in the bottom right corner was for - when the player doesn't care much for what their compound stores are, they can keep it retracted, and only extend it when they want. Opening it could even be mapped to a hotkey to speed up the process.

NickTheNick wrote:

I think that the floating graphic for when a microbe other than the player is selected should look like the below. The X should be replaced by an icon for "Fossilize". I was thinking we create some different icons for that and decide on one. When the name is clicked, the player can edit the name. Clicking the fossilize button will save that generation of that species into the player's content library, and clicking the ellipsis icon will open a more in-depth window on that cell.

I didn't think of that. At the moment, it consists of the AI cell's ATP gauge and clickable shard to open its compound stores, both of which I think we'll definitely need to retain with the fossilise option on the floating graphic.

NickTheNick wrote:

What are the arrows for on the right hand side interfaces?

I should have cleared that up now, but my explanatory skills are notoriously inconsistent. In as basic terms as I can put it to prevent confusion, you click the arrow to open a larger panel with all the compound stores, probably with the gauges you suggested earlier showing how much of each you have. Same for the top right floating graphic, though those will obviously be for the selected AI cell.

NickTheNick wrote:

What would be the point of an in-game editor button when the player is automatically taken to the editor every time the cell divides?

I don't believe I was aware of this fact. Are you sure you we don't want to allow the player to choose when to enter the editor, maybe with a time limit they can stay in gameplay beforehand as a compromise?

NickTheNick wrote:

I do not think the player should be able to view the ATP levels and the compounds stores of other cells, only their own cell.

I probably should have read that before posting some of those other responses, but either way it may be useful to certain players. It could be an option implemented when customising the difficulty level, but I for one would use it anyway.

NickTheNick wrote:

The statistics icon was originally meant to be a button to take the player to an in-depth window on their cell, such as what organelles it contains, its compound stores, etc. However, what you mentioned about evolution trees and game progress is a good idea, and should also be added in as part of that, but I think that it should be moved from the pause menu to the gameplay interface, because the player will use it a lot

I considered that, but with the GUI as it is I couldn't find anywhere viable to put it and retain the flow of the shapes.

NickTheNick wrote:

What is game information for? I have never seen a game that offers information on the game's engine in the pause menu. I don't even think that's an appropriate place to put it. Also, I don't think credits need to be accessible from here. I think having a credits button on the main menu is enough.

To be honest, I had a spare shard on the pause menu I didn't know what to do with. Game information, if it were to be kept, would probably include the stage, progress towards the next stage, the option to re-read the stage introductory text, etc.

NickTheNick wrote:

I like the idea of colouring a button when it is hovered over, and I would support either white or green being the glow (I personally prefer white)

If you haven't noticed already, most of the graphics (including the website) I've made for Thrive I've tried to keep within the same colour scheme - specifically, #000000, #ACACAC, #2B2B2B and #90EB90. White is #000000 and green is #90EB90, so it could work either way, but I personally prefer green, just because I added a slight tint to most of the #ACACAC (light grey) coloured icons and text which was itself white.

@WilliamstheJohn
Are you sure?

Spoiler:

Thats like....the perfect amount of bezel. Awesome job
Is it possible to get that on the text version too, or only the icon one?

It looks amazing so far! Although I'm really confused with what the menu for the cell stage says.  I'll just learn as things progress.

Oliveriver wrote:

Ah, I was wondering what had happened to ~scio's MP icon. Do you know whether he also made an RpAse icon? Anyway, in reply to this, I see two options:
1. We keep the basic ethos of shards and the shattered design but align everything a little more as you said, but overall lose the original effect, no longer shattered at all.
2. We revise it to look shattered but functional.
Either way, we need synergy between the editor and gameplay GUI, so my guess is everyone else will probably vote for option 1. Having made a couple of iterations of the GUI now and seeing how little viable layouts there are with a style between these two options, I suppose this is the best decision, but that will mean sacrificing Xenox's design.

I would definitely support a GUI based off of ~scio's editor interface, it is sleek, minimalistic, and yet retains the unique shard look without becoming too imposing or too complex at any points.

Oliveriver wrote:

Huh, I would have thought in terms of exiting, there'd only be the option to return to the main menu. Keeping the icons with accompanying words would probably become too cluttered, but from what others have said here it seems the jury is split on icons vs text. We'll have to wait until ~scio adds his opinion before continuing. And yes, the options gear should be remodeled.

Gamers, myself included, will always want an opportunity to exit the game straight from the pause menu, and many game UI's have gotten a bad rap simply for not including that. It means making the player have to go through extra and unnecessary loading screens simply to exit the game.

However, more importantly, words shouldn't make it cluttered at all. Words have been used numerous times and have produced the best GUI's in gaming, since pause menus with only icons are almost nonexistent (Idk, maybe you've seen some, but I never have, even when I looked it up). I would prefer a vertical list of options, as seen in most games, for the pause menu, as opposed to all the options going around the menu.

Oliveriver wrote:

That's what I thought the retracted shard in the bottom right corner was for - when the player doesn't care much for what their compound stores are, they can keep it retracted, and only extend it when they want. Opening it could even be mapped to a hotkey to speed up the process.

Oh okay, that sounds like a good idea to me. However, I would change the icon from a simple arrow to something to convey compounds.

Oliveriver wrote:

I didn't think of that. At the moment, it consists of the AI cell's ATP gauge and clickable shard to open its compound stores, both of which I think we'll definitely need to retain with the fossilise option on the floating graphic.

I should have cleared that up now, but my explanatory skills are notoriously inconsistent. In as basic terms as I can put it to prevent confusion, you click the arrow to open a larger panel with all the compound stores, probably with the gauges you suggested earlier showing how much of each you have. Same for the top right floating graphic, though those will obviously be for the selected AI cell.

It doesn't make sense to be able to view the stores and ATP of other cells, for the simple reason that they are not the player. I think if you were to do that it would make the player feel less like they are playing as their specific species, and more like they are just observing a petri dish of microbes. Its for the same reason that a Dungeon Master doesn't tell you the health or stats of opposing monsters in a game, because it makes you focus more on the gamey-ness and less on immersing yourself into the world. If you are playing as a single cell, you shouldnt have the ability to know the compound stores or ATP levels of any of the cells around you, it just breaks the suspension of disbelief and allows for meta-gaming.

Oliveriver wrote:

I don't believe I was aware of this fact. Are you sure you we don't want to allow the player to choose when to enter the editor, maybe with a time limit they can stay in gameplay beforehand as a compromise?

Well what would you use it for? You couldn't make any changes. The player can only make changes when they reproduce, because the computer needs to know what the new cell will be like.

Oliveriver wrote:

I probably should have read that before posting some of those other responses, but either way it may be useful to certain players. It could be an option implemented when customising the difficulty level, but I for one would use it anyway.

Yes, an option to turn it off and on would be fine, but before we add the option I believe we should have a default of not having it available.

Oliveriver wrote:

I considered that, but with the GUI as it is I couldn't find anywhere viable to put it and retain the flow of the shapes.

To be honest, I had a spare shard on the pause menu I didn't know what to do with. Game information, if it were to be kept, would probably include the stage, progress towards the next stage, the option to re-read the stage introductory text, etc.

Well, as an aside, there was never any mention of introductory text for stages. Entering a new stage should be as seamless as possible, and the stage transitions themselves are often nominal, since the most important changes are gradual. However, in regards to a game info option, it could be put on the main menu, but that would mean an extra layer of buttons every time the player would want to enter or leave it, which I think is unnecessary. What's more, some of the tools on it would be used by the player commonly and would be best fitted onto the readily available interface. With some revisions to the GUI we should be able to find a place to put it.

Oliveriver wrote:

If you haven't noticed already, most of the graphics (including the website) I've made for Thrive I've tried to keep within the same colour scheme - specifically, #000000, #ACACAC, #2B2B2B and #90EB90. White is #000000 and green is #90EB90, so it could work either way, but I personally prefer green, just because I added a slight tint to most of the #ACACAC (light grey) coloured icons and text which was itself white.

Well green matches the first three stages since it could symbolize the theme of life and evolution, but then it loses that meaning in the later stages when it becomes about civilizations, technology, and strategy. That's why I think white is more applicable to both situations and is more timeless.

Oliveriver wrote:

@WilliamstheJohn
Are you sure?

Spoiler:

A bit more darker by it's edges.

NickTheNick wrote:

The X should be replaced by an icon for "Fossilize". I was thinking we create some different icons for that and decide on one.

Here you go, just my ideas:

Spoiler:

Hope you like it:D

Williams, Oliver is suggesting that the buttons highlight when hovered over. Having a completely solid colour nullifies that. Also, you just reneged your suggestion for a solid colour by asking for the gradient again.

EDIT: In regards to fossilization icons, I think we should have an icon based on one of the below images (basically a shell, which is a common symbol of fossilization):

Spoiler:

Spoiler:

Spoiler:

I want to add that all these icon should be augmented with tooltips when the player hovers over them. Not everyone will immediately get a shell for fossilize, or even an X for exit game (is it closing the menu or leaving the game?, etc).

Yes, of course, hovering over any icon will show floating text, like in my pic on the first page, naming the button. For the pause menu, buttons would have text and not need that.

NickTheNick wrote:

Williams, Oliver is suggesting that the buttons highlight when hovered over. Having a completely solid colour nullifies that. Also, you just reneged your suggestion for a solid colour by asking for the gradient again.

EDIT: In regards to fossilization icons, I think we should have an icon based on one of the below images (basically a shell, which is a common symbol of fossilization):

Spoiler:

Spoiler:

Spoiler:

I Like the second one, it should have some form of like cracks on it to make it more 'fossil esque' , maybe also some green on it like some plant overgrew onto it, we dont need to, makers choice, but it is a recommendation.

I disagree, overgrowth over the fossil icon would make the icon too complex and make it harder for the player to see the fossil itself, which is what we want.

Oliveriver wrote:

@Aiosian_Doctor_Xenox
After the concept animation, it was decided that it would be removed in favour of keeping the camera centred on the player's cell to let them know which they were.

@Aiosian_Doctor_Xenox (again)
This still retains most of the shapes you created for yours, only a couple are reflected or resized slightly.

1. Well, I was thinking of it more as a way to roll the creature in that box separately to check for wounds and things, so that you wouldn't have to make your creature stop what it is doing to look it over with the game camera. Like a collapsible diagnostic thing.

2. I could see that. .3. I just sorta prefered the layout mostly at the bottom, so the player can watch the sky(Or whatever is above you) for predators. Like say, if you are mouselike, and you've seen large flying predators. So you have an unobstructed view to keep watch for predators. .3.

I'm a very practical person. I don't want to get eaten because predators have learned to hide behind the menu button... >.>

And I doubt anyone else would want that to happen either. .3.

Menu Button predators... That would be quite the problem... More than running out of flashlight battery in Metro...


Anyway, on the fossil Icon, what about like T-Rex Skull? Something like that? Or if a shell, make it like an ammonite, and obviously so. .3. Something that is extinct right now is what I'm saying. Something easily recognizable as such. .3.

The exact same argument could be made for smaller organisms who hide near the ground. Either way, it's far too insignificant of a factor to worry about when addressing the GUI. Especially since we can always add in options to have retractable interfaces.

Yes, an ammonite shell was one of the three suggestions I posted. I prefer it the most as an icon for fossilization.

NickTheNick wrote:

The exact same argument could be made for smaller organisms who hide near the ground. Either way, it's far too insignificant of a factor to worry about when addressing the GUI. Especially since we can always add in options to have retractable interfaces.

Yes, an ammonite shell was one of the three suggestions I posted. I prefer it the most as an icon for fossilization.

So, like these?:

Yes, perfect, an icon like that, except matching the style of the other icons, which I think Oliver knows how to do. However, don't let this thread just be discussion for one icon.

I believe I am missing something. Just what is the fossilize function? Is is something that saves the image of your creature to put on the fossil record or what?

Falthron wrote:

I believe I am missing something. Just what is the fossilize function? Is is something that saves the image of your creature to put on the fossil record or what?

i think its exactly that........its like the save button in this game....if a moderator wants to correct me of course....