Revamping of Game Menus

[MotoLegacy]

With the in-progress effort to move the FTE build menus to MenuQC via the quakec/menuqc branch in order to fix issues such as the custom map button selection (https://github.com/nzp-team/nzportable/issues/5) poor setting implementation, and improper aspect scaling, the opportunity arises to give each individual menu and submenu a coat of visual paint to become more intuitive for the user to navigate as well as generally improve upon its design.

The goal of this issue is to serve as community input and discussion for this general menu design and per-menu feedback in order to ensure a well-designed end product.

With that being said, here is my current design idea for the game's main menu:

The background image is temporary, I am also looking for feedback on what exactly to populate the background with instead, whether that be a still image like before or a rendered demo like the NZ:P Unofficial Patch had done in the past.

This issue will be updated to reflect community approved designs and the current submenu needing feedback and approval, so refer back to this primary comment often and be sure to be explicit about which menu you're providing feedback for.

Thanks, Moto

[DerpedCrusader]

rendered backgrounds are cool, but loading times can be PSP kinda brutal.

[MotoLegacy]

rendered backgrounds are cool, but loading times can be PSP kinda brutal.

This was offset in the Unofficial Patch by preloading anything used into the heap during initialization, as well as just generally not having to go through all of the spawn functions, so general full map load time doesn't reflect the theoretical load time for the still demo playback.

[MotoLegacy]

Blubs, Naievil, and I have come up with a concept to where the menu background would be a randomly selected map, the camera being either at the player's normal spawn position, or one/several camera entities placed into the map. These cameras would also prove useful for adding support for panning through the level during the Game Over screen. Looking for feedback.

[DerpedCrusader]

kinda like the Half life 2/Source engine game main menus, I'd love that personally.

and the two birds with 1 stone is great too with the game over screen camera

[MotoLegacy]

kinda like the Half life 2/Source engine game main menus, I'd love that personally.

and the two birds with 1 stone is great too with the game over screen camera

Sort of. But with more motion, since the mapper will likely have lots of fly-throughs like CoD does typically. Still looking for input from other users.

[Doc-Cynthetic]

Blubs, Naievil, and I have come up with a concept to where the menu background would be a randomly selected map, the camera being either at the player's normal spawn position, or one/several camera entities placed into the map. These cameras would also prove useful for adding support for panning through the level during the Game Over screen. Looking for feedback.

I think this is overall the best solution, that way we get different images based on the installed maps. Do you think it would be appropriate to add a method to load custom background images/.gifs, this way players could choose to set a certain background, or on lower end devices the player could simply choose a static image over the rendered background

[MotoLegacy]

[...] Do you think it would be appropriate to add a method to load custom background images/.gifs [...]

Yes I think this would be a good option to have, at the very least as a cvar in the configuration file. I will plan for this system in the design but it might be hard to account for it as an actual setting in the menu. Let's discuss that when we get to the settings page.

[Doc-Cynthetic]

I will plan for this system in the design but it might be hard to account for it as an actual setting in the menu.

I think for intents and purposes it doesn't have to be in the settings on its own, but nonetheless useful for customization. But i like the button layout you chose for the example image, However i disagree with the usage of all-caps for the buttons, i think perhaps the buttons should have some sort of background "image" rather than being slightly greyed when its selected (ex. some blood spatter or zombie eyes) Just to give extra color and personality to the menu selection. Perhaps the process of integrating the "video/images" could be a random selection from a folder rather than forcing the game to render on the main menu. (A map maker could simply make a recording of their camera shots and simply have the video in the game files, not sure if you can get videos playing in the back of the main menu, but i figure this might be easier than trying to render those shots on the fly)

[MotoLegacy]

However i disagree with the usage of all-caps for the buttons

The idea behind the options being capitalized was to differentiate what is actually a selectable option from other bits of floating text like descriptions. I felt as though the old design was problematic in that everything was displayed in the same manner and therefore would make it less intuitive to a new user to know what is selectable.

CoD meets this standard too, buttons are capitalized. Do you still think it needs changed? /gen

i think perhaps the buttons should have some sort of background "image" rather than being slightly greyed when its selected (ex. some blood spatter or zombie eyes) Just to give extra color and personality to the menu selection.

I think this is a great idea but unfortunately we have to take the PSPs screen resolution into account. Any image for the background would have to be approx. 8-10px in height which isn't enough real-estate to convey any sort of detail in a visually appealing way. I am open to suggestions on replacing the "blade" with something else though, like adding a border or something.

Perhaps the process of integrating the "video/images" could be a random selection from a folder rather than forcing the game to render on the main menu.

I don't quite understand what you're suggesting — rendering a world isn't forceful. It would likely be default on first boot but we discussed possibilities for making it a toggle-able cvar.

I also feel the need to mention videos are 100% out of the question. It is very intensive to render and stream video, as well as heavy on disk size. The only options would be world rendering (which scrolling up I discuss as being viable with @DerpedCrusader) or a set of static images.

[MotoLegacy]

After the discussion that occurred yesterday I decided to create a PSP-focused mockup with a few general changes, as well as provide a photo of the mockup being displayed on the PSP screen itself to help capture our resolution limitation.

General changes:

• I've added a dark-red border on the three visible sides of the highlight band to try and give it more visual character.
• Text is now right-aligned to better enhance consistency (it is better to have deadspace on the left side of the band as opposed to the right as the right edge is the most visible).
• The mockup displays placeholder/intended maximum character count text as opposed to the menu text, to better focus on general design.
  • 24 characters for menu items
  • 48 characters for item descriptions

Let me know what everyone thinks.

[DerpedCrusader]

The right aligned sounds nice, but i would love to see it with non-placeholder text

The border around selection looks nice

Is there any way to have it gradient into transparency on the left side, kinda like the MW2/3 menu does?

[MotoLegacy]

i would love to see it with non-placeholder text

This request undermines the reason the placeholder text is there in the first place (to focus on general design critique since that is what the conversation had become), though I submitted to this request anyway.

Because I had done this, I created 2 variants for the request. One is with the same ("static") width of elements, and another where the width is dependent ("dynamic") on the maximum size of the currently displayed elements.

There is a discussion to be had about which to side with (it becomes frustrating because while the dynamic option is more efficient in terms of real-estate it brings more design inconsistencies, which the point was to avoid. Would look rather jarring.) so I look forward to hearing suggestions.

I added the texts "NACHT DER UNTOTEN" (17 characters) and "SUPER MARIO 64 ZOMBIES" (22 characters) to the static mock-up in case an argument is going to try to be made about just not expecting/accounting for 20+ characters and shrinking the static width.

Is there any way to have it gradient into transparency on the left side, kinda like the MW2/3 menu does?

In a very inefficient way, yes, a feathering effect can be done by just filling X relative pixels with a slightly less opaque rectangle although this is very taxing and also just a bad means of implementation. An image could be used and stretched, but that feels like a total waste of memory and cannot be controlled as smoothly for differing aspect ratios.

I feel as though not much is gained/lost anyway, though I have made an additional mock-up for it.

[Doc-Cynthetic]

I REALLY appreciate the implications of the first image, Moto. I think the layout and design in that image is absolutely spectacular, if it could be integrated to show 2-3 of the most recently played maps or w/e where you put ndu and “Super Mario 64 Zombies” (xD) would be a really cool and functional addition to the main screen. Considering the main focus for the PSP, I think the increase of menu-to-gameplay fluidity plays into exactly what the PSP represents; pick up the game, jump in your favorite map, play for 15 minutes, back to business.

I think the gradient could go either way, it looks really really clean, but if it takes too much energy to produce then it may not be worth the effort (depending on the amount of processing it actually takes)

personally I think it’s looking really really nice so far, the border color change is very nice to look at :)

