.png)
3 days ago
2
In a previous post, I tackled the various options one could use to make their web games playable offline as installable desktop apps. This would enable using web technologies to make games that could be sold on a platform like Steam.
I also mentioned that the options available could be divided into two broad categories. Those who packaged a web engine with the executable and those who instead, used the default one available on the user’s system.
I concluded, that the first category of options led to a more reliable experience because the same web engine was used on all operating systems. This however, led to more memory and storage usage making the resulting executables bloated.
This was the case for Electron and NW.js which packaged a specific Chromium instance alongside the app. An empty project could easily exceed 100 MB in size.
The second category led to more lean executables but required the dev to test on all operating systems as there could be differences in how the game was rendered since each used a different underlying web engine.
Examples that fit in this category are Tauri, Neutralino and Wails.
Finally, I concluded that the easiest option was to use NW.js since it was like Electron but easier to set up and that the bloated nature of this solution was not a big problem considering that it was expected for games to use more resources than normal apps.
However, I recently discovered a new tool called GemShell which allows you to export for all 3 platforms in what amounts to one click!
In this post, I’d like to present it.
GemShell is available on itch.io under two versions. The Lite version which is free and the Pro version which is paid.
Let’s go over the Lite version first.
When you open the app, you’re first greeted with a section where you can provide the folder of your game’s build.
For example, if you’re using a build tool like Vite, what you need to provide is the dist folder that is generated after running the command npm run build. Otherwise, if you’re not using a build tool, your web export is essentially your source code.
Once the relevant folder is provided. You can go to the next section where you’ll be able to configure your game’s metadata like its title, window dimensions, author, whenever you want the window to be resizable, etc…
Once the metadata is configured, you can choose for which platforms you want to build executables.
Finally, you can reach the last section where you can build executables in one click.
Once building is completed, you can either launch the build for your current operating system or open the folder containing all the generated builds.
GemShell will put all the builds relevant to your game in a folder called GemShell-Builds which will be created in the Desktop directory of your computer (if it doesn’t already exist).
Since the developer of GemShell provided me with a pro version of the software, I can show you what it contains compared to the lite version.
First, you now have the ability to set an icon for your executables other than the default using any image you want. However, the app recommends using a 1024x1024 png image.
Second, you can toggle off the splash screen that appears before your game starts.
Other pro features include :
Performance Mode : Which claims to add a 15-40% FPS boost for 3D games. Since I only make 2D games and know almost nothing when it comes to 3D, I didn’t see a difference with/without this option toggled.
Asset compression : As the name implies, it compresses your assets. I have tested this feature on a small pixel art based game I was working on and didn’t notice a difference between the Pro and Lite build. They both clocked in at 5.4 MB which is already incredibly lean. I assume that this would come in handy when using bigger assets.
Code Minification : This compresses the code. However, build tools like Vite already do minifcation when making your web build. I assume this feature is useful for projects not relying on NPM and build tools.
Preload Critical Assets : Claims to increase game start speed by 30-50% by downloading big files in parallel. I think this feature is mostly targeted to devs making muliplayer games where the desktop app is a client of some sort. Personally, I have not noticed a difference but remember that the games I make use pixel art based assets which are usually small in size. I would also like to note that regardless of if you use the Lite or Pro version, they both load extremely quickly when I tested them. The only difference is due to the splash screen taking 2 seconds before the game actually starts which is near instantaneous.
Finally, a feature for detecting duplicate assets and removing console.log statements.
While not available yet, there seems to be security features planned for future updates.
One of the main reasons someone might want to package their web game as a desktop app is to have the ability to save user data permanently and reliably. This would allow a player to save their progress and play again later.
Instead of writing data to an external file, you can simply use localStorage or IndexedDB. GemShell uses a hidden ID file set in your initial game’s folder. Therefore, data is not lost when updating your game’s build. An existing player can carry over their progress from one version to the next.
If you’re interested in this tool, I recommend trying the Lite version with some of your projects to see if it fits your needs. In addition, if you have issues or would like certain features to be added, the dev has a Discord server where you can provide feedback.
GemShell : https://l0om.itch.io/gemshell
GemShell’s Discord server : https://discord.gg/b24q5B8ZAY
Now you might be wondering if I still recommend using NW.js or do I now recommend switching to GemShell?
It’s undeniable that GemShell is extremely convenient compared to the setup needed for NW.js which itself was simpler compared to other alternatives I explored in the previous post.
If we were to only consider how quickly you could make builds for desktop platforms, GemShell takes the cake.
However, it’s important to consider that GemShell is built upon Neutralino, a technology that uses the system’s webview to render the game. The web engine used is different on each operating system, therefore, you don’t have a guarantee that things will render the same way and perform the same way on all three platforms.
This isn’t a theoretical problem. Let’s consider the KAPLAY library, the one I’m using to make most of my games. It turns out that this library doesn’t run as well on Safari. Since Safari uses the default web engine available on Mac called Webkit, this means that the Mac version of my game built with GemShell will perform significantly worse than on Windows which uses a Chromium based web engine name Edge.
On one hand KAPLAY is known to not be the most performant web game framework, but Webkit is also weaker for canvas based apps compared to Chromium.
This led me to stick with NW.js for my current project since it packages a Chromium instance with the build. I can rest assured that the game will have the same performance on all three major operating systems.
This wouldn’t have been a major issue if I had used a more performant framework like Phaser or a rendering library like Pixi.js.
While not mandatory, if you want to put your game on Steam, you might want to integrate features like Steam achievements.
To achieve this with NW.js, you can use the steamworks.js node package since NW.js gives you access to a Node based environment.
As for GemShell there isn’t a straightforward way to achieve this, at least, currently.
To conclude, if you want :
an extremely convenient way of packaging web games as desktop apps.
builds that are very lean and start up quickly.
but :
don’t really care if there are differences in rendering and performance between platforms.
are using a framework/library that is know to work well under all major web engines (Chromium, Gecko, Webkit, WebkitGTK).
don’t care about integrating with the Steam SDK to implement features like Steam achievements.
pick GemShell.
However,
If you want :
to be sure that the game renders and performs the same way across platforms or/and are using a game framework that perform noticeably worse on web engines used as default webviews of some operating systems.
to integrate with the Steam SDK to implement Steam achievements in your game.
but :
don’t care if the builds take more storage and consume more memory compared to leaner alternatives.
don’t mind taking the time to do some setup work before being able to generate builds.
pick NW.js
Speaking of NW.js, I have a 1-hour long course on Patreon you can purchase that teaches :
How to use Vite and NW.js together, so that you can develop for the web (therefore benefiting from hot reloading) while still being able to build an executable that will work as is. We can achieve this by using Vite’s environment variables allowing us to gate code which will run in the desktop version exclusively. This is useful when it comes to writing and reading files from/to the disk which is code that should run only in the desktop version.
How to use NW-Builder to create a script to build executables programmatically rather than having to manually download binaries from the NW.js website.
How to make a space shooter game using KAPLAY.
If you’re interested, check it out here.
If you enjoyed this post and want more like it, I recommend subscribing so you won’t miss out on future publications.
You Can Now Make PS2 Games in JavaScript
I recently discovered that you could make PS2 games in JavaScript. I’m not even kidding, it’s actually possible. I was working on a project and had my phone near my desk when I received a notification. Upon further inspection, it came from itch.io which was a platform where I usually published most of my web games.
