[UPDATED: 02.05.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
  • Better Way To Modify "Chromium-Args"
3. Bugfixes & Workarounds
  • How To: Set Your Own Application Icon
  • How To: Fix Steam Not Uninstalling Files Correctly (Uninstall Script Method)
  • How To: Workaround Recording Issues & Canvas Flickering (NW.js v0.14.0rc1 - v0.19.0)
  • How To: Fix Unusual NW.js MacOSX Exporting Size
  • How To: Workaround Steam Overlay Not Appearing
  • How To: Speed Up The Startup Of Your Game By Up To 20%
  • How To: Workaround Steam Overlay Issues With Letterbox Scaling
Image
4. Custom Features & Debugging Tools
  • How To: Hide/Prevent Chrome Devtools For The End-User
  • How To: Test Your Game On Higher Frame Rates Than 60FPS
  • How To: Use The Built-in NW.js FPS Counter
  • How To: Secure/Hide Your Game Assets (Package.nw)
  • How To: Modify/Remove Right-Click Context Menus
Image
5. 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.

> Better Way To Modify "Chromium-Args"
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.

Image
> 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 known APIs that could make the process easier.
Currently the only way to change the application icon is through the use of 3rd party software/websites.

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: Fix Steam Not Uninstalling Files Correctly (Uninstall Script Method)
There is a known issue where uninstalling your C2 game using Steam is not working correctly.
In order to get this issue fixed, steam dev's are required to upload an "uninstall batch".
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 (NW.js v0.14.0rc1 - v0.19.0)
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
There is a known bug which prevents the Steam overlay from appearing.
If you are using the Greenworks plugin provided by Scirra, there is a workaround
for this issue by simply adding the chromium-arg from below.
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 --ignore-gpu-blacklist --in-process-gpu to the "chromium-args" properties.

> How To: Speed Up The Startup 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 us quickly improve it.

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: 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 refreshed at all.
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, a well-known JS dev that goes by the name of BackendFreak
decided to investigate the problem and provide us a simple workaround found below.
Image The Steam4C2 plugin will have this workaround included in the future releases. Image

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

Image
> 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 Frame Rates Than 60FPS
All games made with C2 have v-sync on by default, what v-sync basically does is that it synchronizes
your FPS 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 while your C2 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 frame rate, 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 FPS 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(s), 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 the link.

Please note that your game might take a little longer to startup,
how you set your priorities (Secured Assets or Faster Startup) is up to you.
This method also doesn't make your game 100% "unhackable" but it's still better
to hide your assets instead of having them open for grabs right?

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
Image

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 Tue May 02, 2017 7:57 am, edited 85 times in total.
ImageImageImageImage
B
56
S
21
G
77
Posts: 636
Reputation: 43,961

Post » Wed Nov 23, 2016 3:52 pm

Great job. I'm sure I'll be visiting this thread often ;)
B
41
S
11
G
1
Posts: 260
Reputation: 3,266

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
129
S
33
G
17
Posts: 1,552
Reputation: 20,515

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
ImageImage
B
27
S
16
G
68
Posts: 940
Reputation: 38,589

Post » Wed Nov 23, 2016 8:09 pm

So the single process thing was resolved, too?
B
72
S
28
G
32
Posts: 477
Reputation: 19,640

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
ImageImage
B
27
S
16
G
68
Posts: 940
Reputation: 38,589

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
72
S
28
G
32
Posts: 477
Reputation: 19,640

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
41
S
19
G
65
Posts: 1,085
Reputation: 37,842

Post » Wed Nov 23, 2016 10:49 pm

@Prominent

I must say I never had a problem using Madspy's Steam plugin.
B
72
S
28
G
32
Posts: 477
Reputation: 19,640

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
41
S
19
G
65
Posts: 1,085
Reputation: 37,842

Next

Return to Construct 2 General

Who is online

Users browsing this forum: No registered users and 6 guests