[Feature]: Add gamescope support #3089

Nocccer · 2023-09-27T17:02:50Z

This PR adds support for gamescope configuration per game.

Upscaling can be toggled on/off and configured
Limiter can be toggled on/off and configured

simplescreenrecorder-2023-10-02_19.28.05.mp4

Use the following Checklist if you have changed something on the Backend or Frontend:

Tested the feature and it's working on a current and clean install.
Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
Created / Updated Tests (If necessary)
Created / Updated documentation (If necessary)

flavioislima · 2023-09-29T12:25:27Z

@Nocccer tested here with Flatpak and its working mostly fine. A few small improvements:
Some help texts are not really helpful, we could follow something similar to what is on Gamescope docs:

The scaling method should be a Toggle and when enabled should show a Select with Interger, FSR and NVidia Integer Scaling (if I am not wrong its open source and works on all GPUs but its worse than FSR in most cases I guess).

Using Interger and FSR won't work I guess since Interger will keep the fullscreen window but setting the game window itself to the internal game resolution. For instance:

Game resolution 1440p upscaled to 4k, the game window does not use the whole screen when using interger:

flavioislima · 2023-09-29T12:38:00Z

flatpak/templates/com.heroicgameslauncher.hgl.metainfo.xml.template

I think we dont need to update this file anymore, in fact, we can remove the prepareFlatpak script in total since I added the other github action that clone the flatpak repo and opens a PR there with all the updates, including the changelog as well.

How we can build flatpak locally then from inside the heroic repository?

True, so we will need both then.

flavioislima · 2023-09-29T12:41:43Z

Another thing, one good improvement would be also to check if gamescope is available and disable the Summary component and show a message on the side saying that Gamescope is not available.

Also, should we also add the Stretch scaling option? I wonder if people would use it to play 4:3 games from GOG or Amazon for instance and stretch it to 16:9.

flavioislima · 2023-09-29T16:05:34Z

One bug I just found:
Games fail to launch if Gamescope is Disabled.

Nocccer · 2023-10-02T17:27:17Z

Another thing, one good improvement would be also to check if gamescope is available and disable the Summary component and show a message on the side saying that Gamescope is not available.

Also, should we also add the Stretch scaling option? I wonder if people would use it to play 4:3 games from GOG or Amazon for instance and stretch it to 16:9.

Ok so i added the message if gamescope can not be found. I also wrapped upscale and limiter behind a toggle.
The design sucks. I am not that good at CSS and before i add tons of new components @arielj or you find better solutions.

Nocccer · 2023-10-02T17:27:31Z

One bug I just found: Games fail to launch if Gamescope is Disabled.

Should be fixed now.

arielj

If we add a class to the div in line 84 like gamescopeSettings we can fix the (i) alignment issue with something like:

.gamescopeSettings .selectFieldWrapper {
  grid-template-areas:
    'label info'
    'select select';
  grid-template-columns: max-content 1fr;
}

.gamescopeSettings .textInputFieldWrapper {
  grid-template-areas:
    'label info'
    'input input';
  grid-template-columns: max-content 1fr;
}

And we can also replace the divs with margin 10 used as separators with:

.gamescopeSettings .row {
  display: flex;
  gap: 10px;
}

And changing the toggleRow class with .row. So we don't use toggleRow for things components that are not toggles

arielj · 2023-10-07T22:52:01Z

src/frontend/screens/Settings/components/Gamescope.tsx

+        <>
+          {/* Upscale Method */}
+          <SelectField
+            label={'Upscale Method'}


Suggested change

label={'Upscale Method'}

label={t('settings.gamescope.upscaleMethod', 'Upscale Method')}

arielj · 2023-10-07T22:56:54Z

src/frontend/screens/Settings/components/Gamescope.tsx

+      .then((installed) => {
+        setIsInstalled(installed)
+        setFetching(false)
+      })
+      .catch(() => {
+        setIsInstalled(false)
+        setFetching(false)
+      })
+  }, [])


Suggested change

.then((installed) => {

setIsInstalled(installed)

setFetching(false)

})

.catch(() => {

setIsInstalled(false)

setFetching(false)

})

}, [])

.then((installed) => setIsInstalled(installed) )

.catch(() => setIsInstalled(false) )

.finally(() => setFetching(false) )

}, [])

arielj · 2023-10-07T23:01:58Z

src/frontend/screens/Settings/components/Gamescope.tsx

+                setGamescope({
+                  ...gamescope,
+                  gameWidth:
+                    setResolution(event.currentTarget.value) ??
+                    gamescope.gameWidth
+                })
+              }}


Just a suggestion, we use this code in 6 places, maybe we could move this inside setResolution and do setResolution('gameWidth', event.currentTarget.value) for example

and do this setGamescope.... code there instead

arielj · 2023-10-07T23:15:06Z

src/frontend/screens/Settings/components/Gamescope.tsx

+            value={gamescope.windowType}
+          >
+            {['fullscreen', 'borderless'].map((opt, i) => (
+              <option key={i}>{opt}</option>


Suggested change

<option key={i}>{opt}</option>

<option key={i} value={opt}>

{t(`gamescope.windowType.${opt}`, opt)}

</option>

We need to add this also somewhere before this return for the yarn i18next command:

// t('gamescope.windowType.fullscreen', 'Fullscreen') // t('gamescope.windowType.borderless', 'Borderless')

We can do something similar for the upscaling method select, to say AMD FidelityFX™ Super Resolution instead of fsr for example?

arielj · 2023-10-07T23:22:34Z

src/frontend/screens/Settings/components/Gamescope.tsx

+              enableUpscaling: !gamescope.enableUpscaling
+            })
+          }
+          title={t('setting.gamescope.enableUpscaling', 'Enables Upscaling')}


Suggested change

title={t('setting.gamescope.enableUpscaling', 'Enables Upscaling')}

title={t('setting.gamescope.enableUpscaling', 'Enable Upscaling')}

arielj · 2023-10-07T23:51:21Z

src/backend/launcher.ts

+    if (!gameScopeBin) {
+      return {
+        success: false,
+        failureReason:
+          'Gamescope is enabled, but `gamescope` executable could not be found on $PATH'
+      }
+    }


I wonder if we should puts something in the logs and ignore gamescope instead of failing?

because if a user uninstalls gamescope and a game has it configured or it's configured in the defaults, there's no way for the user to disable gamescope form Heroic because we show We could not found gamescope on the PATH. Install it or add it to the PATH. and hide the gamescope settings.

Or maybe we can always show the gamescope settings but show a warnings at the beginning of that section saying the executable was not found, so users can disable it.

Heroic should check for gamescope at launch as well, so it can ignore the gamescope settings if was not found.
This would avoid breaking some games in this example.

But I also vote for the disabled setting instead of removing it, so we can be more clear.

yeah disabling the feature if no gamescope found is the best way in my opinion

just to clarify, currently the feature is partially disabled when the binary is not found (it shows a message and no actual settings)

that is what would cause this issue: if you had that available, enabled it, and then uninstall gamescope, the settings are disabled but the game would fail to run and we have no way of disabling it since the settings are gone

so we have to either:

not fail if it's enabled but not available

not hide the settings if it's enabled, even if not available to allow disabling it (we could hide the settings if disabled and not available to prevent enabling it)

do both things to be extra safe

flavioislima · 2023-10-08T15:28:19Z

