Make games with Superpowers — The extensible, collaborative HTML5 2D+3D game maker

Publishing your game

Superpowers comes with a one-click Publish project button, located in the top-left corner.

"Publish project" button

Exporting is only available from the app, not when accessing Superpowers through the browser, because browsers do not let Web apps access the filesystem directly for security reasons.

Publishing your game for the Web

You can upload the exported folder to any Web host, or zip it up and upload it as HTML5 to an online game portal like itch.io or Game Jolt.

Packaging for desktop

Double check your project's name, it will appear in the title bar of stand-alone builds of your game.

We hope to automate all of these packaging steps in a future version.

If you want to make stand-alone, downloadable versions of your game, you can use Electron. Electron is basically Chrome's browser engine customized to run stand-alone HTML5 apps and games rather than a full-blown Web browser.

Download the appropriate builds of Electron. We recommend you support Windows in both 64-bit or 32-bit but you'll probably be fine with only 64-bit versions for Linux and OS X (Apple hasn't been shipping 32-bit hardware for several years).

Electron requires that you create two files in order to run your game:

package.json

{
  "name": "my-game",
  "version": "1.0.0",
  "main": "main.js"
}

Make sure to replace my-game with your game's name, using lowercase dash-separated words.

main.js

"use strict";

const electron = require("electron");
var mainWindow = null;

electron.app.on("window-all-closed", () => {
  if (process.platform != "darwin") electron.app.quit();
});

electron.app.on("ready", () => {
  mainWindow = new electron.BrowserWindow({
    width: 1280, height: 720,
    useContentSize: true,
    // NOTE: You can enable those if you want
    // resizable: false,
    // icon: `${__dirname}/icon.png`
  });
  mainWindow.setMenuBarVisibility(false);
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  mainWindow.on("closed", () => { mainWindow = null; });
});

You can, of course, tweak the window settings. Read on to see where to put those two files.

Packaging for Windows (32-bit and 64-bit)

Unpack the Electron ZIP archive for each architecture and rename the folders to something like my-game-win-ia32 (32-bit) and my-game-win-x64 (64-bit).

For both of these folders:

  • Remove locales, pdf.dll and version, we don't need those
  • Put a copy of your exported game folder in resources, renaming it app
  • Rename electron.exe to something like My Game.exe. This is the executable players will click on
  • Create package.json and main.js, as detailed above, in resources/app

That's it, pack it all up into a ZIP archive and upload.

Packaging for Linux

Unpack the Electron ZIP archive and rename the folder to something like my-game-linux-x64.

  • Remove locales and version, we don't need those
  • Put a copy of your exported game folder in resources, renaming it app
  • Rename electron to something like My Game. This is the executable players will click on
  • Create package.json and main.js, as detailed above, in resources/app

That's it, pack it all up into a ZIP archive and upload.

Packaging for OS X

Unpack the Electron ZIP archive and rename the folder to something like my-game-osx-x64.

  • Remove version, we don't need it
  • Put a copy of your exported game folder in Electron.app/Contents/Resources/, renaming it app/
  • Rename Electron.app to something like My Game.app. This is the executable players will click on
  • Create package.json and main.js, as detailed above, inside My Game.app/Contents/Resources/app

That's it, pack it all up into a ZIP archive and upload.

Packaging for mobile

Do a regular export and use the Intel XDK to generate a platform-specific app that you can submit to a store.

On Android, it seems like the minimum version required for WebGL support is 4.4. Accordingly, you should set up Projects/Build Settings/Minimum Android Version to 19 in Intel XDK.