Microbe GUI

Oliveriver · September 28, 2015, 6:52pm

A continuation of discussion from these places:

So…it seems we need a new GUI, because my old one sucks. Well, it doesn’t suck entirely, because some people like it, although I think they’re more attracted to the art style than the placement and design of individual buttons. Read my reply at the fourth link above if you want to know more.

There are a couple of different opinions floating around on what actually needs to be changed. Some people think we just need a fixed text box, others say the base design is nice but the button placement is “horrid”, and I frankly can’t stand to see any of it stay (except the main menu, because I quite like that).

I propose that, for the upcoming release, we stick to fixing the help text box. For reasons I’ll explain in a moment, only I’m actually able to do that, and it should be a pretty quick fix (should). Afterwards I think we should focus more on gameplay for the next set of releases (since the membrane and organelles should be included by then), but it wouldn’t hurt to slip in a better GUI at some point too.

The GUI exists in two locations: the first is a set of images and Lua files determining how it looks and functions in-game; the second is the actual file I used to construct the shapes, which I still have. Editing the exported bitmaps (imageset) is possible, but won’t lead to good results. To actually change the shape and appearance of the buttons, you have to edit the base file, because it consists of a set of vector shapes with applied effects like transparency and bevel. To do that, you’ll need either the software I used (Xara Designer) or something like Photoshop, because I believe you can export from Xara and edit in the same way with the same layers and vectors intact using Photoshop. Paint.net won’t cut it.

That leaves three possible options. I could make the changes myself (likely based off of others’ ideas, because I obviously can’t be trusted to make a good GUI on my own), someone else with the software above could make the changes, or the whole design could be scrapped and remade in another way. One of these is considerably more drastic than the others, but that’s actually what I was imagining would happen once we got someone on the team who knew what they were doing in regards to 2D design.

With that out of the way, we should probably start designing the next GUI iteration. The updated help panel will just be a rectangle-ish thing, so that’s easy, and the short term is sorted. Other than that…

There are a number of GUI elements which need to fit somewhere in the various scenes. I’m basing this on the final GUI to accompany the final game, because right now we have a few mechanics which will be replaced.

All
Cursor
Tooltips
Main menu
New game
Load game
Options
Tools
Extras
Credits
Exit
Version label
Thrive logo
Environment
Species name
Editor
Compounds list (with radar charts)
ATP meter
Locked-up compounds/reproduction meter
Save (and save window)
Load (and load window)
Help (and help window)
Options (and options window)
Statistics (and statistics window)
Pause menu
Exit to main menu (and confirmation box)
Exit to desktop (and confirmation box)
Fossilisation
Organelle priorities
Suicide button (and confirmation box)
Editor
Secies name
Finish
New microbe
Save (and save window)
Load (and load window)
Help (and help window)
Options (and options window)
Statistics (and statistics window)
Pause menu
Exit to main menu (and confirmation box)
Exit to desktop (and confirmation box)
Mutation points
Symmetry toggle
Undo
Redo
Structure tab/scroll panel
Appearance tab/scroll panel
Behaviour tab/scroll panel
Test tab
Setup page
Play with chosen settings
Exit to main menu
Difficulty
Experience level
NPC evolution rate
NPC evolution variance
Natural disasters
Compound concentration
Start location
Mutation budget
LAWK toggle
Loading page
Play with chosen settings
Exit to main menu
Saved item list
Saved item info
Options page
Apply chosen settings
Exit to main menu
Resolution
Volume
Difficulty
Experience level
Controls
Autosave frequency
Extras page
Exit to main menu
Concept art gallery
Music list
Tools page
Exit to main menu
Free edit
Debugger
Loading screens
Loading animation
Image of player cell

Bear in mind this list is based on everything which will eventually be in the game (and I’ve probably missed many things). Still, there’s a load to do. I’ll explain what something does or what it should look like if you ask, but you can search for anything you’re unsure about here:

http://thrivegame.wikidot.com/gdd-microbe:game-screens

