Microbe GUI Finalisation

Fossilization saves a copy of an organism at that specific generation into the Thrive Content Library. What you can do with an organism once its in the TCL is a separate matter that needs to be discussed later.

Well, what's first on the list for discussion right now, then?

Sorry I couldn't get back yesterday, I was incredibly busy all of a sudden, though I think it's died down enough now.

NickTheNick wrote:

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.

I meant as in giving the player a choice for when they reproduce (providing they have enough RpAse) - it sounds like you interpreted me as not understanding the transition to the editor.

@WJacobC
I definitely agree.

Aiosian_Doctor_Xenox wrote:

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.

Yes, I remember talking with you about it. I think someone eventually said that this would be going into far too much detail and damage will be taken to the creature as a whole.

Aiosian_Doctor_Xenox wrote:

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.

Remember that this is only the GUI for the microbe stage, so later stages will require a lot of tinkering with - probably so much that they'll eventually end up looking completely different. I personally prefer the top-left, bottom-right approach of the new one as it feels a little more symmetrical and less bottom-heavy.

Oliveriver wrote:

I meant as in giving the player a choice for when they reproduce (providing they have enough RpAse) - it sounds like you interpreted me as not understanding the transition to the editor.

Ah, so the player will have the option, but not the requirement, to undergo cell division when the RpAse threshold is surpassed. In that case, I would name the button "Evolve".

Also, I think it's safe to agree that we need a fossilize icon, so that is no longer a TBD. Unless there is any opposition to the idea, I think an Ammonite icon is great, based off of the shape Doctor provided (I've seen some really weird/abstract ones on the web).

As Cheese posted on GitHub, the GUI for the main menu, gameplay and editor need work now that they can actually be added to the game. While the previous work on the visual style in this thread is probably done, the layout so far hasn't been that high a priority.

I've started work on the main menu GUI and background:

Spoiler:

It allows for colour and brightness shifting in the background, while the green tint woukd appear on whatever button is being hovered over. I'd imagine the large empty space to the right would be filled with a settings screen for setting up a new game, a list of saves for loading a game, the options menu for options, links to editors through the tools option and links to images and soundtrack through the extras button. This GUI style has been adapted via the editor and gameplay GUI mock-ups created by ~scio and Xenox. For those interested, the main colour scheme is #2b2b2b #90eb90 and #ababab, which is also what I used on the website and is partly based off the forum.

Well, I'll see what I can do as far as the Fossilize icon.

Might have something in a few hours.

No offense, but I don't really like the green tint to everything. Also, I think the buttons themselves take a lot of space on the screen. In an image it might not seem that large, but imagine having that fill the entire screen. I prefer the format we were discussing on the main menu discussion thread:

Spoiler:

However, that concept image of mine doesn't have the nice looking button or cursor of yours. Nevertheless, I think this works well because the menu doesn't get in the way of the background, and also I think the logo fits it well on the planet and the menu looks good centered under the logo.

Ack.

This button icon is harder to make than I thought it'd be. So many curves I have to deal with and orient...

NickTheNick wrote:

No offense, but I don't really like the green tint to everything.

Fair enough, although in the case of the buttons we'll need some way to indicate that they're being hovered over. I chose the green tint because it complied with the colour scheme I was using, although I now realise that the only person to actually have a say in that so far is me, what with the design of the website and everything. That's one thing we need to go over, taking this into account:

Spoiler:

NickTheNick wrote:

Also, I think the buttons themselves take a lot of space on the screen. In an image it might not seem that large, but imagine having that fill the entire screen. I prefer the format we were discussing on the main menu discussion thread:

