Main Menu - Options Menu

Okay got the build up on my machine, going to try and redo all this on the new engine.

I have no idea what I’m doing, as well as forget everything about anything to do with coding, so any pointers in the right direction will help me tons!

1 Like

All the GUI scripts are in thrive/scripts/gui. You need to run cmake .. in the thrive/build folder after changing them to make the game pick up the changes. You can preview the GUI in chrome if you run a web server in the main thrive folder. For example with http-server -c-1 (this is another npm module you can install) and then you can open http://localhost:8080/scripts/gui/thrive_gui.html in chrome to preview the GUI (and use the devtools, and just refresh after making changes for much faster dev cycle).

The formatting script (RunCodeFormatting.rb) also cleans up the HTML, CSS and JavaScript files. You need to have the npm modules installed mentioned in the setup instructions.


Hows something like this look?


Nice work finding the animations.
I think the options button should right away show one of the options categories. We might need a few concept art pieces as to how to layout all the different options to minimize having to click through a bunch of screens.

1 Like

So first off, its a little lagy due to having a bunch of stuff running on my computer, and open broadcast is just one more resource. Without the video recorder its a lot smoother.

Anyways, just some placeholders for now, getting things to close on each other and come in on time and in order (IE: Smoothness) was a big of work, but i think the concept works. We can adjust it as we need or as better ideas come up.

edit: If you click through the options really fast, it has a chance of not closing the previous one before opening the other, resulting in both options windows open. (IE: Audio and Graphics both open)


What options should be in each section?

Here are my suggestions:


  • Sound device selection (a drop down) with a checkbox for always using the default
  • Global sound volume, slider 0-100
  • Music volume, slider
  • Sound effect volume, slider
  • Menu music volume, slider
  • Video sound volume, slider


  • Windowed mode: windowed, full screen, full screen desktop
  • Resolution: very freeform, but maybe some presets should be there (dragging the window size is a bit broken currently, but that is a better solution that having an absolute ton of resolutions). Maybe for fullscreen resolutions it should list natively supported resolutions only.
  • Internal render scale. Slider 50% to 100%
  • Rendering API selection (depending on platform and graphics hardware): Vulkan, Directx11, OpenGL
  • Toggling effects on and off, for example: depth of field, bloom, lens distortion
  • FPS limit: (defaults to 120), range should be probably like 30-240
  • VSync on or off
  • Antialiasing amount: off, 2, 4 etc.
  • Monitor selection

I’m probably forgetting something, but those are a start at least

Controls rebinding (and multiple bindings for each button)

This is the current default:

EngulfMode = [["G"]];
MoveBackwards = [["S"]];
MoveForward = [["W"]];
MoveLeft = [["A"]];
MoveRight = [["D"]];
ReproduceCheat = [["P"]];
RotateLeft = [["D"]];
RotateRight = [["A"]];
Screenshot = [["PrintScreen"]];
ShootToxin = [["E"]];
SpawnGlucoseCheat = [["O"]];
SpawnPhosphateCheat = [["I"]];
ZoomIn = [["+"], ["Keypad +"]];
ZoomOut = [["-"], ["Keypad -"]];

That is in ThriveKeybindings.conf

Translations aren’t currently very high priority so, maybe drop the languages option completely?

I got some work to do.
I think leaving the languages option in, but disabled (greyed out) would be fine for now.

1 Like

Okay here I got the audio menu and some prototype sliders.
a few questions:
-Should the Minimum be 1 or 0.
-What color should the slider “Thumb” be. Right now I have it default to blue. I can also change the slider bar color as well (its grey)
-Do I need to adjust the size of the slider, or the slider thumb?
-Do I need to move the slider?

Also I’m having issues with the slider thumb not moving very fast, and if you move your mouse faster than it goes (which is super slow) it messes up and glitches out a bit.

I went ahead and changed the minimum values to 0, as well as added toggleable buttons that transition between 100 - > 50 -> 0 -> 100.
The hard part was getting the slider thumbs to move as well, but I got it figured out.

I still have the issue of the sliders being too slow.
And now the sliders and buttons overlap so when you move the slider it clicks the button, resetting it back to 100/50/0. I will need to either move the sliders, give more space between the buttons, or something else.

I’m thinking of just moving the sliders to the right side of the buttons.

1 Like

0 should be the minimum value to allow muting specific things. I think it might be worth it to pick out a slider library for javascript. If I wasn’t working on other things I would add jquery UI to thrive. Right now there’s only jquery available for the thrive GUI.

I’m not sure about the library and all that, I’m pretty new when it comes to all this programming stuff. Anytime I want to do something I have to go google it and try it out lol.

Anyways I got the sliders fixed, I had them inside the button containers which made them act as buttons as well. So I put them outside and at the bottom of the menu, used some CSS and a relative position to move them into the right spot. I tried a few different spots and I think below the buttons looks nice. They still move slow though.

1 Like

Also was looking over it on my break. Do you think I should remove the exit buttons on the sub menus? They are kinda unnecessary.

How does this look?

I think the layout would work much better if it was drastically changed.
I’ll post some examples of options menus.
Hopefully these embed fine:

1 Like

Those look great. I’ve been using the menu system that has already been uses for the main menu. Do we have a different layout for the options?
If so how do we want to do it?
Do we need to create new buttons or assests?
I’ll continue to work on what I have been, and when we get a solid idea down, implement it in.

I mean, even the layout could be changed. The buttons should be put into different divs and positioned to not be right next to each other and instead take advantage of all the empty space.

1 Like

Is this feature still being actively developed? The thread is a bit old, and I am somewhat interested in making some progress on the options menu, however if lavathor is still working on it I’ll move to another issue so we don’t create duplicate work.

I haven’t seen any progress on the options menu in the past few months. So working on it is probably up for grabs. But I don’t think the WIP code is anywhere, so you’ll have to start from scratch.

I stopped working on it as I’m too stupid to figure out github and had trouble getting help to figure it out. I still have the wip code.