Finally, a word on the art style. I like the transparent blue with green highlights design we already have, but there are a lot of problems with the way it’s been implemented. There’s a lot of dead space, leading to it looking unnecessarily large on small monitors. The shapes are a bit haphazard, and some important buttons are hidden while unimportant ones are displayed in full view. Again, see my reply to the fourth link at the top of this post for a rundown of everything wrong with it, and what to avoid if you’re desiging something new.

tjwhale · September 28, 2015, 8:45pm

I like the gui and I think you did a good job when you made it.

IMO it’s going to be impossible to design a really good gui until you can play the game. You want to play and think “I wish there was a button for x so I don’t have to keep going into that menu” and then you know to make a button. Or maybe you play for a while and realise there is a button you never press so that one is worth hiding. A streamlined design that is tailored to the gameplay requires the gameplay to be there first.

Do you want a button to open the “change agent codes” screen or will there not be a screen like that because that’s not how agents work? Will you want to highlight enemy trails to track them using your tracking sensors? Because if that is a thing then it needs to be pressed like 5 times per minute. If it doesn’t exist then there shouldn’t even be a button for it. Do you see what I mean?

Take Crusader Kings 2 for example, that’s got the worst GUI of any game I have ever played. Why? Because there are loads of things on the the top layer which you really don’t need (how often do you want to look at the religion view of the map and how often do you want to look at the college of cardinals?) and there are loads of things hidden which are crucial (attrition, one of the core features, is hidden in a tooltip. Army size, the most crucial piece of information in the whole game, used to be hidden inside a tool tip inside the realm tree inside the character screen. (they have slightly fixed it now))

There gui is a disaster because it was obviously built by someone who wasn’t playing the game and was likely working from a list to put the features in they thought people would want. (It’s a real tribute to CK 2 that it is an amazing game despite it’s many flaws.)

IMO gameplay first, gui afterwards.

Oliveriver · September 29, 2015, 4:42pm

Which is why I’m suggesting working on a new GUI alongside the addition of new gameplay features, so it can be tested alongside new additions. Besides, we’ve had quite a bit of testing of the current GUI anyway, and found quite a few faults in it already.

Oliveriver · October 25, 2015, 11:59am

Ok, I’ve fixed the help panel - here’s a new, more rectangular version which fits within the same dimensions as the old one:

I also have the updated ThriveGeneric image file ready, and I’m fairly sure the rest of the relevant files can stay the same.

NickTheNick · December 10, 2015, 8:05am

To carry over the discussion we were having on Slack:

meandmy10:

The species name at the top Left on the game UI does it need to be there? I guess its not getting in the way but I don’t see its use
For each of the squares what do you want to represent each organelle? we could have just a icon for each of them or
we could do something fancy like have a 3D model of each of the organelles that spins whenever you hover over them or something (like in KSP and a bunch of other games)
For each of the compounds I’ve made a small icon like thing for most of them as you can see in the images, most of them are based off the elements they are made out of but when it comes to things like glucose and amino acids suddenly its a lot less elegant of a solution…
I’m not sure what to put under the appearance tab, I mainly put them there both for future proofing the design but also because it was based off this:
Game Screens - Thrive
I guess we can put colour and maybe different textures for the call membrane in there but that’s all for this stage of the game, and thinking about it maybe that’s not a bad thing as the GUI slowly evolves as the cell does slowly adding more things like skin and fur and maybe clicking certain parts of your creature you can change small things like eye colour, you get the idea.
I have no idea what to put under the Behaviour tab, the dev wiki says “When activated, the cell and background are replaced by a behavior editor based on a hex grid.” I have no idea what the means, I’m guessing as I said before this will start off with basic actions to teach the player and not overwhelm them by spamming them with information, but again I have no idea how anyone wants this to work so we will need to get people talking about how to implement it before I can design something for it, I’m just not sure what to use it for in the cell stage before you get any grey matter.
Just one last thing, I finally looked at @the_creator’s Organelle Functions post of the development forum and found more UI ideas, while I do think they are cool they might be adding a little too much complexity, but again I’ll sleep on it, maybe we can make a menu come out from the right for upgrades or maybe make another tab for our current menu idea.

