libGDX is a great gaming framework, and it can deploy to Android, iOS, HTML5 and Desktop. While the deployment to Android is pretty straightforward and deploying to iOS with RoboVM does also work very well (after avoiding some pitfalls), the two other platforms have some quirks.

For HTML5, there are mainly two problems:

HTML5 is meant to be ran in a Web browser, by design an environment without many priviledges. That means, you can’t access the file system or network sockets. GWT is used to compile the Java sources to JS. Anything not GWT compatible will not be compiled. That mostly concerns things like cryptography or compression.

You can’t avoid problem 1, while there are often ways to work around problem 2.

For Desktop, I faced the following problems:

The underlying Lwjgl platform that libGDX uses has some bugs of its own. You can use two different main versions with libGDX: Lwjgl2 and Lwjgl3. I found that neither of these work flawlessly for me with different bugs on different operating systems. Some features like controllers are not supported in core Java. You need extensions to use it and their associated natives. If there is no pre-built library for Java to access the feature you want, the only way is to write native code yourself, if you are able to. If not, and if there are bugs in the native code, you are lost. As with Lwjgl, some bugs are only present on Linux, some only on Windows and so on. If you want to deploy your game to your users, you can run desktop:dist giving you a jar file. However, no one wants to have a jar nowadays. You have to bundle a JVM with your game, and the overall process seems to be a bit hacky. Here’s a good documentation what to do.

For my game, I needed a fullscreen mode and good controller support working on every operating system. Lwjgl’s full screen mode breaks my Ubuntu desktop, and while Jamepad gives you a great support on Windows, hotplugging does not work on Linux. Because both work well on my HTML5 build, I took a closer look at Electron.

What is Electron?

Electron is a framework made to deploy a HTML5 application to desktops. Basically, it is a way to bundle your code with a full-fledged Chromium browser. Additionally, it does run under full user priviledges on the target system, meaning that you have more capabilities than in a normal HTML5 application: For example, you can access the file system and sockets. The first mentioned problem of a normal HTML5 app is solved by using Electron.

But does it work with games? Yes, Electron is able to run games. There’s even a library available to access Steamworks because there are already many games made with it.

There is a big community standing behind the project, and it is using two other open-source projects with a lot of drive: Node.js and Chromium. That means that you can expect features to be added often. For example, you can even make use of the TouchBar of the MacBook Pros.

The main disadvantage I’ve found so far: A full-fledged Chromium means a full-fledged Chromium. If you package your game this way, expect to ship 120 MB just for the run-time. There are of course some other minor disadvantages for Java developers: Electron uses a completely different dependency management system than you are used to, and you’ll surely have to copy, erm, implement some JavaScript code. While not enjoying it, I clearly prefer this over writing C code for desktop natives.

Steps needed

Okay, enough said why you should try using Electron to deploy your build, let’s see how to do it. We are following the Electron Quick Start here.

Build a HTML5 version of your game

First of all, you should check if you are able to build a HTML5 version of your game. It is done with the html:dist Gradle task. The better technique is to check your game with html:superdev beforehand, but there are other guides covering that.

Just a quick note: If you really plan to release a HTML5 build of your game, consider using my extended HTML5 backend. It’s available for libGDX 1.9.8 and 1.9.10 and replaces the old audio interface with the modern WebAudio API. I’m planning to extend it to make use of Electron’s features in the future.

Install NPM

Get and install NPM, the dependency management system needed to fetch all other things.

On Windows, download and install Node.js.

On Linux, I was able to do sudo apt get npm .

. For MacOS, follow the official guide.

Configure the build

For Electron to work, you mainly need three files:

package.json: This file declares your project properties and dependencies.

main.js: It’s the “starter class”, declaring how your application will act after starting up

index.html: Your actual application. You already have this file, it’s from your libGDX HTML5 build.

Create a new folder. Place the outputs of your libGDX HTML dist in it. Then add my Gist files and you are done.

Install dependencies and run Electron

Go into your folder and let NPM fetch and install all dependencies:

npm install

If this is done, you can start Electron up:

npm start

That’s more or less your development build.

Using Electron within GWT

To use the interesting features of Electron and node.js within GWT, you need to use JSNI. The following code will open a native file open dialog:

public native void showDialog() /*-{

var dialog = $wnd.require('electron').remote.dialog;



console.log(dialog.showOpenDialog({ properties: ['openFile', 'openDirectory', 'multiSelections'] }))

}-*/;

For developing with Electron, you might want to use Chromium’s developer console and the superdev mode. An example how to do that is included in the main.js file.

Take a look at Electron’s feature documentation to see what’s possible. And there’s more, you also have access to all Node.js’ features.

Packaging Electron

In order to package your game with Chromium for the three supported operating systems, you need electron-packager. Follow its readme file. You’ll also find some example command lines in my Gist’s package.json file. For the beginning, the most important option to give is --asar so that packager makes a (cheap) “obfuscation” of your game, which is working without problems with a libGDX build. Note that GWT already obfuscated the sources when compiling to JS. The asar “obfuscation” is nevertheless good for libGDX games to hide your asset files so users can’t tinker with them too easily.

Make an installer

In order to make a single installer for Windows, Linux or MacOS, use electron-forge. It’s extending electron-packager so you can reuse your options.