[MotoLegacy]

Thanks for the input, @Doc-Cynthetic. I do not think the feathered edges are worth the effort in GPU calls or implementation but I'm glad they look nice in concept at least.

That "Jump Back In" note was absolutely fantastic, that is definitely something I will include in the actual menu. Something to get right into the lobby setting with recently loaded maps.

I need an opinion on the static width though, do you think all of the empty space on the left side of entries is off-putting? It would 100% need to be static if the Jump-In feature is added.

[Doc-Cynthetic]

I think it looks perfect as-is. As much as my brain wants to ask for left-justified text, it will look cleaner justified right and easier read on the PSP. I think the static width works very pleasantly with the UI.

Would it be difficult to mock-up a “left-justified” version where the border stops at the end of the characters on the right side? This will reduce the look of the menu “box” but I think the different sized borders would free up some extra background space for its eventual application.

with the current layout, it would be easy (and look pretty great) to use a custom background where the menu selection boxes are encased/incorporated in the background image. So I see advantages and drawbacks for both, give me some time to make a background image like this and I can show you a better example.

[MotoLegacy]

My concern with the idea of having the width of the band cut at the end of the text with it being left-align is the inconsistency of it — not only is it visually unappealing but it also can be jarring on devices with mice input for determining where the actual selection box is.

[Paindeluxe]

When would this be finished and given that there is a help wanted tag how could we help?