https://nassimsoftware.com/convert-web-games-to-desktop
Home
The simplest way to convert your web game into a desktop app
Nassim
2022-11-13
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.
NeutralinoJs sample app
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 Voila!
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.
Powered by Deno Blog RSS