[UPDATED: 11.12.2017] The Big NW.js Roundup - Tips & Tricks

Discussion and feedback on Construct 2

Post » Wed Nov 23, 2016 3:19 pm

Image

Image
Hi, my name is TheRealDannyyy and I've decided to create this topic in order to keep
track of the latest changes, bugs and workarounds for C2's desktop exporting method.

This list will be updated frequently and updates are mainly based on community feedback.
Everybody can feel free to comment their findings below or provide a link to their own topic.

Image
1. Getting Started
  • Installing & Updating
  • The Use Of Custom Builds
2. Main Structure
  • Important Files & Paths
  • How To: Modify The Package Manifest Files
  • How To: Add Chromium-Args & Js-flags
3. Bugfixes & Workarounds
  • How To: Fix Steam Not Uninstalling Files Correctly
  • How To: Workaround Recording Issues & Canvas Flickering
  • How To: Fix Unusual NW.js MacOSX Exporting Size
  • How To: Workaround Steam Overlay Not Appearing (Constant Refresh)
  • How To: Workaround Steam Overlay Not Appearing (In-Process)
  • How To: Workaround Steam Overlay Issues With Letterbox Scaling
  • How To: Open Multiple NW.js Preview Windows
Image
4. Custom Features & Debugging Tools
  • How To: Speed Up The Startup Time Of Your Game By Up To 20%
  • How To: Set Your Own Application Icon
  • How To: Hide/Prevent Chrome Devtools For The End-User
  • How To: Test Your Game On Higher Framerates Than 60FPS
  • How To: Use The Built-in NW.js FPS Counter
  • How To: Secure/Hide Your Game Assets
  • How To: Modify/Remove Right-Click Context Menus
  • How To: Force GC To Instantly Unload Audio From Memory
Image
5. NW.js Bugreports (Github)
  • NW.js Window Size Bug
  • NW.js [v0.14.0rc1 - v0.19.0] Critical Screen Flickering Bug
  • NW.js [v0.22.0 - v0.26.6] "--in-process-gpu" Causes Severe Problems With Application Instancing
  • NW.js Mouse Pointer Problem When Right-Clicking
  • NW.js Regression in 0.27 user agent handling breaks Construct 2 content
6. References & Helpful Links

Image
> Installing & Updating
Since Construct 2's r187 update, all NWjs related files can be downloaded from THIS place.
The installer will do the job for you and install all the necessary files and runtime components you need.

> The Use Of Custom Builds
If you don't want to wait for the latest installer or would like to test out the latest beta (nightly)
build of NWjs, you also have the option to visit THIS webpage and do everything by yourself.
This method is for advanced users only since it requires some knowledge about build types (Normal/SDK)
and you also have to do all the folder management by yourself, which can sometimes be a bit challenging.

Image
> Important Files & Paths
The following is a list of all files and paths that you will surely have to visit
at some point while working with C2 and NWjs exporting (based on standard paths).

NWjsForC2 Source Folder (C:\Program Files\NWjsForC2)
Here you can find all the base files that C2 uses for the export.
(This is also the path where you have to paste in the custom builds.)

C2 Folder For NWjs Files (...\Construct2\Construct2-Win...\exporters\html5\nwjs)
This path holds important ".json" files and usually 2 folders "win32" and "win64" with images inside.

"package.json" & "package-win.json" (...\Construct2\Construct2-Win...\exporters\html5\nwjs)
These json files (also called manifest) contain important commands that the exported version of NW.js
can make use of. It's recommened not to add any debugging related "Chromium-Args" in those files.

"package-preview.json" (...\Construct2\Construct2-Win...\exporters\html5\nwjs)
This json manifest for NW.js is only being used while previewing your games inside Construct 2.
It's recommended to add all the debugging related "Chromium-Args" in this file only.