oh and please if you have ideas tell me, or even better make a badly drawn thing in MS paint that’s even better I just want as much input as possible really

Edit: I guess I should mention that i have not fully read the Organelle Functions post yet (I gotta go to bed now so I could only skim over it), sorry for another wall of text too, maybe I should be putting these on the dev forum?

okay I just thought of an idea I had a while back, maybe on the behaviour tab is the best place to have some key bindings, so whenever your cell/creature gets a new ability rather then have them find what key binding it’s under the options you can not only find it there but rebind it… idk just an idea I’m throwing out there

the_creator:

I think it’s there for looks.
I think the best thing would be to have an actual organelle model there, and the player can drag and place it. So you can just leave the space blank, and I can code it in later.
I think just writing Glu and AA would work. It’s easy to tell by looking at them, and people will memorize it after a few minutes of gameplay. Plus, the color of the boxes will be the same as the compound clouds, so the player doesn’t even know what exactly the compound is.
Appearance will probably be changed to external organelles, such as cell walls, engulphing edges, cilia, etc…
Behavior tab will replace the screen with a node-based editor. So you will be able to place inputs such as food, prey, and predators and connect them to show outputs such as flee and attack.
Well, evolving organelles is a complicated business , so we need a system that allows for all the different things, but if you can think of something better, go ahead.

oliveriver:

Not necessarily, but it seems like the logical thing to go there. Should probably be smaller though.
I like the 3D model idea, partly because we don’t really have icons (something we probably should have).
See: Microbe Appendices - Thrive. It’s not final but there’s a list of icons that could represent things. Chemical symbols are ok but putting a proper image there (as long as it’s easily recognisable, like a bone for calcium) would work better.
The appearance tab is where you choose a periphery organelle (cilia, cell wall, etc.) and pivot the external organelles
about on the rendered membrane.
No need to worry about this for now, it’s too far off unless we want to seriously future-proof things. Agent synthesis might go there eventually, but that was always an uncertainty.
We need an organelle editing menu somewhere, either a pop-up window or replacing whatever tab is open until you click off it.
Good idea, although that’s partially covered by the behaviour editor concept anyway.

I’m liking the direction you’re taking with this. A few things:

In your GUI designs you have bars for compound levels. They’ll be replaced by radar charts in the end, and they’ll be a whole lot of them.
So far your shapes seem a bit rigid. I realise they’re nowhere near complete yet, but if you could try to make them a bit more organic and randomised.
The reproduction bar is a bit more complicated than just one progression, since you need to accumulate a certain amount of each compound. The simplest solution would be to split it into several blocks and have each of them fill as you collect enough of each.
I realise this is exactly the mistake I made, but it all looks a bit big right now. Balancing minimalism with showing everything we want on one screen is the biggest difficulty of making this GUI, but I have faith you’ll find a way.

meandmy10:

alright I can make the UI more organic but keeping the kind of fractured look we have at the moment is a little
hard because curves are organic not fractures, what I could do is put more corners in it to make it less rigid, I’m guessing that’s the best solution unless you guys want to take the style in a different direction
The radar idea is interesting but it has 2 problems :
It limits what the player can see (it would take up more of their screen) and it’s more complex, when making a UI you want to keep it as simple as possible, bars are easy and everyone understands them but with radar charts some
people have not even seen one before and they can get clunky when there are a lot of things on them and making more then one would be messy, so maybe not? unless you can really sell me on them I think they are more of a hassle then what they are worth. I know the reproduction bar is more complicated then just one bar, my thought is that we should keep it as just one, for the sake of simplicity I think when you hover over the bar it should bring up a box that tells you what’s lacking to continue, something like this:

NickTheNick · December 10, 2015, 8:34am

Now my thoughts on the topic.

Species Name
I don’t think this is necessary to show on the gameplay HUD. It’s not something you need to see while you’re playing. It should appear in the editor, and in one of the open-able windows during gameplay (for example the stats tab).

