Hard Light Productions Forums

Modding, Mission Design, and Coding => FS2 Open Coding - The Source Code Project (SCP) => Topic started by: m!m on September 11, 2018, 04:16:30 pm

Title: High Resolution UI system
Post by: m!m on September 11, 2018, 04:16:30 pm
Thanks to the amazing work of mjn.mixael, we were able to build a fully functional, high resolution replacement for the initial pilot selection screen:

(https://i.imgur.com/igq6gUk.png)

This screen is powered by libRocket framework which allows to create user interfaces in an HTML and CSS dialect. The logic of this screen is controlled by a Lua script so it is very easy to change the way the user interface behaves without having to change the FreeSpace Open source code.

The newly added barracks screen
(https://cdn.discordapp.com/attachments/223511363807346691/491429510105923584/screen0085.png)

The new in-game options menu:
(https://cdn.discordapp.com/attachments/223511391531827200/495919126989242389/Screenshot_from_2018-09-30_13-24-22.png)

The project has reached a state where the initial pilot selection and the barracks screens can be replaced completely with a libRocket powered UI.

The mod is available on Knossos: https://fsnebula.org/mod/UITest

Alternatively, this is the development version which may be more recent if I bothered to upload the mod:
Here is the mod required for that: http://www.mediafire.com/file/02evqpucyesvoni/libRocketMod.zip
You will need special builds to use this which can be found here: http://swc.fs2downloads.com/builds/test/libRocket/

The development version of this mod can be found in this open source repository: https://github.com/asarium/libRocketMod
Development of this project frequently happens via the #scp channel on Discord so if you want to follow the development of the other screens check out that channel.

Please test this and let us know what you think!

Again, huge thanks to mjn.mixael for making this project happen.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 11, 2018, 04:26:50 pm
 :yes:

Because this system builds the UI like a webpage, the elements may move or scale differently depending on your resolution. I checked several random resolutions as I built it, but I'd be interested to see screenshots of any and all resolutions running this mod to see how things change.
Title: Re: High Resolution UI system
Post by: wookieejedi on September 11, 2018, 05:58:52 pm
Ohhh that's sexy. Fantastic work!
Title: Re: High Resolution UI system
Post by: TwentyPercentCooler on September 12, 2018, 02:46:25 am
You guys are sorcerers.  :yes:
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 12, 2018, 06:22:30 pm
Bank Gothic's triumphant return.

(https://i.imgur.com/45D5qr9.png)

The next screen is well under way. Note: barracks update is not in the OP attached mod files.

(https://i.imgur.com/nwg7RiL.png)
Title: Re: High Resolution UI system
Post by: Cyborg17 on September 13, 2018, 01:47:54 am
 :yes: :yes: :yes:
Title: Re: High Resolution UI system
Post by: Nightmare on September 13, 2018, 02:00:49 am
:yes: :yes: :yes:

qft
Title: Re: High Resolution UI system
Post by: Bryan See on September 13, 2018, 05:01:34 pm
:yes:

Because this system builds the UI like a webpage, the elements may move or scale differently depending on your resolution. I checked several random resolutions as I built it, but I'd be interested to see screenshots of any and all resolutions running this mod to see how things change.
Are you forgetting 9 slice scaling? You'd try to use that technique to remedy this problem you stated above.
Title: Re: High Resolution UI system
Post by: m!m on September 13, 2018, 05:06:40 pm
I have no idea how you could find a term that is vaguely related to the topic at hand and then immediately think it could be the solution to a random issue which may not even be a problem :nono:.
Title: Re: High Resolution UI system
Post by: Spoon on September 13, 2018, 05:28:15 pm
I have no idea how you could find a term that is vaguely related to the topic at hand and then immediately think it could be the solution to a random issue which may not even be a problem :nono:.
Have you considered adding geomod and soft particles to the UI? I'm fairly sure this will remedy any and all tessellations the font may have at 1827x811
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 13, 2018, 05:32:09 pm
I have no idea how you could find a term that is vaguely related to the topic at hand and then immediately think it could be the solution to a random issue which may not even be a problem :nono:.
Have you considered adding geomod and soft particles to the UI? I'm fairly sure this will remedy any and all tessellations the font may have at 1827x811

Oh My God. You're right! How did we overlook this?
Title: Re: High Resolution UI system
Post by: Nightmare on September 13, 2018, 06:18:01 pm

Oh My God. You're right! How did we overlook this?

It's much worse. We should've replaced the entire interface with 3D stuff instead of these old fashioned 2D things. But first we need to replace the POF format.
Title: Re: High Resolution UI system
Post by: Bryan See on September 13, 2018, 08:35:51 pm
I have no idea how you could find a term that is vaguely related to the topic at hand and then immediately think it could be the solution to a random issue which may not even be a problem :nono:.
9-slice scaling is a 2D image resizing technique to proportionally scale an image by splitting it in a grid of nine parts. The key idea is to prevent image scaling distortion by protecting the pixels defined in 4 parts of the image and scaling or repeating the pixels in the other 5 parts.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 13, 2018, 08:39:27 pm
I have no idea how you could find a term that is vaguely related to the topic at hand and then immediately think it could be the solution to a random issue which may not even be a problem :nono:.
9-slice scaling is a 2D image resizing technique to proportionally scale an image by splitting it in a grid of nine parts. The key idea is to prevent image scaling distortion by protecting the pixels defined in 4 parts of the image and scaling or repeating the pixels in the other 5 parts.

Congratulations, you can copy/paste from a Google search.

9-slice scaling has nothing to do with HTML/CSS layouts and "scaling" them for resolutions. Literally nothing.
Title: Re: High Resolution UI system
Post by: Nightmare on September 13, 2018, 08:42:56 pm
The SCP guys know what they're doing, others... don't.
Title: Re: High Resolution UI system
Post by: Spoon on September 14, 2018, 12:24:54 am
Also, since I was thinking it but not posting it.

Nice and good job with this stuff  :yes:
Title: Re: High Resolution UI system
Post by: m!m on September 18, 2018, 09:29:07 am
The barracks screen is now mostly done:
(https://cdn.discordapp.com/attachments/223511363807346691/491429510105923584/screen0085.png)
(Screenshot by mjn.mixael)
Title: Re: High Resolution UI system
Post by: X3N0-Life-Form on September 18, 2018, 09:41:18 am
 :yes:
Title: Re: High Resolution UI system
Post by: Bryan See on September 20, 2018, 07:29:13 pm
What about the Fiction Viewer, Briefing, Ship Selection, Loadout, and Debriefing screens?

What about Axem's Journal/System Viewer UI? I am sure Axem will port it to this. :)
Title: Re: High Resolution UI system
Post by: Nightmare on September 20, 2018, 08:24:48 pm
why don't you do it yourself

Apart from that, they'll do when they have time.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 20, 2018, 08:32:21 pm
What about the Fiction Viewer, Briefing, Ship Selection, Loadout, and Debriefing screens?

What about Axem's Journal/System Viewer UI? I am sure Axem will port it to this. :)

See... this post makes me want to not do those screens just out of spite. Like WTF do you think we're working on? Here, let me time-travel into the future and bring back all the completed UI screens just so I can be spared this useless post.
Title: Re: High Resolution UI system
Post by: Spoon on September 20, 2018, 08:40:12 pm
lol, imagine getting mad over a Bryan see post.
Title: Re: High Resolution UI system
Post by: jr2 on September 21, 2018, 12:34:01 pm
In case you missed the point, Bryan, you're coming across as a bit of a taskmaster.  Patience.  A better way to express anticipation would be to say you can't wait to see the rest of the screens.
Title: Re: High Resolution UI system
Post by: Bryan See on September 21, 2018, 02:15:49 pm
I've tested out the latest development version of the hi-res screens, and I got this error:
Code: [Select]
Could not find index 'OldState' in type 'HookVariables'

------------------------------------------------------------------
ADE Debug:
------------------------------------------------------------------
------------------------------------------------------------------


------------------------------------------------------------------

stack traceback:
[C]: ?
[string "rocketTest-sct.tbm - On State End override"]:1: in main chunk
------------------------------------------------------------------

1: Userdata [HookVariables]
2: String [OldState]
------------------------------------------------------------------
Code: [Select]
LUA ERROR: [string "ui_system.lua"]:70: attempt to index local 'state' (a nil value)

------------------------------------------------------------------
ADE Debug:
------------------------------------------------------------------
------------------------------------------------------------------


------------------------------------------------------------------

stack traceback:
[C]: ?
[string "ui_system.lua"]:70: in function 'hasOverrideForState'
[string "rocketTest-sct.tbm - On State End override"]:1: in main chunk
------------------------------------------------------------------

------------------------------------------------------------------

Apparently index 'OldState' in type 'HookVariables' is not recognized by script.
Title: Re: High Resolution UI system
Post by: m!m on September 21, 2018, 02:17:29 pm
Use the builds and the mod provided in the first post.
Title: Re: High Resolution UI system
Post by: Bryan See on September 21, 2018, 04:22:08 pm
Use the builds and the mod provided in the first post.
I thought it was committed to the main branch?
Title: Re: High Resolution UI system
Post by: Nightmare on September 21, 2018, 05:11:11 pm
Apparently they want some testing and content before they do so.
Title: Re: High Resolution UI system
Post by: m!m on September 21, 2018, 05:31:39 pm
I thought it was committed to the main branch?
That only applies to the mod in the first post. You should only use the development version from the repository if you know what you are doing.
Title: Re: High Resolution UI system
Post by: Bryan See on September 21, 2018, 07:49:50 pm
That's what I am doing right now. I'm using the development version.
Title: Re: High Resolution UI system
Post by: ngld on September 21, 2018, 07:59:05 pm
I'm using the development version.
You should only use the development version from the repository if you know what you are doing.

You quite apparently don't know what you're doing. Use the mod and builds from the OP or wait until they release an update.
Title: Re: High Resolution UI system
Post by: Bryan See on September 21, 2018, 08:17:43 pm
Actually, I'm curious to test it out. Testing reveals some issues. Particularly I've found an issue regarding Axem's UI (Journal/System Viewer), which needs to be ported to support this; I've said earlier.

The Options UI is a mess, though, but it's cool.

Editing the rocket-ui.cfg replaces the screens in the game states as stated in the code below:
Code: [Select]
#State Replacement

$State: GS_STATE_INITIAL_PLAYER_SELECT
    +Markup: data/interface/markup/pilot_select.rml

$State: GS_STATE_BARRACKS_MENU
    +Markup: data/interface/markup/barracks.rml

$State: GS_STATE_OPTIONS_MENU
    +Markup: data/interface/markup/options.rml

$State: GS_STATE_TECH_MENU
+Markup: data/interface/markup/tech.rml

$State: GS_STATE_SIMULATOR_ROOM
+Markup: data/interface/markup/simulator_room.rml

$State: GS_STATE_VIEW_CUTSCENES
+Markup: data/interface/markup/view_cutscenes.rml

$State: GS_STATE_CREDITS
+Markup: data/interface/markup/tech.rml

$State: GS_STATE_LOAD_MISSION_MENU
+Markup: data/interface/markup/load_mission.rml

$State: GS_STATE_BRIEFING
+Markup: data/interface/markup/briefing.rml

$State: GS_STATE_SHIP_SELECT
+Markup: data/interface/markup/ship_select.rml

$State: GS_STATE_WEAPON_SELECT
+Markup: data/interface/markup/weapon_select.rml

$State: GS_STATE_DEBRIEF
+Markup: data/interface/markup/debrief.rml

#End

Screens replaced include at the moment: tech room description, simulator room, view cutscenes, credits, loading screen, briefing, ship select, weapon select, and debrief. I look amazed.

ngld's right. As stated on the WiP post on Shattered Stars, the demo will not use this. Its development version uses it currently, but I'd like to develop high-resolutions screens specific to the mod.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 21, 2018, 09:12:58 pm
lol wut.

Most of those screens definitely do not exist yet. Did you just copy/paste what you found in the config, changing names as you pleased?

Go away Bryan. You clearly don't know what you're doing.
Title: Re: High Resolution UI system
Post by: Bryan See on September 23, 2018, 03:05:07 pm
Most of those screens definitely do not exist yet. Did you just copy/paste what you found in the config, changing names as you pleased?
I add in by copy pasting. I wanted to know whether these states can allow high-resolution screens. And it does.

I'd like to help out in any capacity.
Title: Re: High Resolution UI system
Post by: Nightmare on September 23, 2018, 03:44:08 pm
I add in by copy pasting. I wanted to know whether these states can allow high-resolution screens. And it does.

I'd like to help out in any capacity.

TBH while I don't want to discourage you I think that's pretty far away from only becoming MJNs temporary assitent helpling.
Title: Re: High Resolution UI system
Post by: Bryan See on September 23, 2018, 05:25:48 pm
I add in by copy pasting. I wanted to know whether these states can allow high-resolution screens. And it does.

I'd like to help out in any capacity.

TBH while I don't want to discourage you I think that's pretty far away from only becoming MJNs temporary assitent helpling.
Just wanting to find out that any of all state can be supplanted with High-Res screens.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 23, 2018, 05:47:32 pm
Of course it can... That's why we designed it that way. But all that does is tell FSO to load an arbitrary rml document on state start. You could build whatever you wanted with that rml document visually. Again, that's why we designed it that way. We know what it does. You clearly don't. For any rml-replaced state to actually be usable requires a hefty amount of code work in the engine to expose and port over the necessary engine functions into the lua that can be used by the rml document to do things like selecting a pilot or seeing a pilot's stats.

TLDR; Porting a single game state to the librocket UI is a multi step process requiring quite a bit of work code and design wise. What you did was the barest of bare minimums...
Title: Re: High Resolution UI system
Post by: Nightmare on September 23, 2018, 06:41:28 pm
Just wanting to find out that any of all state can be supplanted with High-Res screens.

Just think positive. There're people that know what they're doing, so other people can work on other things. You don't have to become a professional coder or graphic designer yourself to benefit from the SCP.
Title: Re: High Resolution UI system
Post by: Firesteel on September 24, 2018, 10:26:42 pm
Looking great y'all!

Is there a plan to make high resolution HUDs when this is done? I don't remember what the subject of the UI code changes even was anymore.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 24, 2018, 10:37:58 pm
HUDs are out of the scope of this project. HD HUDs are already a possibility code wise. You just need an artist to create new assets.
Title: Re: High Resolution UI system
Post by: jr2 on September 24, 2018, 11:13:40 pm
HUDs are out of the scope of this project. HD HUDs are already a possibility code wise. You just need an artist to create new assets.

I wonder if it would be possible to design a system that could generate those on-the-fly by specifying what the element is tied to, and what shape it is to take (%graph tied to a wedge, rectangular toggle state indicator, etc etc).

Probably a nightmare of coding and the results probably wouldn't be all that pretty unless even more work was done.  But it'd be cool some time in the future to be able to design and / or customize your own HUD (especially if you had a graphical WYSIWYG editor... haha, even more coding).

/derail
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 24, 2018, 11:29:44 pm
What would that accomplish that would not be worse than using an image rotor and designing your own HUD elements that way?
Title: Re: High Resolution UI system
Post by: chief1983 on September 26, 2018, 03:05:00 pm
Being able to specify an entire HUD via a table without adding in additional assets?  Sounds kind of neat actually.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 26, 2018, 03:14:36 pm
I mean.. I can understand why coders might want to design that way... :p
Title: Re: High Resolution UI system
Post by: chief1983 on September 26, 2018, 04:32:54 pm
Yes, it's actually the same principle behind using CSS instead of images on a website.  Pretty common these days to avoid loading a lot of extra assets when the CSS file can contain everything, and often for much lower overhead when the heavy work of actually rendering many shapes and features is already set up in the rendering engine, and you just need a few text bytes to tell it what to do.  Plus, a system like that could scale infinitely to any resolution.  The only graphics type that could claim to have that ability is SVG, which is already a text file format anyway.  I just have no idea how performant using libRocket to render HUD elements in real time could actually be.  Although there might be a middle ground, using libRocket during game/mission load to render HUD assets into memory at the specified resolution.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 27, 2018, 01:36:19 am
Web design isn't a great analogy because you still use image assets to do anything truly unique, but I get it. And I don't disagree at all. It just tickles me a little because of course this makes sense for people who are used to staring at code. As a visual designer, designing purely with code sounds awful! :)
Title: Re: High Resolution UI system
Post by: Kiloku on September 27, 2018, 05:22:42 am
I don't see why such a system couldn't also use images, making it even more analogous to web design. 

Besides, a lot in web design can be done without images today, when they couldn't "back in the day". HLP itself only uses images for the logo, the user avatar, and some little icons, as far as I can tell. Some of these icons could even be replaced by CSS shapes.
Title: Re: High Resolution UI system
Post by: m!m on September 27, 2018, 05:26:50 am
I just have no idea how performant using libRocket to render HUD elements in real time could actually be.  Although there might be a middle ground, using libRocket during game/mission load to render HUD assets into memory at the specified resolution.
I haven't run any benchmarks yet but it looks like libRocket would be fast enough to use it for rendering the HUD. That will require an entirely new system though since then I would like to use a Model-View technique to reduce the amount of code that would need to be ported to Lua.

I don't see why such a system couldn't also use images, making it even more analogous to web design. 

Besides, a lot in web design can be done without images today, when they couldn't "back in the day". HLP itself only uses images for the logo, the user avatar, and some little icons, as far as I can tell. Some of these icons could even be replaced by CSS shapes.
You all seem to be forgetting that libRocket doesn't support all those new and fancy CSS effects :p
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 27, 2018, 08:13:51 am
I don't see why such a system couldn't also use images, making it even more analogous to web design. 

Besides, a lot in web design can be done without images today, when they couldn't "back in the day". HLP itself only uses images for the logo, the user avatar, and some little icons, as far as I can tell. Some of these icons could even be replaced by CSS shapes.

Hlp uses at least a few more images than just the logo. There's some icons and banner backgrounds that have the logo at the very least. But if course that's why I said "unique". A purely code design could not make anything at all like FS2's default interface.

But yeah, m!m brings an excellent point. librocket is just not capable of anything like modern websites. :)
Title: Re: High Resolution UI system
Post by: m!m on September 27, 2018, 08:37:27 am
Here is an update on the current status of the options UI:
(https://cdn.discordapp.com/attachments/223511391531827200/494864805358993418/Screenshot_from_2018-09-27_15-35-19.png)

All option types (selection, range, binary) are supported now so now I only have to port over the various options.
Title: Re: High Resolution UI system
Post by: Nightmare on September 27, 2018, 08:59:20 am
Awesome job! :) :yes:

New Interface + In-game config menu = 2 Win
Title: Re: High Resolution UI system
Post by: X3N0-Life-Form on September 27, 2018, 09:10:52 am
All option types (selection, range, binary) are supported now so now I only have to port over the various options.
Awesome news :)
Title: Re: High Resolution UI system
Post by: Spoon on September 27, 2018, 10:29:10 am
Very noice.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 28, 2018, 04:05:08 pm
You can now download the HD UI test mod on Knossos. The released version has all our work up to the barracks.
Title: Re: High Resolution UI system
Post by: CapellaGoBoom on September 28, 2018, 05:17:25 pm
I will absolutely take a look at this test mod! I hope this becomes a thing for all FS mods out there :)
Title: Re: High Resolution UI system
Post by: m!m on September 30, 2018, 07:52:18 am
I think the options UI is now ready for an initial test. I updated the mod in the first post (you will need new libRocket test builds).
Download link: http://www.mediafire.com/file/02evqpucyesvoni/libRocketMod.zip

The options should already work in-game so you can test that as well.
Title: Re: High Resolution UI system
Post by: Bryan See on October 07, 2018, 02:47:50 pm
I've tested the latest build lately, and I've found out the issues on the options, especially on the detail tab. Apparently, the options don't save itself for some reason after exiting the options menu following some changes.

What of loading screens and mainhalls? Will the latter support rocketlib in some capacity?
Title: Re: High Resolution UI system
Post by: m!m on October 07, 2018, 02:52:13 pm
I've tested the latest build lately, and I've found out the issues on the options, especially on the detail tab. Apparently, the options don't save itself for some reason after exiting the options menu following some changes.
You need to express yourself more clearly. Your description is absolutely useless for me.
Title: Re: High Resolution UI system
Post by: Bryan See on October 08, 2018, 06:11:11 am
I've tested the latest build lately, and I've found out the issues on the options, especially on the detail tab. Apparently, the options don't save itself for some reason after exiting the options menu following some changes.
You need to express yourself more clearly. Your description is absolutely useless for me.
I mean, there are some issues found after testing the latest build. The options did not save itself for some reason after clicking accept.
Title: Re: High Resolution UI system
Post by: Bryan See on November 07, 2018, 11:23:15 am
On 800x600 resolutions and lower, the fonts and UI look distorted in the screenshot below.

(https://i.postimg.cc/Y4BsxyC4/Hi-Res-Screen-problem.png) (https://postimg.cc/Y4BsxyC4)
Title: Re: High Resolution UI system
Post by: Novachen on November 07, 2018, 11:34:00 am
I do not think, that 800x600 is appropriate to be called "High Resolution" in modern times.
Title: Re: High Resolution UI system
Post by: Nightmare on November 07, 2018, 12:09:16 pm
It shouldn't be a problem anyway unless the game doesn't switch to low-res interface automatically.
Could be a problem in case somebody ever finishes the Android port though, don't know which resolution mobile devices use.
Title: Re: High Resolution UI system
Post by: Novachen on November 07, 2018, 12:13:11 pm
It shouldn't be a problem anyway unless the game doesn't switch to low-res interface automatically.
Could be a problem in case somebody ever finishes the Android port though, don't know which resolution mobile devices use.

Current ones are actually also at Full HD, 2560x1080 or even 2K+ already.
Some older ones have maybe something like 720p or 900p... but 800x600? Actually i am not sure if there was ever a smartphone which such low resolution.

But because you should not develop an Android port with Android 5.0 or something in mind, i am not sure if there is any 720p mobile device that supports Android 7 or 8.
Title: Re: High Resolution UI system
Post by: mjn.mixael on November 07, 2018, 04:28:48 pm
Retail resolution art is at 1024x768... greater than Bryan's 800x600.  :lol:
Title: Re: High Resolution UI system
Post by: Bryan See on November 09, 2018, 11:22:56 am
Retail resolution art is at 1024x768... greater than Bryan's 800x600.  :lol:
Just saying in case you are amiss...
Title: Re: High Resolution UI system
Post by: Nightmare on November 09, 2018, 11:24:59 am
In case nothing else helps you can switch to the low-res retail interface with 640x480. ;)
Title: Re: High Resolution UI system
Post by: chief1983 on November 09, 2018, 12:48:59 pm
Actually I thought 800x600 was supposed to use the low-res interface art, and the high res stuff kicks in at 1024x768.  For weird non-4:3 resolutions it's a little more complicated though, for instance I think 720p actually uses the low res stuff, since that's < 768pixels vertically.
Title: Re: High Resolution UI system
Post by: m!m on November 09, 2018, 03:32:39 pm
The new UI system is always active regardless of the resolution,

I'm not sure if you meant that by "high res stuff" but I wanted to clarify that anyway :p
Title: Re: High Resolution UI system
Post by: Bryan See on November 11, 2018, 10:21:10 am
The new UI system is always active regardless of the resolution,

I'm not sure if you meant that by "high res stuff" but I wanted to clarify that anyway :p
That includes 1024x768 resolution...

What of librocket mainhall support?
Title: Re: High Resolution UI system
Post by: Nightmare on November 11, 2018, 10:24:50 am
The idea behind this was AFAIK to make the interface as modifyable as the mainhall.
Title: Re: High Resolution UI system
Post by: chief1983 on November 11, 2018, 10:27:53 am
If it is active regardless of resolution then shouldn't it work with all supported retail resolutions?
Title: Re: High Resolution UI system
Post by: m!m on November 11, 2018, 12:08:53 pm
On 800x600 resolutions and lower, the fonts and UI look distorted in the screenshot below.

(https://i.postimg.cc/Y4BsxyC4/Hi-Res-Screen-problem.png) (https://postimg.cc/Y4BsxyC4)
For completeness sake, I checked  what happens at 800x600 and I can't reproduce your issue so I'm going to assume that this is caused by the same driver bug that makes the standard TTF text disappear.
Title: Re: High Resolution UI system
Post by: Bryan See on November 12, 2018, 12:22:00 pm
On 800x600 resolutions and lower, the fonts and UI look distorted in the screenshot below.

(https://i.postimg.cc/Y4BsxyC4/Hi-Res-Screen-problem.png) (https://postimg.cc/Y4BsxyC4)
For completeness sake, I checked  what happens at 800x600 and I can't reproduce your issue so I'm going to assume that this is caused by the same driver bug that makes the standard TTF text disappear.
Try the -res and/or -center_res command lines and specify 800x600 and below.
Title: Re: High Resolution UI system
Post by: m!m on November 12, 2018, 12:23:36 pm
Try the -res and/or -center_res command lines and specify 800x600 and below.
Thank you, I know how the command line options work and if you actually read my post you would know that I set the resolution and could not reproduce your issue.
Title: Re: High Resolution UI system
Post by: Bryan See on November 12, 2018, 12:57:13 pm
Try the -res and/or -center_res command lines and specify 800x600 and below.
Thank you, I know how the command line options work and if you actually read my post you would know that I set the resolution and could not reproduce your issue.
May be someone who can reproduce it.
Title: Re: High Resolution UI system
Post by: mjn.mixael on August 29, 2022, 08:07:58 am
Bringing this thread back from the dead as there has finally been real progress. PRs have been merged and the scripts completed for Fiction Viewer, Red Alert, and Loop Brief UIs (pics not attached). Below are the current WIPs for Tech Room and Briefing.

Tech room is fully functioning and waiting on a PR merge. Briefing is only missing the icon map which is a whole can of worms that's going to take a bit. Otherwise it also is fully working.

Tech Room
(https://cdn.discordapp.com/attachments/223511391531827200/1013673191526383666/screen0474.png)
(https://cdn.discordapp.com/attachments/223511391531827200/1013673453938823168/screen0475.png)
Mission Simulator
(https://cdn.discordapp.com/attachments/223511391531827200/1013318410395996250/screen0472.png)
Cutscene Viewer
(https://cdn.discordapp.com/attachments/223511391531827200/1013515624435159160/unknown.png)
Briefing
(https://cdn.discordapp.com/attachments/223511391531827200/1013566163407618058/screen0473.png)
Title: Re: High Resolution UI system
Post by: wookieejedi on August 29, 2022, 10:03:56 am
Very, very exciting for the community that this is being actively worked on, and much thanks to mjn for being the one to lead the charge.
Title: Re: High Resolution UI system
Post by: Galemp on August 29, 2022, 01:41:39 pm
Oh, wow... this is amazing!
Title: Re: High Resolution UI system
Post by: mjn.mixael on August 31, 2022, 09:21:33 pm
Significant progress. Got the Briefing map working (without being able to click on it for now) along with everything else required for the Briefing UI to work. Here's a quick look at everything I've got so far.


I'm going to work on the Debriefing UI tomorrow and then focus on getting these PRs merged. After that's done I'll release what I have and then go for Ship/Weapon select.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 15, 2022, 09:15:19 pm
Just an example of the kind of thing you can do with SCPUI. Probably gonna make Red Alert Brief look like a cockpit for BtA.
Title: Re: High Resolution UI system
Post by: wookieejedi on September 15, 2022, 09:34:21 pm
Dang, that just keeps getting more and more versatile!
Title: Re: High Resolution UI system
Post by: Mongoose on September 18, 2022, 03:07:24 pm
Okay this is just dark magic now.
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 27, 2022, 10:29:27 pm
Getting close to a major milestone in my mind with ship and weapon select showing some life.

Title: Re: High Resolution UI system
Post by: Iain Baker on September 28, 2022, 06:01:51 pm
Sweet, although are the ships in the selection column supposed to flash like that? I’m thinking it might cause problems for those with photosensitivity issues. If the flashing is deliberate then an option to turn it off would be welcome 😊👍 cheers
Title: Re: High Resolution UI system
Post by: mjn.mixael on September 29, 2022, 08:13:10 am
It's flashing because the new UI can't use just a single frame from the retail animated icon files. I haven't tried to solve that problem yet, but mostly likely new single image files will be required. The retail ones are too low resolution anyway.
Title: Re: High Resolution UI system
Post by: mjn.mixael on October 03, 2022, 06:08:01 pm
Here's a quick preview of everything that's done so far. Will make a release of all of this very soon. Only two steps remain: handling the ship/weapon select icons properly and writing a briefing music handler to keep or stop music correctly between UIs.

Title: Re: High Resolution UI system
Post by: Trivial Psychic on October 04, 2022, 02:05:51 am
I noticed that the spacing between the lines of text in Command Briefings isn't consistent.

Have you tried with the flags to enable 3D models of ships and weapons in the loadout screen yet?
Title: Re: High Resolution UI system
Post by: mjn.mixael on October 04, 2022, 09:16:10 am
3D models is handled except for the icons so far. That bit is still being worked out how to accomplish.
Title: Re: High Resolution UI system
Post by: alpha993 on November 11, 2022, 09:38:12 pm
So I tested SCPUI on my 3440x1440 ultrawide monitor and noticed a lot of 'smushing' going on with the different UI elements. Seems like an easy solution for ultrawide would be to significantly scale down the UI elements while scaling up the font somewhat to compensate, or perhaps place a cap on how much the UI elements can scale up with larger resolutions. I tried taking screenshots of most menus so you can see how they look, but let me know if I forgot any.

Here goes:

1. Pilot selection. (Oversized GTVA logo, and create, clone, and delete buttons are placed too low)
(https://imgur.com/1Q1LgDb.png)

2. Barracks. (Stats overlap with pilot selection, and squadron logo overlaps with character image)
(https://imgur.com/Y9EQLqy.png)

3. Campaign selection. (GTVA logo overlaps with campaign description textbox)
(https://imgur.com/10sMMWf.png)

4. Options. (Oversized elements almost overlap with each other)
(https://imgur.com/lhQXXqe.png)

5. Detail. (Same as #4)
(https://imgur.com/G0Gsnji.png)

6. Preferences. (Potentially same as #4)
(https://imgur.com/houdEPD.png)

7. Multiplayer. (Potentially same as #4)
(https://imgur.com/EtwZgu3.png)

8. Technical database. (Help and options overlap with 3D ship display, and data textbox is cut off at the bottom)
(https://imgur.com/0ow77zP.png)

9. Mission simulator. (Selection box is cut off at the bottom)
(https://imgur.com/UfCEtgp.png)

10. Cutscenes. (Cutscene description textbox is cut off at the bottom)
(https://imgur.com/JG08s6g.png)

11. Credits. (Credits image box, credits textbox, and exit button overlap)
(https://imgur.com/Rbpzndl.png)

12. Ship selection. (Ship selection box, and stats textbox overlap. Help and options and 3D ship display slightly overlap)
(https://imgur.com/XsjoVha.png)

13. Weapon selection. (Wing loadout propagate button is too large, secondary weapon selection box is cut off at the bottom, and weapon icon placement does not match background graphic)
(https://imgur.com/jCrxHBa.png)

14. Command briefing. (Intel animation is cut off at the bottom)
(https://imgur.com/8fOVJhG.png)

15. Briefing. (Briefing text completely cut off)
(https://imgur.com/92BhfEp.png)

16. Fiction viewer. (Fiction textbox is cut off at the bottom)
(https://imgur.com/N369NB7.png)

17. Debriefing. (Debriefing textbox is cut off at the top)
(https://imgur.com/lahqdkw.png)

18. Red alert. (Red alert textbox is cut off at the top, and GTVA logo overlaps with textbox)
(https://imgur.com/JBKAl7J.png)

19. GTVI/SOC loop. (Intel animation is cut off at the bottom, and SOC logo overlaps with textbox)
(https://imgur.com/6e3Lld9.png)



Title: Re: High Resolution UI system
Post by: mjn.mixael on November 12, 2022, 12:04:10 pm
Ouch. Ultrawide is probably going to need it's own CSS files. I don't think there's going to be a way to do one-size-fits all with librocket's limited CSS property compatibility. I'll think about how best to solve this and probably come up with some files for you to test soon.
Title: Re: High Resolution UI system
Post by: alpha993 on November 12, 2022, 04:14:48 pm
I'll think about how best to solve this and probably come up with some files for you to test soon.

Sounds good. Just let me know and I'll prepare some updated screenshots for you.
Awesome job on the whole SCPUI though! This stuff is the future  :nod:
Title: Re: High Resolution UI system
Post by: mjn.mixael on November 13, 2022, 08:59:14 am
I should also add that there is a font size multiplier in Options -> Preferences. That will help with the readability part. I'm curious if it can go high enough for this use case.
Title: Re: High Resolution UI system
Post by: alpha993 on November 13, 2022, 08:59:25 pm
This is how it looks with the fontsize at the highest setting in ultrawide:

(https://imgur.com/m8Defy9.png)

It's good enough for my purposes, but there could be other ultrawide users who might want it to go higher.
Title: Re: High Resolution UI system
Post by: Iain Baker on March 13, 2023, 07:22:58 am
This is looking great. Quick question - would this override custom UIs? Herkie is thinking of creating a pretty custom UI for the Reunion update, but I’m thinking he should hold fire for now until this goes live incase it overwrites his hard work. Your thoughts?
Title: Re: High Resolution UI system
Post by: herkie423 on March 13, 2023, 11:11:46 pm
This is great for reference. I'm going to create an entirely different user interface, all the screens and all the button icons.  :)

EDIT: but I will hold for now until this new FS2 user interface project will be complete.
Title: Re: High Resolution UI system
Post by: Asteroth on March 14, 2023, 01:35:32 am
This is looking great. Quick question - would this override custom UIs? Herkie is thinking of creating a pretty custom UI for the Reunion update, but I’m thinking he should hold fire for now until this goes live incase it overwrites his hard work. Your thoughts?
This doesn't "overwrite" anything, it's scripts and css files, mod data like anything else (Mjn correct me if I'm wrong here). If you want it, you can use the files Mjn is making which mimic the look and feel of the retail interface. Or you could make your own files for a completely different, but still dynamic UI.
Title: Re: High Resolution UI system
Post by: EatThePath on March 14, 2023, 11:02:10 pm
In practical terms it kind of does 'overwrite' it, or more properly override, since a user sees only the new script-driven UI and not the old screen that a modder might have customized. They don't use the same interface images or anything, so a reskinning like in TBG won't carry over without extra work