> How To: Modify The Package Manifest Files
Modifying or adding chromium args is a thing that every NWjs user has to learn and do at some point.
The most common misconception is that you're required to do it manually for each export but that's not the case!
Since C2 is copying over the package.json file(s), it's actually easier to just edit the source files.
These files can be found inside C2's Folder For NWjs Files.

> How To: Add Chromium-Args & JS-Flags
The majority of features or bugfixes found in this topic will require chromium-args or js-flags to
be manually added to the package manifest files. Below you will find examples on how to do it right.
(If you would like to "reset" everything back to default, HERE are all files as they come with Construct 2.)

Image
  1. Open the "package.json" file(s)
  2. Find the "chromium-args" property (Screenshot)
  3. Add a Chromium-Arg at the correct place with 1 empty space in between other args (Screenshot)

Image
  1. Open the "package.json" file(s)
  2. Find the "js-flags" property, manually add it if it's not available (Screenshot)
  3. Add a JS-Flag at the correct place with 1 empty space in between other flags (Screenshot)

Image
> How To: Fix Steam Not Uninstalling Files Correctly
There is a known issue where uninstalling your game using Steam is not working correctly.
In order to get this issue fixed, Steam dev's are required to upload an "uninstall" batch file.
Image The script also removes your localstorage data! Image

