Home

The simplest way to convert your web game into a desktop app

Nassim

Making games in JavaScript is often very simple (Assuming you don't use web bundlers). However, packaging those games into desktop apps you can sell is quite complicated.

The options you have are usually Electron, Tauri and NW.js. The simplest way I've found to convert my web games to a desktop app available on all three platforms (Windows, MacOS and Linux) is to use Neutralino.js.

thumbnail

Why?

What Neutralino does is to simply use the default web view of your OS instead of shipping a whole chrome browser with your game. The latter is what Electron does. I think Tauri does something similar to Neutralino but is more difficult to set up.

If you're making a desktop app Electron's approach might make sense because you want your HTML/CSS to render in the exact same way regardless of the OS. Different browsers might render HTML/CSS differently in some cases. However, for a game which basically uses the canvas element there shouldn't be an issue. As far as I'm concerned the canvas renders the same way regardless of the underlying browser engine.

Another advantage of Neutralino is that it doesn't use the npm ecosystem. This might sound bad for desktop apps where you need access to certain libraries but again with a web game you just need the canvas. So, you don't really need the bloat that comes with the npm ecosystem.

In conclusion Neutralino is a good choice because it's easy.

How to install Neutralino

This might sound ironic but to install Neutralino you need to have node and npm installed. That's basically the only time you'll have to do an npm command.

The guide to install Neutralino can be found here. Follow step 0 and 1 before reading the next section of this post.

You should have the following directory structure in your project : 

- .github
- bin
- resources
    |_icons
    |_js
    |_index.html
    |_styles.css
- .gitignore
- LICENSE
- neutralino.config.json
- neeutralinojs.log
- README.md

The most important folder here is the resources folder which contains your assets but also your js code for your game. You should probably create an assets folder here and put your sprites there. The code itself should be put in the js folder.

How to setup Neutralino for your game

Let's assume that we want to make our game using p5.js a well know JS graphics library. I would first download the js file for this library from the official website here and drop the file within the js folder.

The next step would be to simply include the js file in index.html in the same way you would when developing a website.

Here is how my index.html looks like. You should declare the script tags in your code using the same order.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>NeutralinoJs sample app</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <script src="js/neutralino.js"></script>
    <script src="js/p5.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

Here we're going to use the main.js file which normally already exists when creating the project to write our game's code. Replace the content of this file with the following:

Neutralino.init();

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(100);
  ellipse(100, 100, 80, 80);
}

async function mousePressed() {
  await Neutralino.window.setFullScreen();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Neutralino (defined in js/neutralino.js) is what allows you to access native functionality like making the app window fullscreen, write data to storage and so one. Here we simply make the game fullscreen when you click anywhere on the canvas.

This isn't going to work at the moment. To fix this you need to go to neutralino.config.json and add "window.*" in the "nativeAllowList" array which determines what permissions your app has. While you're there set "exitProcessOnClose" to true so that you can close the app using the close button.

Now run the app using the neu run command. You should obtain the following : screenshot of the desktop app

You probably already notice a couple of issues that makes our app look unprofessional. The first one being the appearance of ugly scroll bars and the fact that there is some space between the canvas and the rest of the app container.

Finally, we can see that we have a dev console. While useful in development we definitely don't want this to appear when our players open our game.

To remove it simply go back to neutralino.config.json and set "enableInspector" to false.

To fix the issue with scroll bars and weird spacing just replace the content of the already existing styles.css file with the following :

body {
  overflow: hidden;
}

canvas {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

Now close the app if you didn't do this already and rerun the command neu run and Voilà!

screenshot of the desktop app

Finally you can do neu build --release to build executables for Windows/MacOS/Linux. Once done building you can find them in the newly generated dist folder.

Conclusion

By using Neutralino we have a very simple way of wrapping a web game as a desktop app. You can now more easily sell your creations.

If you want to learn more about how to use Neutralino you can read the documentation here.

I you want to share feedback or have comments shoot me an email at nassimslab1 at gmail dot com.