Fullscreen via NW.js -- Hotkeying to windowed-mode no longer working

2 favourites
  • 13 posts
From the Asset Store
Forget about default textbox restrictions, you can create sprites atop of the textbox
  • The only method to get get fullscreen on launch via nw.js that is working for me was to add the following code to the scripting area of the index.html file after export ..excluding adding the Kiosk argument to the window area of Package.json or --start-fullscreen via chromium-args in the same file:

    Now it seems like that code is making the window like Kiosk mode where I can't use the Browser object to change to a windowed-mode again:

    I'm now looking to find a way to implement hotkeys within the same scripting area of index.html as a work-around but haven't found much yet, has anyone come across ..or.. know of a way to have both full-screen on launch and hotkeys to change from full-screen to windowed-mode working?

  • So I found the solution that allows me to use full-screen in NW.js exports and allows me to toggle between full-screen and windowed-mode. The complete code for anyone else looking is at the bottom of this post:

    You should know that changing the key to F11 like in browsers does not work, I've concluded that is possibly due to Chromium reserving it for their function and thus if the user hasn't initiated input, won't allow it to work? ..but who knows, could be wrong.

    Other keys are also reserved such as F12 for NW.js debugger, it--the debugger--must be disabled with the --disable-devtools argument inside the Package.json file inside the chromium-args area "chromium-args": "--disable-devtools", before it can be assigned otherwise the debugger initiates first and doesn't allow the window-mode toggle.

    From here, I'll be looking to add the Alt + Enter combination into the script.

  • // Set window to fullscreen on startup
    var ngui = require('nw.gui');
    var nwin = ngui.Window.get();
    
    nwin.enterFullscreen();
    //END
    
    
    //Toggle Fullscreen--Borderless Window-Mode
    nw.App.registerGlobalHotKey(new nw.Shortcut({
    key: "F10",
    
    active: function () {
    nw.Window.get().toggleFullscreen();
    }}));
    //END
    
  • Are you trying to set your game into windowed fullscreen? If yes, this is something that I want to achieve as well. The code you shared here, where exactly do you add it? You add it after the export or before?? and where?

  • Are you trying to set your game into windowed fullscreen? If yes, this is something that I want to achieve as well. The code you shared here, where exactly do you add it? You add it after the export or before?? and where?

    After exporting via Node.js, add the code to the scripting area of index.html, reply if you get stuck, I'll upload the file somewhere for you to download

  • I am very much stuck I think.. I downloaded Node.js and then exported my construct project with NW.js.

    But after that I feel helpless because I am a noob with these software Node.js.

    I open the Node.js and all I have is a black command screen.

    I don't know how to use it with my NW.js export and where to find index.html in order to use your code.

    It is such a shame that NW.js does not allow us to change the resolution in-game and I think that this is a feature that any game engine should have. I am making a game with resolution 1920x1080 and trying to give opportunity for example 1366x768 resolutions to play my game. This is essential and if someone wants to publish a game on Steam (like me for example) it becomes a frustration.

    So I started searching for solutions, I think maybe this is possible by using "windowed fullscreen" because regarding my tests I get these resolution change results if I resize my game in a window. So maybe this is a workaround if we can have this result in a borderless windowed fullscreen.

    Ashley should as well come-in this topic and explain us how we can publish on Steam without having this essential option to change the resolution for desktop users like any game engine does.

    Thank you for replying loneDreamer and I would like to ask you if you can explain me how to add your code like you would explain it to a 10 years old. I am not familiar with software like Node.js and need help with this.

  • I am very much stuck I think.. I downloaded Node.js and then exported my construct project with NW.js.

    But after that I feel helpless because I am a noob with these software Node.js.

    I open the Node.js and all I have is a black command screen.

    I don't know how to use it with my NW.js export and where to find index.html in order to use your code.

    It is such a shame that NW.js does not allow us to change the resolution in-game and I think that this is a feature that any game engine should have. I am making a game with resolution 1920x1080 and trying to give opportunity for example 1366x768 resolutions to play my game. This is essential and if someone wants to publish a game on Steam (like me for example) it becomes a frustration.

    So I started searching for solutions, I think maybe this is possible by using "windowed fullscreen" because regarding my tests I get these resolution change results if I resize my game in a window. So maybe this is a workaround if we can have this result in a borderless windowed fullscreen.

    Ashley should as well come-in this topic and explain us how we can publish on Steam without having this essential option to change the resolution for desktop users like any game engine does.

    Thank you for replying loneDreamer and I would like to ask you if you can explain me how to add your code like you would explain it to a 10 years old. I am not familiar with software like Node.js and need help with this.

    Take note, I'm on Windows so if you are on another operating system such as Mac the instructions may differ slightly.

    1: Open your project (your created game) within Construct, test it to see if your game is working by previewing it, if you have a black-screen you should search through the other posts related to your issue as there is probably someone that has the same issue and has had it solved, if not, lodge a post asking for help in the forums if you cannot solve it yourself, ..also I sometimes get a black screen during previews but after restarting it resolves itself

    2: Ensure you have the "NWjs" object added to your project in the project pane on the right under the Objects folder, if not, go to one of your layouts right click > add object > NWjs, save your project, test and save

    3: Click on Menu at the top of the screen within Construct, then Project > Export, "Desktop (NW.js)" should appear, click it then next, choose your options, on the next page take note of whether-or-not you tick "Package Assets" and then continue through the export process, save the file to your desktop

    4: Extract your game from the exported zip (if zipped) to your desktop and open the folder. If you chose to package the assets, you will see "package.nw" in your exported game folder, explore (open) it with an archive program (7z) and then edit index.html by right clicking > edit with notepad--Otherwise if you chose not to package the assets, simply edit index.html and forget package.nw

    5: Within the Body /Body tags of the html code, create the tags Script and /Script, within the script tags, add the code in my previous post, then save the index.html document, your archiver will detect that package.nw has made changes and will ask you to update the changes once you close index.html

    6: Running your game should open it in full-screen mode and through the assigned key in the code I posted earlier you can press "F10" to toggle between full and windowed-mode.

    I don't know if you can change the window width/height (other than canvas) through Constructs events, however, I think it might be possible through Node.js Chromium as the arguments are on NW.js Documentation page under Docs » References » Window. Javascript might also work which can be added through the scripting area of the index.html or possibly in the scripting area in the events area within Construct but you'll need to test it yourself

    Good Luck

  • First of all thank you very much for writing such a detailed explanation on how to add your code. The way you walked me through this made it clear and understandable, I had an easy task to implement your code thanks to your effort and your consideration into this.

    The script worked perfectly and affected my project the way I desired it to affect it. I will share my test results for other people that would like to have same results:

    I tested my game on following desktop resolutions:

    1920x1080 (default resolution of my game)

    1920x1200

    1680x1050

    1600x1024

    1600x900

    1440x900

    1366x768

    1280x1024

    1280x768

    1024x768

    I tested as well in 4k resolution and in HD wide screen resolutions.

    With your code the Window size of the game keeps it's aspect ratio (in any resolution!!!) and at the same time if you set your game in Configuration Settings in the option "Fullscreen in browser" to "Scale outer" you will have a full screen rendered game in any resolution without changing the scale of your game and keeping the aspect of your originally design, whatever your default resolution is. This is an amazing workaround to this problem dealing with resolutions in NW.js exports, that what I was hoping for!!!

    loneDreamer hats off!!! I appreciate your help a lot and wish you the best!!!

    This method ignores as well the "Scale and layout" option of the windows display settings! Many pc users set this option to 125% or 150% in order to have bigger letters on their screen, but unfortunately this affects Construct NW.js exported projects to scale as well and breaks the design of the game. But with your magic code this is not a problem anymore!

  • Credit is due elsewhere, the code is not mine. I'm glad everything work out.

  • Credit is due elsewhere, the code is not mine. I'm glad everything work out.

    But you shared this code with the community and you took the time and effort to explain to me step by step how to implement the code..

    So I give all the credit and appreciation to you, for helping me out with this! Thanks again and wish you best of luck with your project!

  • loneDreamer

    Hey how are you?

    Do you have maybe an idea on how we can make the borderless windowed mode to be persistent?

    What I mean is that with this code on any mouse click or on clicking the windows button on keyboard, the fullscreen mode breaks and then it is never fullscreen again and reacts like it is on kiosk mode.

    Is there any change we can set this to be always on windowed fullscreen even if a user hits the windows button?

  • I post further information about this in the following topic I created: construct.net/en/forum/game-development/distribution-and-publishing-26/publishing-game-pc-steam-156579

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • loneDreamer

    Hey how are you?

    Do you have maybe an idea on how we can make the borderless windowed mode to be persistent?

    What I mean is that with this code on any mouse click or on clicking the windows button on keyboard, the fullscreen mode breaks and then it is never fullscreen again and reacts like it is on kiosk mode.

    Is there any change we can set this to be always on windowed fullscreen even if a user hits the windows button?

    No sorry, can't help, I cannot replicate the issue by mouse clicking or using common keyboard keys.

    You should also know that it is not true full-screen, everything is still rendered behind the window, there's nothing we can do that I know of that can change it.

    As for the windows key, as far as I know you cannot stop windows from breaking full screen.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)