Tested here and the feature itself works pretty well (FPS limit won't work for me for some reason but I can see that the command is correct).

I believe some of the improvements like the style can be done on another PR, I will also need to move it to a tab anyway once I merge my tabs settings PR. So I think solving some of the other comments here should be fine to merge.

flavioislima · 2023-10-13T08:25:34Z

I think we can merge the PR like this and then improve the Style and message on another PR.
Sounds good @arielj @Nocccer

flavioislima · 2023-10-13T08:26:23Z

One thing we need is a new component that is an input with the exclamation icon inside it, on the left or right, to show the help text. Outside like this is not fine. we can improve that before the next release though.

flavioislima

LGTM!
Good stuff!

flavioislima · 2023-10-13T08:28:46Z

public/locales/en/translation.json

+        "gamescope": {
+            "enableLimiter": "Enable FPS Limiter",
+            "enableUpscaling": "Enables Upscaling",
+            "missingMsg": "We could not found gamescope on the PATH. Install it or add it to the PATH."


Suggested change

"missingMsg": "We could not found gamescope on the PATH. Install it or add it to the PATH."

"missingMsg": "Heroic could not find gamescope on your system. Install it or add it to the PATH."

I think it is easier to understand this way.

flavioislima · 2023-10-13T08:29:21Z

src/frontend/screens/Settings/components/Gamescope.tsx

+      <div style={{ color: 'red' }}>
+        {t(
+          'setting.gamescope.missingMsg',
+          'We could not found gamescope on the PATH. Install it or add it to the PATH.'


Suggested change

'We could not found gamescope on the PATH. Install it or add it to the PATH.'

'Heroic could not find gamescope on your system. Install it or add it to the PATH.'

arielj · 2023-10-13T13:32:08Z

One thing we need is a new component that is an input with the exclamation icon inside it, on the left or right, to show the help text. Outside like this is not fine. we can improve that before the next release though.

with my suggested change, the (i) icon is next to the label like:

Game width (i)
[________________________]

I can push those changes, I already tested them

flavioislima · 2023-10-13T17:32:45Z

One thing we need is a new component that is an input with the exclamation icon inside it, on the left or right, to show the help text. Outside like this is not fine. we can improve that before the next release though.

with my suggested change, the (i) icon is next to the label like:
Game width (i)
[________________________]
I can push those changes, I already tested them

Fine by me, that works as well

…uncher into feature/gamescope

flavioislima · 2023-10-29T18:47:59Z

Merging this one as well and we can improve it afterwards

First gamescope draft

27294a2

Nocccer added the pr:wip WIP, don't merge. label Sep 27, 2023

Nocccer self-assigned this Sep 27, 2023

Detect nvidia cards

9ef4fcc

This was linked to issues Sep 27, 2023

Support for gamescope #1338

Closed

Flatpak version cannot find installed gamescope #2911

Closed

Nocccer changed the title ~~[Feature]: Gamescope settings~~ [Feature]: Add gamescope support Sep 27, 2023

Nocccer added 4 commits September 27, 2023 21:05

Clean up and fixes

247dd62

Update flatpak templates

67d5c41

Make gamescope first wrapper

e6209e8

Small fixes

23fbd24

Nocccer requested review from a team, arielj, flavioislima, CommandMC and imLinguin and removed request for a team September 27, 2023 21:09

flavioislima reviewed Sep 29, 2023

View reviewed changes

Nocccer added 2 commits October 2, 2023 17:46

Merge branch 'main' into feature/gamescope

07ed8e5

Add review fixes

c6c8ef4

Nocccer added pr:ready-for-review Feature-complete, ready for the grind! :P and removed pr:wip WIP, don't merge. labels Oct 2, 2023

Nocccer requested a review from flavioislima October 2, 2023 17:31

arielj reviewed Oct 7, 2023

View reviewed changes

flavioislima approved these changes Oct 13, 2023

View reviewed changes

flavioislima reviewed Oct 13, 2023

View reviewed changes

arielj added 3 commits October 13, 2023 16:17

Merge branch 'main' of github.com:Heroic-Games-Launcher/HeroicGamesLa…

d9479e1

…uncher into feature/gamescope

Gamescope: fix (i) position

a968e4f

Gamescope: remove unneeded div

f0ba8bf

flavioislima merged commit 4bb8839 into main Oct 29, 2023

flavioislima deleted the feature/gamescope branch October 29, 2023 18:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature]: Add gamescope support #3089

[Feature]: Add gamescope support #3089

Nocccer commented Sep 27, 2023 •

edited

Loading

flavioislima commented Sep 29, 2023 •

edited

Loading

flavioislima Sep 29, 2023

Nocccer Oct 2, 2023

flavioislima Oct 13, 2023

flavioislima commented Sep 29, 2023

flavioislima commented Sep 29, 2023

Nocccer commented Oct 2, 2023

Nocccer commented Oct 2, 2023

arielj left a comment

arielj Oct 7, 2023

arielj Oct 7, 2023

arielj Oct 7, 2023 •

edited

Loading

arielj Oct 7, 2023

arielj Oct 7, 2023

arielj Oct 7, 2023

flavioislima Oct 8, 2023

Etaash-mathamsetty Oct 8, 2023

arielj Oct 8, 2023

flavioislima commented Oct 8, 2023

flavioislima commented Oct 13, 2023

flavioislima commented Oct 13, 2023

flavioislima left a comment

flavioislima Oct 13, 2023

flavioislima Oct 13, 2023

arielj commented Oct 13, 2023

flavioislima commented Oct 13, 2023

flavioislima commented Oct 29, 2023

	label={'Upscale Method'}
	label={t('settings.gamescope.upscaleMethod', 'Upscale Method')}

	title={t('setting.gamescope.enableUpscaling', 'Enables Upscaling')}
	title={t('setting.gamescope.enableUpscaling', 'Enable Upscaling')}

	"missingMsg": "We could not found gamescope on the PATH. Install it or add it to the PATH."
	"missingMsg": "Heroic could not find gamescope on your system. Install it or add it to the PATH."

	'We could not found gamescope on the PATH. Install it or add it to the PATH.'
	'Heroic could not find gamescope on your system. Install it or add it to the PATH.'

[Feature]: Add gamescope support #3089

[Feature]: Add gamescope support #3089

Conversation

Nocccer commented Sep 27, 2023 • edited Loading

flavioislima commented Sep 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flavioislima commented Sep 29, 2023

flavioislima commented Sep 29, 2023

Nocccer commented Oct 2, 2023

Nocccer commented Oct 2, 2023

arielj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arielj Oct 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flavioislima commented Oct 8, 2023

flavioislima commented Oct 13, 2023

flavioislima commented Oct 13, 2023

flavioislima left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arielj commented Oct 13, 2023

flavioislima commented Oct 13, 2023

flavioislima commented Oct 29, 2023

Nocccer commented Sep 27, 2023 •

edited

Loading

flavioislima commented Sep 29, 2023 •

edited

Loading

arielj Oct 7, 2023 •

edited

Loading