Good point. The main problem with the centred vertical design is the amount of unused space on either side which may have to be filled somewhow (the image you posted is portrait whereas the actual main menu will be landscape and widescreen, leading to a lot of empty space - filled with space if we're intending to use the planet theme  :D ). Also, what should the options boxes for setting up a new game, choosing from a list of saved games, etc. look like and how will it fit in with either this screen or a second one?

I think white and blue could also be used as highlighting colours for the buttons.

For game start options, most of those will present themselves as we work on development, but I remember someone offered a good suggestion on how it should work. I'll try and find the post or if I wrote it down by tomorrow, otherwise we might have to start a new thread to discuss that.

Hi guys, I've been trying to get involved in this discussion for a while and can say that I'd like to bring some new cards to the table:
Current broken ingame GUI: https://imgur.com/WZHjpoH
The aim: https://imgur.com/6cLbi5j
Visualisation of the current cell editor concept, without GUI as I believe this needs further discussion: https://imgur.com/77PjTcB

I know there is a lot wrong with it as I just made it on my own, but if we all combine our ideas I believe we can make something that truly reflects the complex and sophisticated game that it will house.

Looks good.

There is just one thing I noticed with all gui's and concepts of gui's.
They are so big.
The displays that Thrive will be played on will in most cases be kinda big, especially when Thrive is released.
This may be irrelevant, just wanted to point it out.

Best would of course be if you could set the size yourself.

Soon I am going to rework the GUI into a smaller and more fluid design.

I'd also like to chip in that the vision for the GUI is to be as minimalistic as possible, with as many possible UI features being integrated into the game, and with shortcuts to make whatever remaining UI less intrusive. Also, your designs look very good, but I think they take the shard theme too far. It's important to retain symmetry, alignment, etc. where possible. I'll be finishing up my first set of exams tomorrow, after which I can more meaningfully explain what I mean and contribute towards the GUI.

Guys, we are not going to get anywhere if we don't settle some facts about the GUI. We can't just all make separate designs. We need the final say of someone with high authority in the subject. ~Sciocont, ThrivingCheese, NicktheNick. We need a solid theme to work from.

Made *yet* another concept. Thought there's no point coding it before I get some Critique on it. Also, What plugin do you use for the beveled edges Oliveriver?
https://imgur.com/z12f53q

It's not a specific plugin as such as the feature came with the graphics program itself, I'm afraid.

To me this GUI looks a bit too blocky - the compounds tab could work very well as you've got it, but everything else seems a little too big, with too much redundant space when we're trying to make the GUI a little more minimal. Ideally, it should be somewhere between this and the game's current GUI, similar to this.

Also, I think we should finalise a definite list of the buttons and shards that will be present in the game environment GUI (and everywhere else for that matter) to ensure we know what needs to be set out in the design.

Is the program GIMP? that's the one that I use. And thanks for the critique :D 

So I was going to post my own concept image as a guideline for how the GUI should look, and I realized we have yet to define what elements we want on the GUI in the first place, so first let's do that. 

Of course, we're going to want the basic game options, such as a pause button, a menu button, a help/game encyclopedia button, screenshot button, etc. If we look at Age of Empires II, we can see these options at all times are on the top UI part of the screen:

Spoiler:

However, I don't think this would work for Thrive, because that UI becomes quite obtrusive. Therefore, I think that a good alternative is to have an expandable and collapsible UI bar at the bottom of the screen, similar to that found in Sim City 4 (Beware, the photo is very large):

Spoiler:

If you'll notice, there is a small "..." button at the bottom that, when clicked, open the save, load, return to region, screenshot, etc. options. I think we should do the same in Thrive, with a "..." button, but the options would instead be:

• Save
  
• Load
  
• Help/Thrive Encyclopedia (I'm thinking similar to the Civilopedia in Civ games)
  
• Screenshot
  
• Exit to main menu
  
• Options
  
• Settings
  

In addition, we need to consider how the UI will incorporate compound levels that the player will want to see at a quick glance. I think that these should be incorporated into the cell itself, through the colour saturation of the cell's organelles. A brightly coloured mitochondrion would indicate it has a high amount of glucose, while a brightly coloured nucleus indicates a high amount of ATP. 

However, we could also have a compounds panel with bars showing how much of each compound the cell stores. The panel would not show bars for compounds not held in the cell or not present in the microbe stage. Then, the player can checkmark a box beside each compound bar, and that would create a copy of that bar in the game screen in the top right corner, so that if the player checked ATP, glucose, and oxygen, those three bars would stack together in the top right of the game screen.

Also, I've got a question I've been wondering about, should the microbe editor be accessible at any point in gameplay? Because we might or we might not need an icon and a button for it in the UI based on that.

MAybe the Icon for the editor should be a button that activates cell division. It would be greyed out until you have enough resources. also, I really like the UI of the website and would love to somehow implement it into the game. It would be cool if the shards reflected what was next to them and shone/enlarged when hovered over.

NickTheNick wrote:

In addition, we need to consider how the UI will incorporate compound levels that the player will want to see at a quick glance. I think that these should be incorporated into the cell itself, through the colour saturation of the cell's organelles. A brightly coloured mitochondrion would indicate it has a high amount of glucose, while a brightly coloured nucleus indicates a high amount of ATP. 

There will be many more compounds than organelles, and many organelles deal with more than one compound, so this probably won't work. It also wouldn't be possible in the later stages, so if we want a consistent GUI (which probably won't be possible across all stages anyway), it'd be better to have compound bars somewhere.

NickTheNick wrote:

However, we could also have a compounds panel with bars showing how much of each compound the cell stores. The panel would not show bars for compounds not held in the cell or not present in the microbe stage. Then, the player can checkmark a box beside each compound bar, and that would create a copy of that bar in the game screen in the top right corner, so that if the player checked ATP, glucose, and oxygen, those three bars would stack together in the top right of the game screen.

I think we need to try a few different ways of doing this to see what is most player-friendly. Having the compound levels hidden by default seems a good idea for saving screen space (though we need to make it very obvious to new players that there are compounds, perhaps by having the compound levels open during at tutorial?). We could have either a button on the GUI, or preferably a hotkey, which will either toggle to compound pane, or show it while the key is held. Having the ability to select some compound to always show would be nice, and it may also be good to show any compounds which get dangerously low/high.

NickTheNick wrote:

Also, I've got a question I've been wondering about, should the microbe editor be accessible at any point in gameplay? Because we might or we might not need an icon and a button for it in the UI based on that.

It should probably only be available once your able to reproduce, in which case the button could be greyed out when not usable?

TheRabiesGuineaPig wrote:

Is the program GIMP? that's the one that I use.

It's Xara Designer Pro (the version I have is 7, now actually old enough to not be sold on their website anymore). Incidentally, it's also what I used to make the Thrive website.

NickTheNick wrote:

If you'll notice, there is a small "..." button at the bottom that, when clicked, open the save, load, return to region, screenshot, etc. options. I think we should do the same in Thrive, with a "..." button, but the options would instead be:

Save
Load
Help/Thrive Encyclopedia (I'm thinking similar to the Civilopedia in Civ games)
Screenshot
Exit to main menu
Options
Settings

I was thinking something similar, but having all these options on the pause menu instead (with the exception of screenshot, which would be better assigned to a hotkey anyway). Considering they'd all require the game to pause, it could be easier this way, although both methods could work.

NickTheNick wrote:

However, we could also have a compounds panel with bars showing how much of each compound the cell stores. The panel would not show bars for compounds not held in the cell or not present in the microbe stage. Then, the player can checkmark a box beside each compound bar, and that would create a copy of that bar in the game screen in the top right corner, so that if the player checked ATP, glucose, and oxygen, those three bars would stack together in the top right of the game screen.

Having the compounds hidden but accessible via an extension of the GUI has been the idea for a while now (I think), but I really like the idea of being able to add or remove each compound bar from the default game screen. Regarding the visualisation of the compound stores, though, how would a percentage bar work? Would it just show how much of a compound you have relative to the total storage space for that compound of your cell? If that's the case, how can we deal with organelles that have the ability to store multiple different compounds? The total storage space for compound A will decrease as compound B takes its place in a storage vacuole, so stores of compound A will seem to increase (taken as a proportion of the bar) when in reality its available storage space is just decreasing. Or is it taken as a percentage of the total space in all organelles which can store it as if they were otherwise empty?

Seregon wrote:

It should probably only be available once your able to reproduce, in which case the button could be greyed out when not usable?

Agreed. Allowing the player to enter the editor at any time would make RpAse redundant. Should the editor GUI element be a permanent feature of it or hidden and revealed similar to other options?

Taking all of this and other discussions into account, the list of elements for the tidepool environment seems to be:
- Pause menu or expandable panel containing save, load, help, main menu and options buttons
- Compound bars (or other form of representation) which, apart from ATP and RpAse, can be shown or hidden in the default view
- An expandable panel containing all compound bars with a check-box
- An editor button (in my opinion it should be permanent, but as Seregon suggested, greyed out until enough RpAse has been collected)
- Some way of representing Mutation Points available for the next editor session
- Pop-up panels with information about the selected AI cell (name, fossilisation option and more information tab)
- A visual system for assigning the player-defined aspect of compound priorities for each organelle

What to do about changing compound capacities is still an unsolved problem. There are a few options for representing it graphically though:


1 - Have a single bar showing how the overall capacity of the cell is occupied by different compounds, something like the image above. This clearly shows how both the concentrations of each compound, and the overall available space, change. However, it may be a little difficult to read, especially if there are many compounds, some with relatively small concentrations.

2 - Have each compounds bar show how much of the total storage its using, and also show how much storage is available, either with a vertical line on the bar, or by greying part of it out. Using the above image as an example again, imagine that the green part is that used by a particular compound, the yellow part is space available (to this, or any other compound), and might be colored white, and the red + white parts are space occupied by all other compounds, and colored grey. This is a little clearer than the above method, but will have the result that most of the bars are mostly grey, with low compound levels, and the same information is duplicated many times (most of the bars will have the same amount of grey).

3 - Show compound levels as an absolute measure, instead of relative to available storage. Or somehow show both an absolute level and some measure of the space still available. I'm not sure how this would work graphically though.

Ok so I whipped up a quick little template which, to my understanding, covers all of the GUI aspects that have been decided. (All options are in options menu) (compounds and species name sre drop down menus to display more information).

>>>>>>>>> https://i.imgur.com/B8WEju8.png <<<<<<<<<<<

On reproduction:

I think we could even eliminate the reproduce button altogether. By giving it a hotkey, I think we could cut out the need for it being on the UI.

@Seregon:

That is a very valid concern. I cannot think of an easy way to get around that. I think one thing we can do is option 2, but then a compound bar turns yellow, orange, or red if it starts to decrease at higher rates in proportion to how much it has remaining, it is faded green when it is staying relatively constant, and it is bright green when it is increasing. However, that would still mean some compounds would be very difficult to see on their own compound bars. 

@Oliveriver: 

Well the benefit of having them on an expandable menu as opposed to a pause menu is that it creates a much smaller and less obtrusive UI, in my opinion, because pause menus usually take up the center of the screen. 

We need to add to the list of UI elements. I feel like it's incomplete. For one thing, we need a panel called something like "Statistics" where the player has access to clade diagrams of the species in the tidepool, graphs on certain fluctuations of values in the tidepool, and probably a screen giving an overview of the structure and functions of the player's cell. I think these could all be different parts of the same panel. 

@Rabies: 

I don't think it's time to mock up concepts just yet, we still need to decide on a few more buttons and bars we may or may not add, and how they will look.