Steam Overlay Hint not showing

[dfabulich]

Forking this off from #97

To reproduce:

1. On Windows, clone the steamworks.js github, launch Steam, and login.

2. npm install

3. npm run build

4. cd test

5. cd electron

6. npm install

7. npm start. The Electron app will open, and display your Steam display name.

   But it will not show the Steam Overlay hint, which normally looks like this:

   

8. Try pressing Shift-Tab. Nothing happens; no overlay appears.

I've tested this on:

• Windows 11 x64
• Ubuntu 22 x64
• macOS 13 Ventura on aarch64 M1 Apple Silicon

EDIT

I also tried adding the game to my Steam library, following these steps:

9. In the test/electron directory, I ran npm run build. This creates a build folder in the test/electron directory.
10. In Steam, I added the generated app to my Steam library, and launched the Electron test app via Steam.

This did not change the results. The overlay hint doesn't appear, and Shift-Tab does nothing.

[dfabulich]

As I described in #97, I am able to use client.overlay.activateToWebPage and activateToStore to show overlays, but those features just foreground the Steam app in a separate window, not as an in-app overlay. (That behavior is perfectly fine by me; I think opening web pages and store pages works best in a separate window.)

But in https://github.com/ceifa/steamworks.js/issues/97#issuecomment-1602814909 @saintflow47 said that if I'm seeing this issue, there might be a "bigger issue with my setup."

If there is an issue with my setup, we should get to the bottom of that here in this issue, and ideally file a PR to fix the checked-in Electron sample.

[ceifa]

I'm a little bit confused. The overlay it's working for you? Have you tried build the game and add as a non steam game?

[dfabulich]

I think what's confusing you is the idea of "the overlay." There are multiple different behaviors for the overlay, depending on whether or not Steam can figure out how to inject itself into your game.

https://partner.steamgames.com/doc/features/overlay

The overlay supports games that use DirectX 7 - 12, OpenGL, Metal, and Vulkan. The overlay will not be active in software-rasterized games.

For "software-rasterized games," those cases where Steam can't figure out how to inject itself into the game's window, the overlay works differently. In that case, Steam (by design) shows no overlay hint, and the Shift-Tab keyboard shortcut doesn't do anything.

If you're developing a "software-rasterized game" where Steam can't inject the overlay, but you nonetheless call an overlay method (activateDialog, activateToWebPage, activateToStore), Steam will just foreground the Steam app's window, and display the desired content in Steam's window, instead of in the game's window.

Here's an example of a "software-rasterized game" that uses an overlay method. I just updated my PR #98 to add a new script, test/overlay.js, which has no electron in it; it runs completely headlessly.

test/overlay.js is very short. Here's the whole thing:

const { init } = require('../index.js')

const client = init(480)

/*
This node script is "headless." It has no graphical context
into which Steam can inject an overlay.

Therefore, when you run this script while the Steam app is
running, Steam will foreground the Steam app, and display
example.com in the Steam app's window.
*/
client.overlay.activateToWebPage('https://www.example.com/');

When you run this test script, it "works." It opens example.com in the Steam app, like this:

Of course Steam doesn't show the "overlay hint" in the case of this headless test/overlay.js. (Where would it even show it? In my terminal prompt?? There is no window to show the hint in.) And, of course, Shift-Tab doesn't do anything, either.

If this still feels a bit confusing, I recommend running test/overlay.js from my PR #98 to see the effect with your own eyes.

But that's obviously not the normal/expected behavior when running a game in DirectX 7 - 12, OpenGL, Metal, and Vulkan, when Steam can figure out how to inject itself into your graphical context. In that case, you'd normally see the hint, and Shift-Tab shows an overlay right there in the game, not in a separate window.

What I'm saying is that when I follow the steps to reproduce that I documented in the bug, Steam treats the Electron app as a "software-rasterized game." There's no overlay hint, and Shift-Tab does nothing. When I click the "activate overlay" button, it displays the overlay in Steam's app, not as an "overlay" in the game's window.

As a result, since the overlay isn't showing "as an overlay," steamworks.electronEnableSteamOverlay() does nothing, since Steam isn't injecting any graphics into the Electron window at all.

Have you tried build the game and add as a non steam game?

Yes, I did. I updated my "to reproduce" instructions above to explain how I tested it.

[splintermann]

@dfabulich I was stuck on this exact issue for a few days; thanks to the https://partner.steamgames.com/doc/features/overlay link I was able to realize what was causing my problems. The steamworks.init (and maybe the electronEnableSteamOverlay) functions have to be called before app.whenReady() and createWindow() get called in main or else it will be unable to hook into the program and it will just bring Steam to the foreground instead of giving a proper overlay.

[gfordinal]

@splintermann Is this behavior confirmed or are you guessing?

Since I do experience the exact same behavior as @dfabulich describes. Though if you check the source you can reproduce the "wrong" way of opening the external Steam-App, even if init(480) is called as the very first thing in main.js.

OS: macOS Sonoma (14.4.1) Electron: 30.1.2 Steamworks.js: 0.3.2

I appreciate your idea, of calling init() "in time". Could you elaborate, how to get it to work?

[splintermann]

For example, test/electron/main.js calls "steamworks.electronEnableSteamOverlay()" at the very end of the file, But for my main.js I just moved it forward to be something like:

try{
  steamworks.electronEnableSteamOverlay(true);
  client = steamworks.init(480);
}
catch (e) {
  console.warn(e);
}
app.whenReady().then(() => {
  createWindow();
...

Regarding confirmation/guessing, this change was the one that worked for me, but I'm on different versions/settings so ymmv

(Windows 10, steamworks.js: 0.3.1, electron: 30.0.3)

[gfordinal]

(Windows 10, steamworks.js: 0.3.1, electron: 30.0.3)

Funny that on Windows I could eventually get it to ACTUALLY work. But with the exact same build.config for Mac, no overlay will appear.

Maybe - to be evaluated - Mac requires apps to be signed and notarized in order to allow the renderer process to be highjacked by another app. Or, on Apple silicon, the CPU is sandboxed and will never allow an extraneous app to tinker with its rendering.

I'll keep you updated.

[laukaichung]

In my case, Steam overlay only works on Linux, and that is when Proton is enabled. No luck with MacOS and Windows.