Image
  1. Create a .bat file using a text editor (e.g. "clearfiles.bat")
  2. Paste in the following code (replace "GameName" with your game's name): RMDIR /S /Q "%LocalAppData%\GameName\User Data\"
  3. Run the file while uninstalling (Steamworks -> Making and using Install Scripts -> Run Process on Uninstall)

> How To: Workaround Recording Issues & Canvas Flickering
There have been recent reports about Youtuber's having problems to record the game canvas
and also a critical issue were the canvas would flicker black for some users.
This workaround will fix canvas flickering for the specific NW.js versions mentioned below.
The majority of recording issues should also be fixed by using this workaround, if they're related to the flickering bug.
Image Fixed for all NW.js versions starting from 0.19.1, use only for NW.js versions from 0.14.0rc1 to v0.19.0! Image

Image
  1. Open the "package.json" file(s)
  2. Add --disable-direct-composition to the "chromium-args" properties

> How To: Fix Unusual NW.js MacOSX Exporting Size
Old versions of the NW.js installer had an issue were they would not completely
remove the MacOSX source folder and as a result bloat the exporting size by up to 1.65gb.
It's recommended to make sure that the resource folder always has the correct size.

Image
  1. Check the size of the NWjsForC2 Source Folder (about ~700mb)
  2. Delete the NWjsForC2 Source Folder if required
  3. Launch the installer and proceed as usual

> How To: Workaround Steam Overlay Not Appearing (Constant Refresh)
There is a known bug which prevents the Steam Overlay from appearing.
One of the main causes for this could be that your game's canvas is not refreshing itself.
The Steam Overlay requires a constantly refreshing canvas, any type of movement will trigger a refresh.
Image This is an optional workaround and most games probably won't require this at all. Image

Image
  1. Add a small 2x2 sprite into one of your layouts (e.g. loader layout)
  2. Add a movement behavior like rotate, set the opacity to 0% and make it global

> How To: Workaround Steam Overlay Not Appearing (In-Process)
If you experience any issues with the Steam Overlay or Steam exclusive features,
these issues might be caused by the lack of a specific chromium-arg in your game.
This chromium-arg let's you run the GPU process as a thread in the browser process.
Image Steam4C2 users, please read the "Quick_Start.pdf" first before doing these steps! Image

Image
  1. Open the "package.json" file(s)
  2. Add --in-process-gpu to the "chromium-args" properties

> How To: Workaround Steam Overlay Issues With Letterbox Scaling
Steam developers have recently noticed that the Steam Overlay is having issues,
when used in combination with letterbox scaling or letterbox integer scaling.

The issue itself is related to the black bars, which are not getting updated/refreshed.
Since the Steam Overlay requires a constant refresh of the canvas in order to work,
it wasn't able to detect those black bars and totally glitched out for some users.

In order to workaround these issues, the well-known JS developer @BackendFreak
and I decided to investigate the problem and provide dev's the workaround found below.
Image The Steam4C2 plugin will have this workaround included in future releases. Image

Image
  1. Download and install THIS plugin
  2. Set the events up based on your Steam plugin (Example HERE)

> How To: Open Multiple NW.js Preview Windows
Ancient versions of NW.js supported a chromium-arg to enable multiple instances.
This feature got depreciated quite a while ago and single instancing is forced now.
We now need a fairly simple workaround in order to preview with multiple instances.
Image WARNING: There are known issues and you might experience unexpected behavior. Image

Image
  1. Add the Browser and Keyboard plugins
  2. Add the condition on button pressed
  3. Add the execute javascript action and execute this code:
    Code: Select all
    "window.open('" & Browser.URL & "');"
  4. Open as many windows as you like by pressing the selected button
Image

Image
> How To: Speed Up The Startup Time Of Your Game By Up To 20%
Does your game take forever to startup? If that is the case, then this method will
surely help you out with that. As you might already know, the "package.nw" file
found inside your exported game folder contains all your assets, basically your whole game.

The special part about the "package.nw" file is that it is not special at all, it's just a zip file
that NW.js has to unzip each time when you start your game up and depending on the size
of your package.nw file this can take a really long time, so let's quickly change that.

Image
  1. Go to your exported Win32/Win64 folder(s)
  2. Rename "package.nw" to "package.zip" and unzip it
  3. Rename the unzipped folder to "package.nw" (also remember to get rid of the old files)

> How To: Set Your Own Application Icon
Changing the application icon is harder than you might think. The ancient format used for the icon (.ICO) goes back
to the days of Windows 3.1 and so far there are no plans for C2 to support editing these types of files automatically.
Image More recent versions of NW.js automatically use and apply the "icon-128.png" file, found inside your project. Image

Image
  1. ~ Windows Only ~
  2. Start ResHack
  3. Open the nw.exe file(s)
  4. Go to "Action" and then "Replace Icon"
  5. Select and replace the application icon(s)
  1. ~ MacOSX Only ~
  2. Go to THIS webpage
  3. Select and upload your icon (PNG format)
  4. Convert and receive your new icon (ICNS format)
  5. Paste your new icon into *.app/Contents/Resources

> How To: Hide/Prevent Chrome Devtools For The End-User
The Chrome Devtools are very useful for developers but they also make it possible for "evil" people to see
and take advantage of game related debug information, in the worst case they could even execute code
to change gameplay mechanics.

Image
  • Install the custom "Normal" build from the NWjs downloads webpage (completly removes devtools)
  • Add --disable-devtools to the "chromium-args" properties (prevents the most ways to access the devtools)

> How To: Test Your Game On Higher Framerates Than 60FPS
All games made with C2 have v-sync on by default, what v-sync basically does is that it synchronizes
your framerate with your monitor's refresh rate. The purpose of this is to eliminate something called "screen-tearing".

While the most monitors run at 60hz (~60fps), there is also a steady growth of monitors which run at 144hz (~144fps).
This means that even if your game runs fine at 60fps on your end, there might be users that run your game
at 144fps with bugs/glitches and generally unexpected behavior on their ends.
To compensate higher frame rates you should always work with dt (delta-time) in your eventing!

Now we come to the part that might be interesting to you and that's how to test your game
with a higher framerate, regardless of your monitor's refresh rate.
All we have to do to achieve that, is to simply disable v-sync.

Image
  1. Open the "package.json" file(s)
  2. Add --disable-gpu-vsync to the "chromium-args" properties

> How To: Use The Built-in NW.js FPS Counter
If you are looking for an easy and not performance heavy method
to measure the framerate of your game, this might be the solution for you.
NW.js has a built-in, realtime FPS counter that we can simply turn on by using a chromium-arg.
Image The FPS counter might not work in combination with "--disable-gpu-vsync"! Image

Image
  1. Open the "package.json" file(s)
  2. Add --show-fps-counter to the "chromium-args" properties

> How To: Secure/Hide Your Game Assets (Package.nw)
Windows + NW.js have a nice feature which basically allows you to merge your "nw.exe" file(s)
with the equal "package.nw" file, so that it is hidden for the end-user.

I wrote a small batch script in order to do this, if you don't trust me and want to setup
an executable batch file by yourself, feel free to click this link.
Image Please note that your game might take a little longer to startup. Image

Image
  1. DOWNLOAD and unzip the files (NW.js Secure Assets.bat & Readme.txt)
  2. Move "NW.js Secure Assets.bat" into your exported Win32/Win64 game folder(s)
  3. Execute "NW.js Secure Assets.bat" once and it will tell you when everything is done
  4. You will notice that your "nw.exe" file is bigger now (feel free to get rid of the "package.nw" file now)
  5. Now your game will run as usual and all your assets are hidden inside the "nw.exe"

> How To: Modify/Remove Right-Click Context Menus
If you are working with text boxes, you surely noticed by now that they offer a right-click menu.
Especially in video games, a right click menu could potentially ruin the immersion of the game.
Below you will find two options to deal with the right-click context menus.

Image
  1. ~ Completly Remove It ~
  2. Add the browser plugin to your project
  3. Select an event which only triggers once (e.g. inside the loader layout)
  4. Add the browser action "execute javascript"
  5. Execute the following code:
    Code: Select all
    "document.addEventListener('contextmenu', function(e){e.preventDefault();}, false);"
  1. ~ Leave Cut, Copy, Paste ~
  2. Add the browser plugin to your project
  3. Select an event which only triggers once (e.g. inside the loader layout)
  4. Add the browser action "execute javascript"
  5. Execute the following code:
    Code: Select all
    "var gui=require('nw.gui'),menu=new gui.Menu;menu.append(new gui.MenuItem({label:'Cut',click:function(){document.execCommand('cut')}})),menu.append(new gui.MenuItem({label:'Copy',click:function(){document.execCommand('copy')}})),menu.append(new gui.MenuItem({label:'Paste',click:function(){document.execCommand('paste')}})),document.addEventListener('contextmenu',function(a){a.preventDefault(),(a.target instanceof HTMLInputElement||a.target instanceof HTMLTextAreaElement||a.target.isContentEditable)&&menu.popup(a.x,a.y)});"
    Code By @Colludium

> How To: Force GC To Instantly Unload Audio From Memory
Browsers are using Garbage Collection (GC) in order to determine which files can be released from memory.
The problem with GC and web-based games is that we have no control over this process.
This basically means that GC can do the unloading work whenever it wants to and this can lead to
massive problems, to the point where your game could crash because GC didn't do the work fast enough.

In order to prevent this from happening, we can "expose" GC and manually force GC to do the work immediately.
(HERE is an example, if you would like to test it out by yourself first.)

Image
  1. Open the "package.json" file(s)
  2. Add --expose-gc to the "js-flags" properties
  3. Execute the following JS code using the browser plugin
    Code: Select all
    "global.gc();"
Image

Image
NW.js Window Size Bug
> https://github.com/nwjs/nw.js/issues/5337
NW.js [v0.14.0rc1 - v0.19.0] Critical Screen Flickering Bug
> https://github.com/nwjs/nw.js/issues/5477
NW.js [v0.22.0 - v0.26.6] "--in-process-gpu" Causes Severe Problems With Application Instancing
> https://github.com/nwjs/nw.js/issues/6059
NW.js Mouse Pointer Problem When Right-Clicking
> https://github.com/nwjs/nw.js/issues/5851
NW.js Regression in 0.27 user agent handling breaks Construct 2 content
> https://github.com/nwjs/nw.js/issues/6321

Image
https://www.scirra.com/blog/ashley/30/y ... -sizes-now
https://www.scirra.com/tutorials/1276/e ... ode-webkit
https://www.scirra.com/tutorials/67/del ... dependence
https://www.scirra.com/nwjs
https://nwjs.io/downloads/
http://docs.nwjs.io/en/latest/For%20Use ... e-your-app
https://www.scirra.com/store/construct2 ... am4c2-2545
https://en.wikipedia.org/wiki/Analog_te ... ronization
experimental-greenworks-plugin_t117833
developers-who-ever-published-on-steam-hear-ye-hear-ye_t181752?start=30
change-the-node-webkit-icon_t77740?start=10
viewtopic.php?f=152&t=180550
screen-flashing-with-nwjs-audio-related_t181268
recording-gameplay-issue-nwjs-youtubers_t183440
viewtopic.php?f=146&t=181578
Last edited by TheRealDannyyy on Mon Dec 11, 2017 7:18 pm, edited 113 times in total.
ImageImageImage
B
69
S
24
G
78
Posts: 695
Reputation: 45,332

Post » Wed Nov 23, 2016 3:52 pm

Great job. I'm sure I'll be visiting this thread often ;)
B
45
S
13
G
3
Posts: 276
Reputation: 4,598

