STOIK's Menu Design

[STOIK]

It's been about 15-16 years since I have done any sort of modding on this game/engine but I've been hopping back onto the game more and more over the last year or 2 and last night my masochism got the better of me. I'm a visual and UX designer these days and I guess I decided now would be a good time to give myself a headache while I mess around with seeing how far I could push the idea of making the UI in this game feel more modern. So I have a few questions for anyone here that has knowledge on the q3 menu tech.

It seems like the engine wants you to design for the minimum viable resolution and work out from there? At least that was the case with Doom and it seems to be 640x480? At least when it comes to utilizing "fonts". However if I use images instead it seems to position them relative to the resolution so I can get around that issue. The problem using images creates seems to be despite OpenJK having widescreen support any images used in menus will still be stretched so my solution there has just been to preemptively squish the images beforehand so when the menu is rendered they appear correct, does this feel accurate? Is there a better way to do this? I'm assuming not but you never know lol.

This is mostly just me giving myself a fun exercise to see what I can or can't do but who knows, maybe I'd end up finishing something and releasing it to share. Mostly just wanting to see if there is anything I am overlooking or if I should continue approaching this the way I am currently.

[mrwonko]

The menus use a virtual 640x480 canvas that gets stretched to whatever resolution the user is actually using. So to always look correct, you need one version of the menu for each aspect ratio. But I think you can do the image squishing in the .menu file, you don't need to squish the texture itself?

A menu editor is high on my priority list, but I don't know when I'll get around to it.

[STOIK]

8 hours ago, mrwonko said:

The menus use a virtual 640x480 canvas that gets stretched to whatever resolution the user is actually using. So to always look correct, you need one version of the menu for each aspect ratio. But I think you can do the image squishing in the .menu file, you don't need to squish the texture itself?

A menu editor is high on my priority list, but I don't know when I'll get around to it.

Appreciate the clarity, and yes you're right about using the .menu to handle the squishing vs doing it in the texture, I ended up realizing that last night. I wasn't sure where the ceiling exists for texture resolution so arbitrarily chose 4096x4096 for the background and 4096x2048 for the games logo lockup which hasn't given me any issues. It seems like there me be some rudimentary ways of providing motion to some texture elements as well based on what I see in the .menu of the original menu for the scrolling Aurebesh text? An editor would be great but it does feel like once you get a grip on the .menu files things start to come together fairly quickly.

Anyway this is where I ended up after messing around. I'll keep toying with this as I have time, was fun to figure out.

 

[Circa]

I don't have much advise on menu editing, as any time I've done it has been a huge pain, but I always wanted someone to help with revamping it for JAEnhanced. I did some minor additions to the menu before and it made me want to pull my hair out, I can't imagine doing something like this. Nice job so far!

Some other menu mods you may be interested in poking around with to see what and how they did things:
https://jkhub.org/files/file/1264-skyline-menu/

https://jkhub.org/files/file/1466-skyline-menus-gfx-package/

https://jkhub.org/files/file/3597-jedi-outcast-expanded-menu/

 

[STOIK]

25 minutes ago, Circa said:

I don't have much advise on menu editing, as any time I've done it has been a huge pain, but I always wanted someone to help with revamping it for JAEnhanced. I did some minor additions to the menu before and it made me want to pull my hair out, I can't imagine doing something like this. Nice job so far!

Some other menu mods you may be interested in poking around with to see what and how they did things:
https://jkhub.org/files/file/1264-skyline-menu/

https://jkhub.org/files/file/1466-skyline-menus-gfx-package/

https://jkhub.org/files/file/3597-jedi-outcast-expanded-menu/

 

Thank you! I'll definitely poke around in these. I'd like to keep pushing it and see how far the entire UI experience can be pushed to just feel better and not like something out of a time capsule despite finding it endearing at this point. It was always 1 of the largest detractors for me when it came to large scale mods for the game; the UI never changed outside of some color shifting for the most part so things never felt quite their own to me.

[mrwonko]

For animations, you can also do a lot with shaders! By overlaying up to eight layers, you can mask out areas, have moving/pulsing images, and do all kinds of neat things. As far as I know, shaders should work the same in menus as they do in maps.

I think 4096x4096 is the largest texture size I've heard of people using successfully, and there shouldn't be much need to go further.

Good luck!

[STOIK]

On 9/18/2023 at 2:15 PM, mrwonko said:

For animations, you can also do a lot with shaders! By overlaying up to eight layers, you can mask out areas, have moving/pulsing images, and do all kinds of neat things. As far as I know, shaders should work the same in menus as they do in maps.

I think 4096x4096 is the largest texture size I've heard of people using successfully, and there shouldn't be much need to go further.

Good luck!

That's good to know, hopefully I can get to the point of exploring that before my mind collapses in on itself from trying to brainstorm solutions for things. The amount of jank I feel like I am employing just to for instance have the scrollbar appear as anything other than a rectangle is kind of funny. Alpha channels putting in some work here.

[Bubbles]

10 hours ago, STOIK said:

That's good to know, hopefully I can get to the point of exploring that before my mind collapses in on itself from trying to brainstorm solutions for things. The amount of jank I feel like I am employing just to for instance have the scrollbar appear as anything other than a rectangle is kind of funny. Alpha channels putting in some work here.

 

Looking great, just need to do something about those crappy looking icons. 

[STOIK]

6 hours ago, Bubbles said:

Looking great, just need to do something about those crappy looking icons. 

Oh trust, I'm trying lol.

The icons are a bit interesting because the menuDef that contains the itemDef for the server feed columns element is kind of broken. Adjusting the position of the parent menuDef moves the child column element as it should.... except for those icons. The icons themselves are part of the 2nd column which is actually the map name column. So I had to do some rearranging of the column order in order to get everything to kind of still be positioned near eachother if I wanted to move the whole menuDef for the server list. Otherwise the icons would either be across the screen, overlapping the server names or some variation of another awful situation.

As for the icon visuals I'm just making more very liberal use of an alpha channel of the background visual that sits over top of everything so I can make most things more visually appealing... the icons, the scroll bar, the pill shape of the highlight for the actively selected server, etc.

[Circa]

It's so beautiful  I can't wait to try it out!

I'm going to move this to the WIP section and rename it if you are cool with that @STOIK

[STOIK]

3 hours ago, Circa said:

It's so beautiful  I can't wait to try it out!

I'm going to move this to the WIP section and rename it if you are cool with that @STOIK

Sounds good! Works for me

Now I'm curious if anyone here has any insight on something:
Am I able to add new .menu files or are they hardcoded somewhere and require some deeper modification & compiling of the source?

 

EDIT: ignore, I found the jampmenus text file 

[Lancelot]

It's always great to see new and modern takes on the Jedi Academy menu. This one looks indeed special, and I'm really looking forwart to see more updates.

[Circa]

16 minutes ago, STOIK said:

Sounds good! Works for me

Now I'm curious if anyone here has any insight on something:
Am I able to add new .menu files or are they hardcoded somewhere and require some deeper modification & compiling of the source?

You can add .menu files and call them up just like the default ones, yes. Look at how the buttons reference them as the target,

Taking an example of a button in the character menu that lets you continue on to the saber menu:

{ 
	play			"sound/interface/button1.wav" 
	close			all 
	uiScript 		"updatecharcvars"
	setcvar			saber_menu  0
	setcvar			ui_saber_type  single
	open			saberMenu 
}

Your button would just need to have open point to your new custom menu name, whatever the menuname.menu is. (no need for the setcvars in that example though)

[Kitsu-NeshKaa]

Wow, this looks insanely beautiful, simple and classy. Reminds me of the BF 2017 menu.
So much space now. It's so neat. I wish you strength and inspiration!
Let .menu files obey your design!

[AngelModder]

Damn... This is sexy... I cant wait for this to go in my rend2 profile... A nice modern menu. Speaking of when we gonna get a high quality kyle/desann etc... TO WORK MY MINIONS.

 

[STOIK]

Figured I would share another shot of what I've been messing with. Unfortunately I have hit some walls that I may not be able to overcome and have to go back to the drawing board a bit and/or take a dive into learning how to replace the various fonts. I was attempting to use a different .menu file for each of the menu selection states (image attached for reference) and just scaling/placing them accordingly. I was doing this so I wouldn't be restricted to using 1 of the few in-engine fonts and allow me to do more with the appearance and design vs just throwing text on the screen but it doesn't seem like .menu files can layer each other with those below it still being accessible.

So atm its feeling like things might have to simplify quite a lot but I'm going to give a few other ideas a try.

[Botdra]

That looks fantastic. It's wild what simply changing the menus and font can do to breathe new life into things.

[MaceMadunusus]

On 9/25/2023 at 6:38 PM, STOIK said:

I was doing this so I wouldn't be restricted to using 1 of the few in-engine fonts and allow me to do more with the appearance and design vs just throwing text on the screen but it doesn't seem like .menu files can layer each other with those below it still being accessible.

Yeah this is a limitation of the game, it is possible to work around but requires changes to the code. We were able to make the change for Movie Battles and it made UI creation way easier. However, if you're just wanting to limit the mod to UI-only that does limit you quite a bit.

I forget what exactly what the process was for fixing it as it was 8 years ago, but it is possible to fix.

Also just a personal preference thing so don't take it too harshly, but this just feels like every other modern game, like there is no more soul. If that is what you like then fine, but just feels sterile. The way it is currently setup won't work very well on first launch, that text will get all blurred out and impossible to read. Will only work if people can change to an HD resolution before launching kinda thing.

[STOIK]

21 hours ago, MaceMadunusus said:

Yeah this is a limitation of the game, it is possible to work around but requires changes to the code. We were able to make the change for Movie Battles and it made UI creation way easier. However, if you're just wanting to limit the mod to UI-only that does limit you quite a bit.

I forget what exactly what the process was for fixing it as it was 8 years ago, but it is possible to fix.

Also just a personal preference thing so don't take it too harshly, but this just feels like every other modern game, like there is no more soul. If that is what you like then fine, but just feels sterile. The way it is currently setup won't work very well on first launch, that text will get all blurred out and impossible to read. Will only work if people can change to an HD resolution before launching kinda thing.

Yeah, it was mostly just a fun challenge for myself to see how far I could push the UI/engine within its (mostly) original guard rails, I'm not really looking to do any sort of modifications to the engine myself, unless it was something built into a popular fork of OpenJK or something. If the means existed I would use it otherwise it's just more fun to work within the limitations. I didn't even think to digg through MB and look at what you all did just within the context of the menu files, I'll have to take a look. So far in my testing it's been great in every 16:9 resolution from 1080 up to 4k, I'm not really concerned with any legacy 4:3 situations and just running with the assumption that if you download a mod like this you're not using vanilla JA given the remaining player base is a bunch of legacy 30+ year olds.

For sure, I understand, but if not to change then there's really no reason at all. That being said the OG UI was made in a time before any sort of established user experience practices and wrought with accessibility nightmares so while it endearing for people that have grown up with it, it is a genuine nightmare from many perspectives.

[MaceMadunusus]

16 hours ago, STOIK said:

 I'm not really looking to do any sort of modifications to the engine myself, unless it was something built into a popular fork of OpenJK or something. 

We did it through MBs game code, which uses the original SDK release rather than the source release. So unknown if anyone else did anything similar. It isn't in our OpenJK fork.
 

16 hours ago, STOIK said:

 I didn't even think to digg through MB and look at what you all did just within the context of the menu files, I'll have to take a look.

Well you can look at the .menu files here on our text repo: https://github.com/MBII/TextAssets it is set up pretty modularly in comparison to the old MB UI, and probably in comparison to the base UI as well (been too long since I've looked).
 

16 hours ago, STOIK said:

. So far in my testing it's been great in every 16:9 resolution from 1080 up to 4k, I'm not really concerned with any legacy 4:3 situations and just running with the assumption that if you download a mod like this you're not using vanilla JA given the remaining player base is a bunch of legacy 30+ year olds.

Yeah, I'm just talking about the initial launch where JA starts at 800x600 resolution. If you use a higher resolution font so that it doesn't pixelate out for higher res monitors, the text becomes unreadable on that initial launch which also makes changing the resolution to 1080p+ a bit of an eyesore. MB makes an attempt at bypassing that a bit through our launcher.

 

16 hours ago, STOIK said:

For sure, I understand, but if not to change then there's really no reason at all. That being said the OG UI was made in a time before any sort of established user experience practices and wrought with accessibility nightmares so while it endearing for people that have grown up with it, it is a genuine nightmare from many perspectives.

To be clear, I'm not saying the original UI doesn't need a facelift, overhaul, and updates to its flow. I just think this goes too far, and that a lot of the UX "best practices" have resulted in everything looking and feeling the same. You can have a good UI without following the rule book to a T and still having a unique look. I have found many modern UI/UX people think making the screen look clearer/cleaner is actually better for UX, when in fact it adds way more clicks and time to navigate menus. Sometimes just put all the character customization on the same page, but make it look clean, rather than putting each separate option behind its own fancy animated menu kind of thing if that makes sense.