Microbe GUI

I have to agree with @TheCreator here, the parts box should be on the left. As he said, people read from left to right, you want the most important information, or at least the information that will be used most, to be on the left side of the screen. Especially since the parts have to be selected first then placed, it would feel weird pulling it from right to left as opposed to left to right. I think I like @Oliveriver 's set up better though, aside from the awkward placement of the parts panel.

I’ve used my environment (with added main menu) to start creating an imageset file:

Thanks to proper planning this time, all the dimensions are nice round multiples of 10 pixels and everything is spaced out, so there shouldn’t be any weird image clipping and everything should fit together properly! Even the icons are positioned in imaginary boxes 40 by 40 pixels to make moving them about easier. My initial layouts above were all blocky because I knew I’d arrive at this point needing some structure.

I’ve written an imageset text file. The only difficult element so far is the lower bar. For it to match the screen properly it’ll need to stretch, so if the entire thing were recorded as a single image the angles of the corners would break and not match with the corners they have to fit into. Instead I’ve chopped it into three, the corners and the rectangular centre, with the centre stretching as needed. I hope that works properly in-game.

I’d like to be able to test this in-game soon, which will also require layout files. However, if another Lua script links to an element which isn’t there (which will be the case since I’m removing all the old stuff) CEGUI throws a fit, so I need some way to disable pretty much every GUI-related function. @Moopli do you know any way of doing this?

4 Likes

I unfortunately don’t think that is possible. The closest you can get is to set the sizes for all the pieces in the image set file to 1by1 and then move them all to the zero position. This way all the elements will be there so the game won’t crash but at the same time you can use a new image and the old GUI won’t obscure the window. Then you will slowly restore the buttons by setting their dimensions.

Great work Oliver!

We’ve now had 2 people for right and 2 for left for the organelle panel (unless I missed someone), so I’ll throw my lot in to say although I don’t like the overlap I prefer to stay with the convention and keep it on the left, it just feels unnatural for me to see it on the right. However, if we can’t come to a conclusion on it I think we should just leave it up to the person who implements it into the game, and then through playtesting we can see whether its better to move it or not.

Since the organelle panel is just a GUI element, I vote to let the player toggle between “left handed panel” and “right handed panel” in the options menu.

2 Likes

Good news everyone! I have a (barely) working GUI in-game!

Some parts are missing, such as the checkboxes next to the compound bars (which I didn’t have time to do) and the compound bars along the lower bar (because I have no idea how to make them). None of the buttons do anything yet. All the old elements are still there, they’re either invisible or moved off-screen. Anytime you see any glitchy rectangles, those are also old elements which I haven’t yet removed. The black box in the centre is the old quit button, which I put there for convenience.

6 Likes

I think I’ve hit an obstacle with the GUI in that I have no clue how to get some parts of the design to work, especially the lower compound bar and the editor button filling up. If anyone’s willing to help that’d be much appreciated, but if not we could go for a slightly simplified design until then.

The GUI as shown in the video above needs only one addition - a scrolling compounds list - to be adequately functional in-game, even if it’s not quite as intuitive as the hopeful final design. The editor might be a bit trickier but still not impossible.

1 Like

Could you upload the image sets and layout files (and everything else that you changed for the GUI to work)? I’ll give it a goal next week.

1 Like

Here are all the files I believe I’ve changed:

I might have a go at the editor and tutorial GUI tonight if I get time (I probably won’t at this rate).

1 Like

Good news: I now have free time again. And I’ll be using a sizable chunk of it to work on a simplified version of the above GUI.

3 Likes

A couple of days of work further on from what I’d completed last time, I now have this:

Pretty much everything is in the right place now, but not much of it works yet (which is why I had to quit the game and come back in to remove the menu overlay). That’s what I’m going to have to scratch my head over for the next few days. You’ll notice I changed the menu button - that was on @TheCreator’s request, and it actually makes the editor GUI a lot easier to set up.

I’ve already said this, but it feels a bazillion times nicer than it did before.

5 Likes

Wow. Just wow. I’m at a loss of worda at how good that is. I know this forum is for constructive feedback, but I honestly can’t see what would make that better. Although you probably know cegui better than be right now, ask me if you have any questions, and we’ll ponder it together.

1 Like

I think I’ve got most of the CEGUI stuff done now. It’s the Lua integration that’s the issue now - scrollbars, compound bars, animations, wiring up buttons to work correctly and so on.

It has a nice ksp-esque look, i like it :slight_smile:

Woo, I got the overlay menu to work properly! It pauses and resumes the game and everything. And I think everyone on the planet will agree the help panel text is a million times nicer than the old help panel. Using what I learnt today it’ll be a doddle to do the same for the compound panel and editor info panel (the one next to the editor button), and the symmetry button in the editor. That mostly leaves the organelle buttons and various scollbars/compound bars. I have absolutely no idea how I’m going to manage those, but I’ll find some way.

4 Likes

GUI Test IV: All the Buttons Work Now (I Think)

Apart from accidentally breaking the help panel from the last video (not sure how that happened, I’ll look into it when I get a chance) all the buttons which at this point are supposed to work now work. That means I have two parts left to do before the GUI is functional: the scollbars and the compound bars. Unfortunately, these are the two most difficult. Also unfortunately, I’ll be AFK until Boxing Day, so this is probably the last you’ll hear from me.

2 Likes

@Oliveriver the gui is looking awesome and really professional. Great work.

1 Like

I’d hoped to do more to the GUI today but a couple of bugs with function references breaking due to my own stupidity meant it took a lot longer to get to this stage. The good thing is, all the buttons and tooltips definitely work. There are only a few things left to do:

  • Define a dynamic progress bar to use for all the health and compound bars, which can take particular images as input each time for the compound icon and compound bar colour
  • Create dynamic scrollbars for the compound panel and editor structure panel (I’ve put all the relevant images in for them, I just can’t code them)
  • Make the game pause when a game is loaded, which should be easy but I can’t find the setting anywhere
  • The escape button now opens and closes the overlay menus, but I can’t get it to close them as well
  • Copy the environment GUI over to the tutorial without breaking anything, which is harder than it sounds

I’ve come to the conclusion that all of the above are beyond me without help from proper programmers. With that in mind I might go ahead and fork a GitHub branch to add all the relevant changes so the others can help with those specifics. Is there a way to include new assets without changing the SVN for everybody (since right now that would break everyone else’s branches)?

2 Likes

You could create a lua table (see organelle_table.lua and configs.lua) that stores the image name, the color and some unique id. You can then have a function to change the size of the bar (similar to the current health bar) that takes the id and the new value. The ids could be the compounds ids for compounds and 0 for health bar.

Engine:pauseGame()

Close what?

I can do this part once everything else is done.

Only dropbox and give everyone a link.

I tried that but it wouldn’t work for some reason. It worked for every other function I put it in but not load.

The in-game menu, which before was an expandable menu in the bottom corner but now appears over the top of the screen and pauses the game behind it.