Post » Wed Nov 23, 2016 4:29 pm

Great post. If you'd make a tutorial of it I think more users would find it.

Edit: In my humble opinion, the workarounds should be included in the manual. @Ashley I think it's important to keep the manual up to date with information like this to inform the developers about how they can make their game working in certain situations. I don't think that it's a good practice to have them dig through forum topics or find tutorials for things that they think should work out of the box. What do you think?
B
137
S
33
G
17
Posts: 1,560
Reputation: 20,797

Post » Wed Nov 23, 2016 7:25 pm

There are two more things worth to mention.

1. You should remove the current version of the NW.js you have currently installed before installing the new one. Otherwise your OSX export size will be huge. Some more info here: viewtopic.php?f=146&t=181578

2. Changing the Mac icon.
a) convert your PNG to ICNS (here for example: https://iconverticons.com/online/)
b) copy ICNS file to [yourGameName].app/Contents/Resources
ImageImageImage
B
32
S
19
G
82
Posts: 1,039
Reputation: 46,232

Post » Wed Nov 23, 2016 8:09 pm

So the single process thing was resolved, too?
B
79
S
29
G
32
Posts: 482
Reputation: 19,915

Post » Wed Nov 23, 2016 8:32 pm

Eisenhans wrote:So the single process thing was resolved, too?


