# Deploy RPG Maker MV/MZ Games to Steam with Electronjs

:::danger
:::

:::warning
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This article was translated using "[DeepL Translator](https://www.deepl.com/translator)".
:::

## ■ Windows

---
### ◆ Download and Install the NekoGakuen_SteamworksAPI.js Plugin
---

Go to the following URL to download the NekoGakuen_SteamworksAPI.js plugin.

**【NekoGakuen_SteamworksAPI.js】**
https://rabbitteaparty.itch.io/nekogakuen-steamworksapi

Place NekoGakuen_SteamworksAPI.js in the "js/plugins" folder of your game project.

**【RPG Maker MV】**

**【RPG Maker MZ】**

Open your game project, to "Plugin Manager" to install the NekoGakuen_SteamworksAPI.js plugin, and set the relevant plugin parameters.

**【RPG Maker MV】**

**【RPG Maker MZ】**

---
### ◆ Using the Plugin Command in the Game Project
---

Add "Event Commands" to the Events page, switch to Page 3 and select "Plugin Commands...". The description of the plug-in commands can be found in the help information of NekoGakuen_SteamworksAPI.js in the "Plugin Manager".

**【RPG Maker MV】**

**【RPG Maker MZ】**

---
### ◆ Deploy Your Game
---

Select "File" → "Deployment...".

**【RPG Maker MV】**

**【RPG Maker MZ】**

---
### ◆ Download Steamworks SDK
---

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> Requires a valid Steamworks Developer ID account.
:::

Go to the following URL to download the Steamworks SDK file, and the SDK version must be at least 1.5.0 or higher.

**【Steamworks SDK】**
https://partner.steamgames.com/doc/sdk


---
### ◆ Download greenworks.js
---

Go to the following URL and select "greenworks.js".

**【greenworks.js】**
https://github.com/greenheartgames/greenworks/




---
### ◆ Download Node Binary Files
---

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> You need to register for a GitHub account to download files.
:::

Go to the following URL and set the following filters in order from the filters on the left:

**【Greenworks Prebuild】**
https://greenworks-prebuilds.armaldio.xyz

**Release Tag:**
「v0.6.0 - Steamworks v1.5.0」、
**OS:**
「Windows」
**Architecture:**
「64 bits」
**Runtime:**
「Electron」
**Versions:**
「v85」

Then select the file and select "DOWNLOAD" in the upper right corner.

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> You can also choose other version, but it needs to be exactly the same as the version of Electron you deploy afterwards, and it must be before "v85".
:::

---
### ◆ Download and Install Node.js
---

Go to the following URL to download Node.js.

**【Node.js】**
https://nodejs.org/en/download/


After installing Node.js, type `CMD` in the start menu to run the "Command Prompt" and type `node -v` and `npm -v` respectively to check if the installation was successful.



---
### ◆ Configuring Electronjs Environment
---

After creating a folder, add a file named "package.json" and edit the file to add the following syntax content.

:::warning
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> After adding the following syntax, remember to remove // and the comments that follow.
:::

{
  "name": "RPG_Game", //The project name used for the output.
  //It must be alphanumeric and not contain any half-space.
  "version": "1.0.0", //Version number.
  //The format must be in the numeric format X.X.X.
  "description": "This is the Electron Deployment Test.", //File description.
  "main": "index.js",

  //[RPG Maker MZ]
  "chromium-args": "--force-color-profile=srgb",
  //[RPG Maker MV]
  "js-flags": "--expose-gc",
  
  
  "build": {
    "appId": "com.rpgmaker.game",  //Application ID.
//*You can usually enter com.xxxxx.yyyyy in alphanumeric format.
//xxxxx is the English name of your game title.
//yyyyy is the author's/team's name.
    "productName": "Game",  //Game Title.
    "asar": true,  //It is recommended to set this item to true if you need to seal the game content...
    "afterPack": "./myAfterPackHook.js",  // * If you need to use the "asarmor" encryption suite, please make sure to include this parameter.
    "win": {
      "icon": "icon/icon.ico", //Game icon, the image format is ico format.
//* Use the png to ico online conversion site and place the ico format image in the icon folder.
      "target": {
        "target": "dir"
      }
    }
  },
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "Mirai", //The author's/team's name.
  "copyright": "Copyright © 2021 ${author} All rights reserved.", //Copyright Notice.
  "devDependencies": {
    "electron": "^11.5.0",
    "electron-builder": "^22.5.1",
    "asarmor": "^2.0.0" // * If you need to use the "asarmor" encryption suite...
  }
}

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> If you need to use the "asarmor" encryption suite, create a file called "myAfterPackHook.js" and put the following code into this file and save it in this output folder.

