# 【Windows】使用 Electron 部署輸出 RPG Maker MV/MZ 遊戲 這篇主要教的內容是使用 Electron 來部署輸出你的 RPG Maker MV/MZ 的遊戲, 本次將使用 Windows 10 (1909) 作業系統來進行操作教學。 :::danger ※ Electron 目前不支援 **Windows Vista** 及較早以前版本的作業系統。 ::: :::info **2021/11/12** 新增關於 asar 檔案的加密部分。 ::: 1.首先到以下網址下載對應 Windows 作業系統的 Node.js 並安裝到電腦。 https://nodejs.org/en/download/ ![](https://i.imgur.com/k2aM18l.png) 2.安裝完成後,在開始功能表輸入`CMD`執行「命令提示字元」,並分別輸入`node -v`和`npm -v`檢查是否有成功安裝。 ![](https://i.imgur.com/mttJQ1o.png) ![](https://i.imgur.com/AnzdRie.png) 3.建立一個資料夾,並使用「命令提示字元」的`cd`指令來指定資料夾的路徑,然後在「命令提示字元」分別依序輸入以下指令來安裝所需要的套件: `npm init -y` `npm i --save-dev electron` `npm i --save-dev electron-builder` :::info **※ 如果你有需要將asar檔案進行加密的話,建議安裝一個名為「asarmor」的加密套件。** `npm i --save-dev asarmor` ::: :::warning ※ 記得你的資料夾名稱只能英文數字且不含半行空白,如果有需要用到半形空白,請用半形底線( _ )替代半形空白。 ::: 4.開啟你的 RPG Maker MV/MZ 遊戲專案,並且按「檔案→部署…」,選擇「網頁瀏覽器 / Android / iOS」後,RPG Maker MV 為選擇「網頁瀏覽器」後,按下「OK」等待部署輸出完成。 **【RPG Maker MZ】** ![](https://i.imgur.com/UZFdYgQ.png) **【RPG Maker MV】** ![](https://i.imgur.com/Z1jLLPP.png) 5.建立一個「index.js」的檔案,並輸入以下內容: ```javascript= const { app, BrowserWindow, ipcMain, shell } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 816, //遊戲解析度寬度 height: 624, //遊戲解析度高度 icon: 'icon/icon.png', useContentSize: true, autoHideMenuBar: true, backgroundColor: '#000000', webPreferences: { nodeIntegration: true, contextIsolation: false } }) const isTest = false; //是否為測試模式 const testString = isTest ? '?test' : ''; 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 (event, arg) { shell.openExternal(arg); }); }; app.whenReady().then(createWindow); app.on('window-all-closed', () => { app.quit(); }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` 6.在部署輸出後的資料夾,並且將除了「package.json」以外的所有檔案複製,並貼到這邊 Electron 用的輸出資料夾內。 **【RPG Maker MZ】** ![](https://i.imgur.com/oyqxzA7.png) **【RPG Maker MV】** ![](https://i.imgur.com/DAzjeR6.png) 7.接著在 Electron 用的輸出資料夾內開啟「package.json」檔案,並修改內容為以下語法。 ```json= "name": "RPG_Game", //部署輸出的專案名稱,必須為英文數字且不含任何半形空白。 "version": "1.0.0", //版本號,格式必須為X.X.X的數字格式。 "description": "這是 Electron 部署測試", //檔案描述。 "main": "index.js", //【RPG Maker MZ】 "chromium-args": "--force-color-profile=srgb", //【RPG Maker MV】 "js-flags": "--expose-gc", "build": { "appId": "com.rpgmaker.game", //應用程式 ID。 //※通常輸入 com.(你的遊戲英文名).(你的英文署名) 這類英文數字的格式。 "productName": "遊戲測試", //遊戲名稱。 "asar": true, //建議將此項設為 true ,如果你需要將遊戲內容進行加密封裝的話... "afterPack": "./myAfterPackHook.js", // ※ 如果你有安裝「asarmor」加密套件的話,請一定要加入此項參數。 "win": { "icon": "icon/icon.ico", //遊戲圖示,圖片格式為 ico 格式。 //※使用 png 轉 ico 的線上轉換圖片的網站,並將 ico 格式的圖檔放在 icon 資料夾 "target": { "target": "dir" } } }, "scripts": { "start": "electron .", "pack": "electron-builder --dir", "dist": "electron-builder" }, "author": "Mirai", //作者/團隊署名 "copyright": "Copyright © 2021 ${author} All rights reserved.", //版權宣告文字 "devDependencies": { "electron": "latest", "electron-builder": "latest", "asarmor": "latest" // ※ 如果你有安裝「asarmor」加密套件的話... } } ``` :::info ※ **如果你有安裝「asarmor」加密套件的話,請建立一個名為「myAfterPackHook.js」的檔案,並且將以下程式碼放進此檔案並保存在此輸出資料夾之中。** ```javascript= 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); } }; ``` ::: **【示範】** ![](https://i.imgur.com/sN0H8Q1.png) :::info ※ 接下來將分為兩種專案並修改在 js 資料夾下的一些內容。 ::: **【RPG Maker MZ】** 分別修改「main.js」、「rmmz_core.js」、「rmmz_managers.js」為以下內容。 ## main.js ```javascript= isPathRandomized() { // [Note] We cannot save the game properly when Gatekeeper Path // Randomization is in effect. return ( Utils.isNwjs() && process.mainModule.filename.startsWith("/private/var") ); } ``` 改成 ```javascript= 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 ```javascript= Utils.isNwjs = function() { return typeof require === "function" && typeof process === "object"; }; ``` 改為 ```javascript= Utils.isNwjs = function() { return typeof require === "function" && typeof process === "object"; }; Utils.isElectronjs = function () { return window && window.process && window.process.versions && window.process.versions['electron']; }; ``` --- ```javascript= 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; }; ``` 改為 ```javascript= 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 ```javascript= StorageManager.fileDirectoryPath = function() { const path = require("path"); const base = path.dirname(process.mainModule.filename); return path.join(base, "save/"); }; ``` 改為 ```javascript= 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/"); } }; ``` --- ```javascript= SceneManager.reloadGame = function () { if (Utils.isNwjs()) { chrome.runtime.reload(); } }; SceneManager.showDevTools = function () { if (Utils.isNwjs() && Utils.isOptionValid("test")) { nw.Window.get().showDevTools(); } }; ``` 改為 ```javascript= 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(); } } }; ``` **【RPG Maker MV】** 分別修改「rpg_core.js」、「rpg_managers.js」為以下內容。 ## rpg_core.js ```javascript= Utils.isNwjs = function() { return typeof require === 'function' && typeof process === 'object'; }; ``` 改為 ```javascript= Utils.isNwjs = function() { return typeof require === 'function' && typeof process === 'object'; }; Utils.isElectronjs = function() { return window && window.process && window.process.versions && window.process.versions['electron']; }; ``` --- ```javascript= 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; }; ``` 改為 ```javascript= 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; }; ``` --- ```javascript= 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(); }; } }; ``` 改為 ```javascript= 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 ```javascript= StorageManager.localFileDirectoryPath = function() { var path = require('path'); var base = path.dirname(process.mainModule.filename); return path.join(base, 'save/'); }; ``` 改為 ```javascript= 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, '../../www/save/'); } else { var base = path.dirname(process.mainModule.filename); return path.join(base, 'save/'); } }; ``` --- ```javascript= SceneManager.initialize = function() { this.initGraphics(); this.checkFileAccess(); this.initAudio(); this.initInput(); this.initNwjs(); this.checkPluginErrors(); this.setupErrorHandlers(); }; ``` 改為 ```javascript= SceneManager.initialize = function () { this.initGraphics(); this.checkFileAccess(); this.initAudio(); this.initInput(); if (!Utils.isElectronjs()) { this.initNwjs(); } this.checkPluginErrors(); this.setupErrorHandlers(); }; ``` --- ```javascript= 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; } } }; ``` 改為 ```javascript= 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; } } }; ``` :::info ※ 如果上述內容覺得非常複雜的話,也可以到以下GitLab直接下載懶人包。 https://gitlab.com/mmmm748748/rpg_maker_mv_and_mz_electron/-/tree/zh_TW/ ::: 8.回到「命令提示字元」並輸入`npm start`檢查是否能正常執行遊戲,如果執行遊戲 OK 的話,輸入`npm run dist`後就能執行部署輸出。 9.最後,部署輸出完成後,可以在「dist/win-unpacked/」資料夾中找到部署輸出好的內容,執行(遊戲名稱).exe即可。 **【RPG Maker MZ】** ![](https://i.imgur.com/eodHTZW.png) **【RPG Maker MV】** ![](https://i.imgur.com/iPqSRja.png) :::info ※ 如果你是使用 RPG Maker MV 的情況,記得要建立一個名為 www 的資料夾才能正常使用存檔功能。 ::: ### 參考來源 https://www.electronjs.org https://github.com/electron/electron-quick-start https://qiita.com/RaTTiE/items/63f2e351a93f81bc8039 https://a091234765.pixnet.net/blog/post/402450719-%5Belectron%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98%5Delectron%E5%AE%89%E8%A3%9D%E6%AA%94%E6%89%93%E5%8C%85%E6%94%BB%E7%95%A5%E8%A3%9C%E5%85%85_el https://www.electron.build https://www.npmjs.com/package/asarmor ###### tags: `貓咪學園` `NekoGakuen` `RPG 製作大師` `RPG Maker MV` `RPG Maker MZ`