If you mean the issue with screen recording and/or screen flickering, it was not about multi processing, but yes it is resolved. Please see this post for more details: screen-flashing-with-nwjs-audio-related_p1081822?#p1081822
ImageImageImage
B
32
S
19
G
82
Posts: 1,039
Reputation: 46,232

Post » Wed Nov 23, 2016 8:58 pm

@BackendFreak

Yes, this means that "--in-process-gpu" is off the table and not needed anymore?

Btw: thanks for taking the heroic effort and putting up with all the bug reports. We were really in a tight spot with these NW.js shenanigans and now we seem to approach a point where stuff is actually usable for mass deployment again.
B
79
S
29
G
32
Posts: 482
Reputation: 19,915

Post » Wed Nov 23, 2016 10:47 pm

--in-process-gpu is needed for greenworks to work though, as far as I'm aware, however I've never been able to get greenworks to work.
B
48
S
23
G
66
Posts: 1,144
Reputation: 39,059

Post » Wed Nov 23, 2016 10:49 pm

@Prominent

I must say I never had a problem using Madspy's Steam plugin.
B
79
S
29
G
32
Posts: 482
Reputation: 19,915

Post » Wed Nov 23, 2016 10:51 pm

Eisenhans wrote:@Prominent

I must say I never had a problem using Madspy's Steam plugin.


Did you try the experimental greenworks version prior to using madspy's, did you have problems with that one?
B
48
S
23
G
66
Posts: 1,144
Reputation: 39,059

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 12 guests