const asarmor = require('asarmor');
const { join } = require("path");

exports.default = async ({ appOutDir, packager }) => {
  try {
    const asarPath = join(packager.getResourcesDir(appOutDir), 'app.asar');
    console.log(`applying asarmor patches to ${asarPath}`);
    const archive = await asarmor.open(asarPath);
    archive.patch(); // apply default patches
    await archive.write(asarPath);
  } catch (err) {
    console.error(err);
  }
};

:::

**【Demo】**


Create an “index.js” file ,and enter the following:

const { app, BrowserWindow, ipcMain, shell } = require('electron');
function createWindow() {
    const win = new BrowserWindow({
        width: 816,  //Screen Width
        height: 624, //Screen Height
        icon: 'icon/icon.png',
        useContentSize: true,
        autoHideMenuBar: true,
        backgroundColor: '#000000',
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    const isTest = false; //Whether it is a test mode.
    const testString = isTest ? '?test' : '';
    app.allowRendererProcessReuse = false;
    win.loadURL(`file://${__dirname}/index.html${testString}`);

    if (process.platform !== 'darwin') {
        win.setMenu(null);
    }
    require('electron').ipcMain.on('focusMainWindow', function (e) {
        win.focus();
    });

    require('electron').ipcMain.on('openDevTools', function (e) {
        win.webContents.openDevTools();
    });

    require('electron').ipcMain.on('openExternal', function (e, arg) {
        shell.openExternal(arg);
    });
    
    //* Required with NekoGakuen_BlockedCapture.js plugin.
    require('electron').ipcMain.on('setProtection', function (e, arg) { 
        win.setContentProtection(arg);    
    });

};

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
    app.quit();
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

Copy all the game contents except "package.json" to Electronjs folder after deployment.

**【RPG Maker MV】**

**【RPG Maker MZ】**

Next, we will divide it into two projects and modify some of the contents in the js folder.

**【RPG Maker MV】**

Modify “rpg_core.js” and “rpg_managers.js” to the following.

## rpg_core.js

Utils.isNwjs = function() {
    return typeof require === 'function' && typeof process === 'object';
};

Replace…

Utils.isNwjs = function() {
    return typeof require === 'function' && typeof process === 'object';
};

Utils.isElectronjs = function() {
    return window && window.process && window.process.versions && window.process.versions['electron'];
};

---

Utils.isOptionValid = function (name) {
    if (location.search.slice(1).split('&').contains(name)) { return 1; };
    if (typeof nw !== "undefined" && nw.App.argv.length > 0 && nw.App.argv[0].split('&').contains(name)) { return 1; };
    return 0;
};

Replace…

Utils.isOptionValid = function (name) {
    if (location.search.slice(1).split('&').contains(name)) { return 1; };
    if (this.isElectronjs()) {
        if (this.isNwjs() && process.argv.length > 0 && process.argv[0].split('&').contains(name)) { return 1; };
    } else {
        if (typeof nw !== "undefined" && nw.App.argv.length > 0 && nw.App.argv[0].split('&').contains(name)) { return 1; };
    }
    return 0;
};

---

Input._wrapNwjsAlert = function() {
    if (Utils.isNwjs()) {
        var _alert = window.alert;
        window.alert = function() {
            var gui = require('nw.gui');
            var win = gui.Window.get();
            _alert.apply(this, arguments);
            win.focus();
            Input.clear();
        };
    }
};

Replace…

Input._wrapNwjsAlert = function () {
    if (Utils.isElectronjs()) {
        var _alert = window.alert;
        window.alert = function () {
            _alert.apply(this, arguments);
            require('electron').ipcRenderer.send('focusMainWindow');
            Input.clear();
        };
    } else {
        if (Utils.isNwjs()) {
            var _alert = window.alert;
            window.alert = function () {
                var gui = require('nw.gui');
                var win = gui.Window.get();
                _alert.apply(this, arguments);
                win.focus();
                Input.clear();
            };
        }
    }
};

## rpg_managers.js

StorageManager.localFileDirectoryPath = function() {
    var path = require('path');

    var base = path.dirname(process.mainModule.filename);
    return path.join(base, 'save/');
};

Replace…

StorageManager.localFileDirectoryPath = function () {
    var path = require('path');
    if (Utils.isElectronjs()) {
        var base = path.dirname(__filename);
        return Utils.isOptionValid('test') ? path.join(base, 'save/') : path.join(base, '../../save/');
    } else {
        var base = path.dirname(process.mainModule.filename);
        return path.join(base, 'save/');
    }
};

---

SceneManager.initialize = function() {
    this.initGraphics();
    this.checkFileAccess();
    this.initAudio();
    this.initInput();
    this.initNwjs();
    this.checkPluginErrors();
    this.setupErrorHandlers();
};

Replace…

SceneManager.initialize = function () {
    this.initGraphics();
    this.checkFileAccess();
    this.initAudio();
    this.initInput();
    if (!Utils.isElectronjs()) {
        this.initNwjs();
    }
    this.checkPluginErrors();
    this.setupErrorHandlers();
};

---

SceneManager.onKeyDown = function (event) {
    if (!event.ctrlKey && !event.altKey) {
        switch (event.keyCode) {
            case 116:   // F5
                if (Utils.isNwjs()) {
                    location.reload();
                }
                break;
            case 119:   // F8
                if (Utils.isNwjs() && Utils.isOptionValid('test')) {
                    require('nw.gui').Window.get().showDevTools();
                }
                break;
        }
    }
};

Replace…

SceneManager.onKeyDown = function (event) {
    if (!event.ctrlKey && !event.altKey) {
        switch (event.keyCode) {
            case 116:   // F5
                if (Utils.isElectronjs()) {
                    location.reload();
                } else {
                    if (Utils.isNwjs()) {
                        location.reload();
                    }
                }
                break;
            case 119:   // F8
                if (Utils.isElectronjs()) {
                    if (Utils.isOptionValid('test')) {
                        require('electron').ipcRenderer.send('openDevTools');
                    }
                } else {
                    if (Utils.isNwjs() && Utils.isOptionValid('test')) {
                        require('nw.gui').Window.get().showDevTools();
                    }
                }
                break;
        }
    }
};

**【RPG Maker MZ】**

Modify “main.js”, “rmmz_core.js” and “rmmz_managers.js” to the following.

## main.js

 isPathRandomized() {
        // [Note] We cannot save the game properly when Gatekeeper Path
        //   Randomization is in effect.
        return (
            Utils.isNwjs() &&
            process.mainModule.filename.startsWith("/private/var")
        );
    }

Replace…

isPathRandomized() {
        // [Note] We cannot save the game properly when Gatekeeper Path
        //   Randomization is in effect.
        if (Utils.isElectronjs()) {
            return (__filename.startsWith("/private/var"));
        } else {
            return (Utils.isNwjs() &&
                process.mainModule.filename.startsWith("/private/var"));
        }
    }

## rmmz_core.js

Utils.isNwjs = function() {
    return typeof require === "function" && typeof process === "object";
};

Replace…

Utils.isNwjs = function() {
    return typeof require === "function" && typeof process === "object";
};

Utils.isElectronjs = function () {
    return window && window.process && window.process.versions && window.process.versions['electron'];
};

---

Utils.isOptionValid = function(name) {
    const args = location.search.slice(1);
    if (args.split("&").includes(name)) {
        return true;
    }
    if (this.isNwjs() && nw.App.argv.length > 0) {
        return nw.App.argv[0].split("&").includes(name);
    }
    return false;
};

Replace…

Utils.isOptionValid = function (name) {
    const args = location.search.slice(1);
    if (args.split("&").includes(name)) {
        return true;
    }
    if (this.isElectronjs()) {
        if (process.argv.length > 0) {
            return process.argv[0].split("&").includes(name);
        }
    } else {
        if (this.isNwjs() && nw.App.argv.length > 0) {
            return nw.App.argv[0].split("&").includes(name);
        }
    }
    return false;
};

## rmmz_managers.js

StorageManager.fileDirectoryPath = function() {
    const path = require("path");
    const base = path.dirname(process.mainModule.filename);
    return path.join(base, "save/");
};

Replace…

StorageManager.fileDirectoryPath = function () {
    const path = require("path");
    if (Utils.isElectronjs()) {
        const base = path.dirname(__filename);
        return Utils.isOptionValid('test') ? path.join(base, "save/") : path.join(base, '../../save/');
    } else {
        const base = path.dirname(process.mainModule.filename);
        return path.join(base, "save/");
    }
};

---

SceneManager.reloadGame = function () {
    if (Utils.isNwjs()) {
        chrome.runtime.reload();
    }
};

SceneManager.showDevTools = function () {
    if (Utils.isNwjs() && Utils.isOptionValid("test")) {
        nw.Window.get().showDevTools();
    }
};

Replace…

SceneManager.reloadGame = function () {
    if (Utils.isElectronjs()) {
        location.reload();
    } else {
        if (Utils.isNwjs()) {
            chrome.runtime.reload();
        }
    }
};

SceneManager.showDevTools = function () {
    if (Utils.isElectronjs()) {
        if (Utils.isOptionValid("test")) {
            require('electron').ipcRenderer.send('openDevTools');
        }
    } else {
        if (Utils.isNwjs() && Utils.isOptionValid("test")) {
            nw.Window.get().showDevTools();
        }
    }
};

:::info
<i class="fa fa-info-circle" aria-hidden="true"></i> If the above is very complicated, you can also download quick start template directly from the following GitLab.
https://gitlab.com/MiraiSoSad/rpg_maker_mv_and_mz_electron/-/tree/en_US
:::

---
### ◆ Preparing for Deployment in Electronjs
---

In the path where the "index.html" file is located, create a "preload.js" file and enter the following:

const electron_os = navigator.platform;
const greenworksCore = electron_os.indexOf("Win") > -1 ? require('../../greenworks') : require('../greenworks');

**【RPG Maker MV】**

**【RPG Maker MZ】**

Modify the contents of the "index.html" file and add the following before `</body>`:

<script type="text/javascript" src="preload.js"></script>

**【RPG Maker MV】**

**【RPG Maker MZ】**

Use the "Command Prompt" and type `npm run dist` to run the deployment output.

---
### Configure Steamworks SDK
---

After deploying the output, add a new folder named "lib" to the path where the "dist/win-unpacked/index.html" file is located.

**【RPG Maker MV】**

**【RPG Maker MZ】**

After unzipping the downloaded Steamworks SDK archive, get some specific files from the sdk folder and copy them to the "lib" folder, as shown in the following path:

「sdk \ redistributable_bin \ **steam_api.dll**」 → 「Electronjs \ dist \ win-unpacked \ lib \ **steam_api.dll**」
「sdk \ redistributable_bin \ **steam_api.lib**」 → 「Electronjs \ dist \ win-unpacked \ lib \ **steam_api.lib**」
「sdk \ redistributable_bin \ win64 \ **steam_api64.dll**」 → 「Electronjs \ dist \ win-unpacked \ lib \ **steam_api64.dll**」
「sdk \ redistributable_bin \ win64 \ **steam_api64.lib**」 → 「Electronjs \ dist \ win-unpacked \ lib \ **steam_api64.lib**」

「sdk \ public \ steam \ lib \ win64 \ **sdkencryptedappticket64.dll**」 → 「Electronjs \ dist \ win-unpacked \ lib \ **sdkencryptedappticket64.dll**」
「sdk\public\steam\lib\win64\sdkencryptedappticket64.lib」 → 「Electronjs \ dist \ win-unpacked \ lib \ **sdkencryptedappticket64.lib**」

**【RPG Maker MV】**

**【RPG Maker MZ】**

Place the downloaded Node binary file and greenworks.js in the following paths respectively:

**greenworks-win64.node** → Electronjs \ dist \ win-unpacked \ lib \ **greenworks-win64.node**
**greenworks.js** → Electronjs \ dist \ win-unpacked \ **greenworks.js**

**【RPG Maker MV】**

**【RPG Maker MZ】**

In the folder where Electronjs Game.exe is located, mouse right-click "New" → "Text Document" and name it "steam_appid.txt", then edit the contents of steam_appid.txt and enter the App ID of the game you want to publish on Steam platform.

**【RPG Maker MV】**

**【RPG Maker MZ】**

---
### ◆ Configure Steamworks Launch Options
---

In the "App Manager" page of the Steamworks backend, add "Launch Options" and add parameters `--in-process-gpu --disable-direct-composition`.


## ■ macOS

(In preparation...)

Mirai - Patreon：
https://www.patreon.com/MiraiDiary

Mirai - Twitter(X)：
https://twitter.com/Mirai_so_Sad

Mirai - itch.io：
https://miraisosad.itch.io

Mirai - Instagram
https://www.instagram.com/miraisosad/

###### tags: `貓咪學園` `NekoGakuen` `RPG Maker` `RPG Maker MV` `RPG Maker MZ`