Hard beginnins - some questions from a newbie

Hello,

I’m just starting my journey with Overwolf and apps. Have some experience when it comes to simple websites and I’d love to learn how to build more and more advanced things using Overwolf as a platform.

So far I downloaded the Fortnite sample app, played with it and it raised some questions. What I would like to achieve as my first learning experience/project:
Fortnite app with only one window, visible all the time that will work with dual or triple display setup (game on one screen and app on another). Whenever kill event is detected I want to display a graphic element in the app window for 5 seconds. I already figured out how to display the image in div when kill event is happening, but it is in-game window.

  • what is the difference in the role of dist and windows directories in the ts folder? .html files there are the same; .js and .ts are different but when removed windows directory the app does not work;
  • mentioned Fortnite sample app is switching windows when game is on/off - I would like to keep the app super simple and start with only one window that is visible always, no matter the game status. Is it the code in background window files? Figured out that if in-game window has in manifest.json desktop_only I can drag the window to another screen
  • is it possible to enter full-screen mode with the mentioned window? I’d like to run the game in borderless mode on one screen and then have the app window running in full-screen/borderless on another.

Hi @luke, and welcome to the Overwolf developer’s community!

I got the questions - and I will answer you in detail by Sunday.

Thanks.

Hi,

what is the difference in the role of dist and windows directories in the ts folder? .html files there are the same; .js and .ts are different, but when removed windows directory the app does not work;

You are right. The HTML files (that each on of them represents a different OW window) under the “dist” folder are the same as the files under the “windows” folder. The reason is that on the VS code build file we tell the VS code to copy the files to the “dist” folder (by calling npm run build). And in the manifest, you can see that we give the location of the “dist”:

"windows": {
      "background": {
        "file": "dist/background/background.html",
        "is_background_page": true
 }

So basically, if you change the location to the “windows” folder, that will work. We wanted to demonstrate a common practice in development. As many devs use build command that takes the JS, HTML, etc. files from one location, and minimize them, etc. - and “throw” them at the end in another folder (in our case - the “dist” folder).

mentioned Fortnite sample app is switching windows when game is on/off - I would like to keep the app super simple and start with only one window that is visible always, no matter the game status. Is it the code in background window files? Figured out that if in-game window has in manifest.json desktop_only I can drag the window to another screen.

If you want just one window that is not displayed in the game (overlay), and displayed only on a second screen - you should use a desktop_only window, and it’s recommended to set him also as a native window, for better performance. Note that desktop_only windows cannot be dragged to your game. If you want to create a window displayed in-game AND on desktop, you should not set anything (not in_game and not desktop_only and not native). Not setting a window makes it “hybrid”. But we recommend doing that.

Regardless, our recommendation is always to set one background window that is not visible and set him as a background controller: one window to rule them all. This window will open and close all the other windows and act as the “brain” of your app.

is it possible to enter full-screen mode with the mentioned window? I’d like to run the game in borderless mode on one screen and then have the app window running in full-screen/borderless on another.

Yes, it’s possible. If you have two screens, you can run your game in full screen on your first screen, and your app maximized (or not) on the second screen.

Hope that it’s clear and makes sense.

Thanks.

1 Like

Hey,

I spent some time messing with the app and with your answers now it makes perfect sense and all is clear! Thank you very much :slight_smile:

Do you plan on releasing any workshops in the future for newbie app developers to talk especially about how things are done in OW?

How to set the window maximized (so no windows bar visible) on 2nd screen automatically? Is this maximized thing part of manifest or needs to be done in the window code itself?

Thanks for the feedback.

We are working on a tutorial video that will explain how to develop your first OW app using the sample app as a starter point. We will release it soon.

Regarding maximizing your window - if I understand correctly, you want that once an app window is dragged to the second screen, it will resize automatically. If that correct, you can do that by: