[Outdated] Exporting to .exe using node-webkit

This tutorial is out of date; you don't need to follow those steps, just pick the 'node-webkit' export option in Construct 2 and it will do everything automatically. This tutorial was posted before the support was built in.

Let's start

Let's start with downloading everything you need:

Node-webkit for windows

Nice. When the download is finished, unzip contents of the folder to your backup disk, so you have it for later, and then create a folder called "NodeWebkitTutorial", and then create a subfolder called "App".

Copy contents of the downloaded Node-webkit folder to your "App" folder.

And now we have everything set up for some serious bussiness.

Exporting your project

Let's open up Construct 2, and choose Space Blaster demo, so we don't loose time on clicking through Construct.

When the project is open, go to export project, and export it as a "HTML 5 website".

When asked for path to folder for exporting game, choose our "NodeWebkitTutorial" folder and export it there

Pheeewwwww, so much work... Let's take a break and open up our exported index.html file in your favorite text editor

Editing Index.html

Scroll to line 58:

And change it to

     <script src='jquery-1.7.1.min.js'>\x3C/script>

This will point Construct to fetch jquery file locally, and considerably speed up loading of our .exe file

Save the file, open a new file (Ctrl+n), and get ready for package.json

package.json

For successful export to the .exe you'll need a file called package.json.

Every app package should contain a manifest file named package.json, it will tell node-webkit how to open the app and control how the browser behaves. Package.json should be written in the format of JSON.

Minimal required fields in package.json are:

     "main": "index.html", 

-(string) which page should be opened when node-webkit starts.

    "name": "SpaceBlaster"

-(string) the name of the package. This must be a unique, lowercase alpha-numeric name without spaces. It may include "." or "_" or "-" characters. It is otherwise opaque. Name should be globally unique since node-webkit will store app's data under the directory named name.

But we will add some more to get into writing a good package.json

      "description": "Space Blaster exe export",

- a brief description of the package. By convention, the first sentence (up to the first ". ") should be usable as a package title in listings.

      "version": "0.1",

- a version string conforming to the Semantic Versioning requirements.

    "keywords": [ "Construct 2", "node-webkit", "Space Blaster" ],

- an Array of string keywords to assist users searching for the package in catalogs.

There are some features control fields you can add, like:

      "window": {
        "icon": "logo.png",
        "toolbar": false,
        "position": "center",
        "resizable": true
       }

etc. For the full detail info on how the package.json can look like, please refer to manifest format

Our final package.json should look like this (for your copy/paste pleasure)

    {
      "main": "index.html",
      "name": "SpaceBlaster",
      "keywords": [ "Construct 2", "node-webkit", "Space Blaster" ],
      "version": "0.1",
      "keywords": [ "demo", "node-webkit" ],
      "window": {
        "icon": "logo.png",
        "toolbar": false,
        "position": "center",
        "resizable": true
       }
    }

Save it as package.json to your node-webkit folder:

aaaaand we're done with notepad++. Great work!

Zipping, renaming

Let's zip our exported app and package.json to a .zip file called app.zip. Rename "app.zip" to "app.nw" using one of two methods:

____________________________

1. By default, file extensions may be hidden. You need to (press alt), go to folder options and uncheck "Hide extensions for known file types" to be able to rename the zip.

If this pops up, click yes:

2. Open CMD and go to your folder("cd path/to/NodeWebkitTutorial/folder") and type "ren app.zip app.nw"

____________________________

Once you renamed it, move app.nw file to app folder.

//Pro-tip if you want to try your exported game right away, just drag //the app.nw file onto nw.exe and enjoy

Command Prompt and finalizing

Open up Command Prompt (Click on start button, then type "cmd", it should show up)

type:

cd path/to/NodeWebkit/folder

cd App

When you are in your App folder, execute the following command:

    copy /b nw.exe+app.nw app.exe

It will "merge" app.nw and nw.exe to a new app.exe file

Aaaand congratulations, you just successfully exported a C2 project to .exe using node-webkit!

Wrapping it up

To distribute your app, just delete the nw.exe file, zip the contents of App folder and you're done!

Your final App folder should look like:

Final result

Additional info and sources

- If you export an app with "Fullscreen in browser" set to "off" in construct, exported index.html file will also contain following script:

     <script>
     // Issue a warning if trying to preview an exported project on disk.
     (function(){
          // Check for running exported on file protocol
          if (window.location.protocol.substr(0, 4) === "file")
          {
               alert("Exported games won't work until you upload them.");
          }
     })();
     </script>

Delete it. It will remove the annoying pop-up when you start your exe.

-Currently, there are three plugins to access possibilities of node-webkit

Node-webkit GUI plugin

Plugin provides acces to UI elements, clipboard and more

node-webkit node.js OS plugin

Plugin provides a few basic operating-system related utility functions using node.js OS module with node-webkit export.

Node-webkit Node.js PATH plugin

This plugin contains utilities for handling and transforming file paths.

NOTE: plugins are still in development, use them wisely!

- Use 7zip to zip files, you can set file extension regardless of compression method (saves you the file-renaming step)

- You can try to set "nodejs" to false in package.json

nodejs. It will disable node inside WebKit, if you're only using HTML5 to write apps, it could improve stability and performance.

- Forum thread on node-webkit and construct 2 here

That's it, have fun, enjoy and don't forget to drink water or walk around after heavy Construct 2 sessions!