Appearance Tab
So this tab will cover membrane colouration and periphery organelles / membrane upgrades? I feel like periphery organelles and membrane upgrades tie into Structure though.

Behaviour Editor
We will need to eventually plan out a concrete design of what this will look and act like.

Organelle Editing
I think this shouldn’t require it’s own panel or anything, it should just be a window that opens up from right clicking on an organelle in your cell.

Compound Bars
I think numbers will actually be better than bars, although they’d be less visually appealing. We had this discussion before (http://thrivegame.canadaboard.net/t1323-microbe-gui-finalisation) and we couldn’t come up with a feasible way to display compounds to the player effectively using bars. The problems were manifold, and to list some of them here:

I think that displaying colour coded numbers beside the icons is a lot more compact and informative than displaying the compound bars.

Reproduction Button
I was thinking about this one and, in my opinion, I think we should remove the button to reproduce/enter the Microbe Editor. Cell division is a process your cell can perform, which doesn’t fit on the HUD, just like we don’t have a button to enable/disable Engulfing Mode, or a button to eject an agent. It should just be a hotkey that only works when the conditions have been met.

That’s not to say we shouldn’t have a graphic displaying when it’s possible to reproduce. Currently, the Editor/Reproduce button shows that by highlighting, but ideally it would be displayed through a progress bar (as meandmy10 showed) or some similar graphic.

More importantly, however, is that right now your cell first replicates, and then you can choose to enter the Editor by clicking the button. It shouldn’t be like this, you should enter the Editor immediately as a result of replication. This makes a button for entering the Editor from gameplay useless, because entering the Editor is just a result of reproduction, not an independent choice.

Thus, when you are ready to replicate, you click the button to do so, which takes you into the Editor. You design the evolutionary changes that happen to you this generation, and then when you click finish, you return to the gameplay and your modified cell replicates.

This ties in to the design of the Aware Stage, where you simply reproduce to enter the Organism Editor, there is no button to enter it on the HUD.

meandmy10 · December 10, 2015, 12:28pm

Species Name
I think most of us agree on the species name being unless in the gameplay UI so I’ll get rid of it in he next set of images.
Appearance Tab
hmm this is a tough one because i feel that membrane upgrades should be in structure too but i can’t really think of a way to put things like that in while keeping it as simple as possible, i’ll make a few designs for you guys to argue over later
Organelle Editing
two things i can do come to mind when i think about this: as you said a window that opens when you select an organelle, or maybe when you are in the structure tab and you select a organelle a panel from the right pops out, i think i rather the window solution but i’ll do designs for both for the sake of argument
Compound Bars
we could just put numbers over the bars? i understand you point though, but the advantages of a bar is you can glance at it and you can tell if its low or half full or full, the challenge will be setting what “full” is on the bar to be useful, again i will do designs for all of these. oh and one question, will here be a actual “full” for the cell? ie. is there going to be a max that your cell can carry?
Reproduction Button
okay, what about new players though? I’m up for getting rid of the button but if your new to the game you probably don’t know the key binding, maybe we should have the button slide out from the side when you can split rather then having it there all the time?

TheCreator · December 10, 2015, 4:59pm

Species Name
Yeah, it should probably only be seen in the editor.
Organelle Editing
I don’t really think my upgrade window idea was overly complicated, but I’m guessing that’s just my bias, so I won’t be mentioning it again.
Compound Bars
A cell has dedicated storage per each compound, so to answer your question, yes, there is a maximum limit, but you can go over this limit if you are very low on the other compounds.
Reproduction Button
I think having the button slide out is a great idea.

Oliveriver · December 10, 2015, 5:54pm

Species Name

I still think it could be somewhere in the environment GUI, just shrunken.

Appearance Tab

The problem here is making the distinction between a scene where a cell’s membrane isn’t drawn and a scene where it isn’t. Periphery organelles and membranes upgrades could be structural, but you wouldn’t see any of the changes being made.

Behaviour Editor

I’m thinking this is something that’ll need to be heavily prototyped before we even start putting it in the game.

Organelle Editing

Whatever works IMO. There definitely should be an organelle editing window/panel/whatever somewhere when you click on one, but it’s your decision where to put it.

Compound Bars

Depends on how we want vacuole storage allocation to work. If only one compound can be stored in each vacuole then yes, there is a maximum capacity and it could be represented by a bar (much better than a number since the relative volumes will be changing as you add or change vacuoles). If multiple compounds can be stored in one, it’s more difficult, which was the crux of the problem on the old forum.

Reproduction Button

I’m firmly of the opinion that this shouldn’t just be a hotkey. Whether it’s something that slides away or is greyed out until available I don’t mind. While hotkeys are useful for experienced players, reproduction is one of the most important things the player can do, so even newcomers will need a visual aid for it.

Moopli · December 10, 2015, 9:00pm

A quick thought on organelle editing: Whatever you decide to use, don’t make it modal. The player should be able to keep looking at the cell, or click on a different organelle, or click in the new-organelle panel to select something else, without having to break the flow to click “accept” or mash an x or something. In that same line of not impeding the player’s flow, I’d say edits to organelles shouldn’t have to be confirmed – instead we can have ghost settings (for example, if the player moves sliders around) and a revert button, and the MP can update real-time as the player fiddles with sliders to reflect how big or small the current change is.

Nanu · December 11, 2015, 1:15am

About the compound bars, I like them, I think they’re a much more elegant solution than just numbers. They’re not only more visually appealing, but as @meandmy10 noted, bars would allow you to just glance and see a relative idea of how much of the compound you have. You could slap the number next to the bar, under the bar, or have a a detailed report on that compound when you hover the mouse over the bar.

meandmy10 · December 11, 2015, 2:32am

Two things: unfortunately it seems most people don’t share your view so uhh sorry? and i have said this before but for anyone who did not see it I’ve made the designs intentionally bigger then they need to be in the game so people can see them easier in the images, and besides the UI should scale with the resolution

I feel the best way to allocate the compound storage is to have the game work out how fast each of them get used up if working at full blast (and maybe give things that are usually used slowly a slight advantage) and work out percentages for each of them and just divide up the storage according to each of them

Agreed, that would ruin the UX if we made it modal

meandmy10 · December 14, 2015, 2:36pm

Alright i feel to keep the conversation in one area will help to collect our thoughts and keep it more productive so for the moment we will focus on the layout and some of the details (other then the design) of the game UI, erm i feel we need a proper name for it, where you control your cell, that part? oh you’ll work it out.

this should give you a general idea of where the UI is heading with an example of what the hover messages for the Compounds might look like, the cell spit button would slide out when the cell can split.

design with numbers over the bars

and for the sake of argument with just numbers, was not sure about the HP and ATP thought it was not as fitting

The pause menu, it would look the same as in the editor so the player would not need to relearn anything, the one thing I’m not sure about is having the pause menu button as the resume button too, its one of those things its hard to tell if its good or not before actual play testing

also when the player presses the plus sign it will being up a compound menu (unless you guys don’t want it) but i need thoughts about 2 things regarding it:

Should it pause the game? or would that disrupt the game play too much? i feel having other cells try to eat you is too much of a distraction from looking at the menu so pausing it is probably a better option but again i’d like input from everyone, not just me.
and I’ve managed to forget my second point… well i might as well ask what you guys think about the icons for the compunds, we could use the kind of symbols I’ve used with the letters or we could used the already talked about symbols (eg. ATP being represented by lightning ect) i feel that those symbols don’t really meet our target audience (slightly childish? maybe just me), but again discuss.

oh and also i won’t be doing any more of these images in a while I’ve got a bunch of holiday homework I’m meant to finish and I’ve been using this and a few other things as a way to procrastinate from it so I’ve decided I’m going to try and blast though as much of it as i can this week and put everything else on the back burner (well try to) I’ll drop in to talk about it some more but i won’t be designing anything.for the time being.

TheCreator · December 14, 2015, 4:17pm

This looks really great. I think having the numbers overlay would be better. I’m still not quite sure about the reproduction bar. I like what you did with the “Progress to cell division” pop-up, but I just don’t get the point of the black to white gradient. How exactly do I know if I’m halfway there? 90% there?

When you press the escape key, the game should pause and open the pause menu, so you’re right. I also like how simple you made it. A minor thing is that we probably don’t need a load game button on the pause menu (if you want to load a new game you should go to the menu and use the button there). However, we do want a population statistics button that shows the CPA system (although I would like someone to confirm this).

I definitely like your three letter symbols better than icons, so I say we keep them.

Look forward to the next update!

NickTheNick · December 14, 2015, 5:18pm

I agree largely with TheCreator.Should the statistics button be part of the gameplay HUD, or the pause menu?

Nanu · December 14, 2015, 9:57pm

I actually like the first version with just bars over the numbers overlay, it allows us to have pop ups to show the exact number and other statistics. This lets us have a wealth of information and statistics available at a moments notice. This of course could still be added even with the numbers overlay, but I think having just bars looks cleaner.

meandmy10 · December 15, 2015, 4:29am

Ahh well i guess i should of said that the gradient is just a default gradient i did not know what colour to use for it so i just put that there, in the game it should act like any other bar.

it depends how important the statistics are generally they are just a fun thing to look at every now and again, i would hate to waste space on the HUD for something people rarely look at.

well we could make it a toggle in the options menu, we just need to make sure the default is what works for most people

TheCreator · December 15, 2015, 5:14am

@nanu, I think we would still have the pop-up boxes even with numbers overlay, but I, personally, am fine with both solutions.

@meandmy10, that explains a lot. I am no longer against the reproduction bar. I believe that the CPA system is a really big part of the game since it shows you what species prey on you and suggests what mutations to make. However, I don’t know how often the player will look at it outside the editor.

One thing I didn’t mention in the previous post was what compounds do we decide to show?

meandmy10 · December 16, 2015, 6:40am

I’m not 100% sure i know what the CPA system is, from what I’ve gathered it controls the world around your species and this is the first time I’ve heard of any UI getting made for it, i feel this is something we should worry about when we are talking about the editor UI though, but we can and probability should put this somewhere in the pause menu for when people want to look at it.
besides the UI for such a thing sounds like a pain to make because it’s going to always be changing throughout the game and making it in a way that’s not too complex is going to be tough, so for the moment we worry about what we are focusing on and for the moment that’s the main game UI.

Great question! there are a few things we can do:

Just have the user choose what they want to see- problem with this is a large learning curve
Just show what is relevant to the organism
A mixture of the two, just show what is relevant to the organism but still let the user choose what they want to see.
thing is we want to decide things like should we show waste products that the cell does not use?
thinking about it that kind of things probably should not be discussed here as they are more related to gameplay then GUI…

TheCreator · December 17, 2015, 5:40pm

@meandmy10, think of the CPA system as the statistics (who your prey is, who eats you, what your death rate it), but you’re right. Thr player probably only need to see it in the editor when he is thinking about what mutations to make.

As for deciding which compounds to show I think #3 is the most flexible choice. We can order the compounds based on their priority to the cell (we already have a number for this) and display the top 4 most important compounds the cell uses. Then, when the player presses the plus icon, we give him the option to drag and drop additionaly compounds to the bottom of the UI. I see two ways how we could do this:

When the player drops a compound from the + menu, the compound that is to the very right (glucose in your image), gets put into the + menu, making sure that we always have eactly 4 compounds showing
When the player drops a compound, he now has 5 compounds, with the fifth one showing up on the bottom of the UI. He can then choose one of the 5 and drag it over to the + menu, or leave it like that if he prefers to view 4 compounds at the same time.

Another idea that I just came up with: Instead of having the + button open up the small menu thing, we could have it “extend” the row of compounds and make multiple rows showing all of the available compounds (for those hard-core players that want to see everything). The plus button then becomes a minus button, and when you press it you once again see only the top 4 compounds. Just like in the previous versions, you can rearange compounds by clicking and dragging them where you want to place them.

Anyway, I’m starting to really like this UI. Cannot wait to see how it turns out!