Author Topic: High Resolution UI system  (Read 33333 times)

0 Members and 1 Guest are viewing this topic.

Offline m!m

  • 211
High Resolution UI system
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:



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


The new in-game options menu:


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.
« Last Edit: September 30, 2018, 07:52:14 am by m!m »

 

Offline mjn.mixael

  • Cutscene Master
  • 212
  • Chopped liver
    • Steam
    • Twitter
Re: High Resolution UI system
 :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.
Cutscene Upgrade Project - Mainhall Remakes - Between the Ashes
Youtube Channel - P3D Model Box
Between the Ashes is looking for committed testers, PM me for details.
Freespace Upgrade Project See what's happening.

 

Offline wookieejedi

  • 29
  • Intensify Forward Firepower
Re: High Resolution UI system
Ohhh that's sexy. Fantastic work!

 

Offline TwentyPercentCooler

  • Operates at 375 kelvin
  • 28
Re: High Resolution UI system
You guys are sorcerers.  :yes:

 

Offline mjn.mixael

  • Cutscene Master
  • 212
  • Chopped liver
    • Steam
    • Twitter
Re: High Resolution UI system
Bank Gothic's triumphant return.



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

Cutscene Upgrade Project - Mainhall Remakes - Between the Ashes
Youtube Channel - P3D Model Box
Between the Ashes is looking for committed testers, PM me for details.
Freespace Upgrade Project See what's happening.

 

Offline Cyborg17

  • 29
  • Life? Don't talk to me about life....
Re: High Resolution UI system
 :yes: :yes: :yes:

  
 

Offline Bryan See

  • Has anyone really been far as decided to use even go want to do look more like?
  • 210
  • Trying to redeem, but under Tiger Parents
    • Skype
    • Steam
    • Twitter
Re: High Resolution UI system
: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.
Bryan See - My FreeSpace Wiki User Page (Talk, Contributions)

Full Projects:
Shattered Stars

Campaigns:
Lost in the Mist - Cyrene vs. Psamtik
FreeSpace: Reunited

Ships:
GTS Hygeia, GTT Argo, SC Raguel

Tools:
FSO TC/Game template

I've been under attack by Tiger Parents like Jennifer Pan...

 

Offline m!m

  • 211
Re: High Resolution UI system
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:.

 

Offline Spoon

  • 212
  • ヾ(´︶`♡)ノ
Re: High Resolution UI system
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
Urutorahappī!!

[02:42] <@Axem> spoon somethings wrong
[02:42] <@Axem> critically wrong
[02:42] <@Axem> im happy with these missions now
[02:44] <@Axem> well
[02:44] <@Axem> with 2 of them

 

Offline mjn.mixael

  • Cutscene Master
  • 212
  • Chopped liver
    • Steam
    • Twitter
Re: High Resolution UI system
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?
Cutscene Upgrade Project - Mainhall Remakes - Between the Ashes
Youtube Channel - P3D Model Box
Between the Ashes is looking for committed testers, PM me for details.
Freespace Upgrade Project See what's happening.

 
Re: High Resolution UI system

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.

 

Offline Bryan See

  • Has anyone really been far as decided to use even go want to do look more like?
  • 210
  • Trying to redeem, but under Tiger Parents
    • Skype
    • Steam
    • Twitter
Re: High Resolution UI system
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.
Bryan See - My FreeSpace Wiki User Page (Talk, Contributions)

Full Projects:
Shattered Stars

Campaigns:
Lost in the Mist - Cyrene vs. Psamtik
FreeSpace: Reunited

Ships:
GTS Hygeia, GTT Argo, SC Raguel

Tools:
FSO TC/Game template

I've been under attack by Tiger Parents like Jennifer Pan...

 

Offline mjn.mixael

  • Cutscene Master
  • 212
  • Chopped liver
    • Steam
    • Twitter
Re: High Resolution UI system
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.
Cutscene Upgrade Project - Mainhall Remakes - Between the Ashes
Youtube Channel - P3D Model Box
Between the Ashes is looking for committed testers, PM me for details.
Freespace Upgrade Project See what's happening.

 
Re: High Resolution UI system
The SCP guys know what they're doing, others... don't.

 

Offline Spoon

  • 212
  • ヾ(´︶`♡)ノ
Re: High Resolution UI system
Also, since I was thinking it but not posting it.

Nice and good job with this stuff  :yes:
Urutorahappī!!

[02:42] <@Axem> spoon somethings wrong
[02:42] <@Axem> critically wrong
[02:42] <@Axem> im happy with these missions now
[02:44] <@Axem> well
[02:44] <@Axem> with 2 of them

 

Offline m!m

  • 211
Re: High Resolution UI system
The barracks screen is now mostly done:

(Screenshot by mjn.mixael)

 
Re: High Resolution UI system
 :yes:

 

Offline Bryan See

  • Has anyone really been far as decided to use even go want to do look more like?
  • 210
  • Trying to redeem, but under Tiger Parents
    • Skype
    • Steam
    • Twitter
Re: High Resolution UI system
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. :)
Bryan See - My FreeSpace Wiki User Page (Talk, Contributions)

Full Projects:
Shattered Stars

Campaigns:
Lost in the Mist - Cyrene vs. Psamtik
FreeSpace: Reunited

Ships:
GTS Hygeia, GTT Argo, SC Raguel

Tools:
FSO TC/Game template

I've been under attack by Tiger Parents like Jennifer Pan...

 
Re: High Resolution UI system
why don't you do it yourself

Apart from that, they'll do when they have time.
« Last Edit: September 20, 2018, 08:27:58 pm by Nightmare »