Exporting desktop apps with NW.js

3

Stats

26,039 visits, 39,146 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 13 Nov, 2014. Last updated 24 Feb, 2019

Construct 2 can export your project as a traditional desktop app with NW.js, which is basically a standalone version of the Google Chrome browser. In other words it's very much like having your project run in Chrome, but without the user needing to have Chrome installed on their computer, and without the browser parts showing like the address bar so it looks like a native app. This tutorial covers some tips and tricks when using this export option.

NW.js exports Linux, Mac OS X and Windows desktop apps. Both 32-bit and 64-bit variants are available for Linux and Windows. OS X only provides a 64-bit build, since all modern Mac systems are already 64-bit.

Note NW.js was formerly known as node-webkit.

Installing NW.js support

Since the NW.js files covering all platforms take up a lot of space, from Construct 2 r187 and above NW.js support must be installed separately. To install NW.js support, visit scirra.com/nwjs for the free download. If you try to preview or export with NW.js without having installed NW.js support, you will be prompted to visit that page to get it. You don't need to restart Construct 2 after installing NW.js support, it should work as soon as the NW.js installer finishes.

Note from Construct 2 r217, only NW.js 0.13+ is supported. Correspondingly, versions r216 and older only support NW.js 0.12 and older.

NW.js specific features

Desktop apps have unique privileges not normally available from web apps, such as the ability to write files directly to disk. The NW.js object allows you to use such features. Remember however if you ever want to port your project to a different platform, none of the NW.js object features will work. You may need to disable some functionality or use other features instead. It may be easier to design your project to be portable from the start; for example Local Storage and savegames work on all platforms, whereas writing files to disk will only work with NW.js.

To run NW.js exports in fullscreen mode, as with other platforms use the Browser object's Request fullscreen action. You can use this action in On start of layout in NW.js whereas in web browsers it is normally ignored unless used in a user-input trigger such as On object clicked.

You can also test NW.js features in Construct 2's preview mode by setting the Preview browser project property to NW.js. This runs the 32-bit Windows version of NW.js - to test on other platforms you will need to export.

Export options

When exporting, you can choose the following options:

Window frame: display the operating system window caption and frame around the display.

Resizable window: allow the window to be resized. Note this is only useful if Window frame is enabled.

Kiosk mode: use a "kiosk" display mode, where the app runs in fullscreen and tries to prevent the user from leaving.

Publishing on Windows

When publishing Windows apps, NW.js only supports the faster and more powerful WebGL rendering mode if the latest DirectX runtime components are installed. The exported dxwebsetup.exe file installs these if they are not already present on a user's system. You should ensure this is installed on user's systems before running your project, for example by creating an installer for your game that runs the file as one of the installation steps. You can pass the /Q parameter to the dxwebsetup.exe installer to run in "quiet" mode (where it runs automatically without prompting the user). Note if the user does not have the latest DirectX runtime components installed, the game may fall back to a software-rendered canvas2d renderer and run with poor performance. If users still experience issues after installing dxwebsetup.exe, especially crashes, poor performance or graphical glitches, encourage them to update their graphics driver since many issues can arise from out-of-date drivers.

Publishing on OS X and Linux

The most common problem with publishing to OS X and Linux is the execute permission for the executable files. File permissions work slightly differently on Windows, and it generally recognises any file ending in .exe as something that can be run. On OS X and Linux, executable files have no special file extension, instead requiring an "executable" file permission to be set. Windows is not usually aware of this, so if you copy files from Windows to an OS X or Linux system, the files may not have execute permission and therefore fail to run.

On Linux, the following command enables execute permission for the file 'mygame'. Run this from the terminal to ensure the file can be run:

chmod a+x mygame

On Mac OS X, there are actually several files inside the app package that need to be executable. The easiest way to preserve the permissions is to copy the exported project using OS X instead of Windows. If you network a Windows and OS X machine together, log in to Windows, and copy the files to the OS X system, it isn't aware of the file permissions and can lose the execute permission, causing the resulting app to fail to run on OS X. However if you log in to OS X and copy the files from the Windows system, it preserves the permissions and should produce an app that can run.

Conclusion

Using NW.js you can publish desktop apps for the leading three desktop operating systems with integrated features like disk access and fullscreen display. However remember that users should run dxwebsetup.exe on Windows, and that it is easy to lose execute permission if copying from Windows to a different OS.

  • 7 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • how do we disable the F12 dev mode ???

    • Just make a "on F12 pressed" event that does something else but that's far from foolproof since for example it'll still work if you have anything selected such as a textbox or button object(and even if it did you can still use right click and inspect on those things). But that's probably still good enough to prevent someone accidentally figuring out that they can do that.

      • [-] [+]
      • 1
      • Ashley's avatar
      • Ashley
      • Construct Team Founder
      • 1 points
      • (2 children)

      Why do you want to?

  • The amount of files created by exporting with nw.js is just confusing and I don't know what I'm meant to do from here. Found a lot of tutorials online for publishing nw.js games but it seems like a lot of the steps they do are already handled by C3. All I wanna do is make my game into an executable file that they can run dang it! How do I do this?

  • the game can be update a new data from browser plugin exported in NW.js?