近日，一名來自巴西圣保羅的游戲開發(fā)者 Danilo Ganzella 將他的游戲《Wirewalk()?》通過 Cocos Creator 導(dǎo)出發(fā)布至全球最大的 PC 游戲平臺(tái) Steam。

游戲鏈接：
https://store.steampowered.com/app/1636700/Wirewalk/

Danilo 的解決方案是通過使用 Node.js 來實(shí)現(xiàn)，所使用到的工具包括 Electron 和 Greenworks?；?nbsp;Electron，可以輕松將 Cocos Creator 發(fā)布到任何桌面。

征得 Danilo 同意之后，我們將他的解決方案翻譯整理成本文。如何你的游戲是采用 Cocos Creator 開發(fā)制作并希望發(fā)布為桌面應(yīng)用，這篇文章將給予你幫助。

注：本文所有命令行都將從 Windows VSCode 終端或 Windows Powershell 運(yùn)行。

了解 Node.js

Node.js 是一個(gè)功能強(qiáng)大的工具，通過使用 JavaScript 作為通用語言部署到許多原生平臺(tái)，可以開發(fā)多種類型的應(yīng)用程序和其他工具。

安裝 Electron

1.安裝 Node.js（請選擇最新的穩(wěn)定版本）

2.創(chuàng)建一個(gè) Electron 項(xiàng)目，打開 VSCode，找到你想要的項(xiàng)目文件夾，然后輸入：

npm init -y
npm i --save-dev electron

在同一個(gè)文件夾中創(chuàng)建一個(gè)名為 index.js 的文件，內(nèi)容如下：

const { app, BrowserWindow } = require('electron')

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

app.on('ready', function() {

    mainWindow = new BrowserWindow({
      width: 768,
      height: 768,
      show: true,
      fullscreen: false,
      resizable: false,
      frame: true,
      title: "MyGame"
    });

    mainWindow.removeMenu();

    mainWindow.on('closed', function() {
      mainWindow = null;
    });
});

可以通過執(zhí)行來測試它。

electron .

如果它打開一個(gè)標(biāo)題為MyGame的空白應(yīng)用程序窗口，說明你已完成。

現(xiàn)在我們需要將 Cocos 導(dǎo)出的項(xiàng)目提供給 BrowserWindow。

了解更多創(chuàng)建 Electrom 信息：https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file

將項(xiàng)目從 Creator 導(dǎo)出到 Electron

打開你的 Cocos Creator 項(xiàng)目，選擇你希望將其導(dǎo)出到 Electron 項(xiàng)目中的某處，在 Electron 項(xiàng)目的根文件夾中創(chuàng)建一個(gè)名為cocosExport的子文件夾。

打開導(dǎo)出的項(xiàng)目并運(yùn)行游戲：

回到 Electron 的 index.js，你要做的是在創(chuàng)建 mainWindow 對象后在任何地方添加：

    mainWindow.loadURL('file://' + __dirname + '/cocosExport/web-desktop/index.html').then(() =>{
    });

現(xiàn)在簡單地執(zhí)行它，游戲就可以運(yùn)行了！

electron .

你可能需要對從 Cocos 導(dǎo)出的 HTML 以及 Electron 的 BrowserWindow 進(jìn)行額外調(diào)整，使其看起來更流暢。接下來，講一下如何集成 Steamworks API。

安裝 Greenworks 和 Steamworks API

由于 Steamworks 本身不支持 Electron（甚至在 JavaScript 中也不支持），因此你需要下載一個(gè)名為 Greenworks 的工具。這個(gè)工具也是一個(gè) Node.js 包，它通過在 JavaScript 中暴露一個(gè)接口來訪問 Steam API 的本地編譯的 C++函數(shù)。

下載 Greenworks 和 Steamworks API

下載 Greenworks 存儲(chǔ)庫的主分支并將其放在單獨(dú)的文件夾中。

從 Steam 開發(fā)者門戶下載 Steamworks API，將 Steamworks API 放在 Greenworks 根目錄下的 deps 文件夾中，并將 Steamworks 文件夾重命名為steamworks_sdk。我們需要構(gòu)建 Greenworks，以便二進(jìn)制文件在你下載并已安裝的 Node.js 版本上正常運(yùn)行。

構(gòu)建 Steamworks

首先，在 Greenworks 的根文件夾中運(yùn)行 Greenworks，以便正確安裝所有依賴項(xiàng)。

npm install

然后，你可以構(gòu)建 Greenworks 本身。我們需要一個(gè)名為 node-gyp 的 node.js 構(gòu)建工具。

首先，通過運(yùn)行以下命令全局安裝 node-gyp：

npm install node-gyp -g

然后，通過在 Greenworks 項(xiàng)目的根目錄中運(yùn)行以下命令來構(gòu)建 Greenworks：

node-gyp rebuild --target=<electron_version> --arch=x64 --dist-url=https://atom.io/download/atom-shell

使用你安裝的 electron 版本更改 electron 版本，例如 12.0.7 ，相關(guān)文件會(huì)在里面：build\Release\greenworks-win64.node

了解更多構(gòu)建 Greenworks 的信息：https://github.com/greenheartgames/greenworks/blob/master/docs/build-instructions-electron.md

將 Greenworks 復(fù)制到你的 Electron 項(xiàng)目并加載它。

現(xiàn)在，你需要將一些文件復(fù)制到你的 Electron 項(xiàng)目中。

首先，在 Electron 項(xiàng)目的根文件夾中創(chuàng)建一個(gè)名為 Greenworks 的文件夾。在其中，復(fù)制 Greenworks 項(xiàng)目根文件中的 greenworks.js 文件和 lib 文件夾。

在 lib 文件夾中，將文件 greenworks-win64.node 替換為你在上一步中構(gòu)建的文件。

現(xiàn)在只需在你的電子項(xiàng)目的 index.js 文件頂部添加以下行：

const greenworks = require(‘./greenworks/greenworks’);

大功告成！現(xiàn)在可以記錄 Greenworks 對象以查看它具有哪些方法。

啟動(dòng) Greenworks

要啟動(dòng) Greenworks，需要做的第一件事是創(chuàng)建一個(gè)名為 steam_appid.txt 的文件，其中包含你的應(yīng)用程序 ID 而沒有其他任何內(nèi)容。應(yīng)用程序 ID 是商店中的那個(gè)，比如我的游戲《Wirewalk()?》，Steam 是1636700。

不要將此 txt 文件復(fù)制到本教程最后一步的最終版本中，因?yàn)樗鼉H用于測試目的。

現(xiàn)在，可以啟動(dòng) Greenworks 了！

      let relaunch = greenworks.restartAppIfNecessary(1636700);
 
      if(relaunch){
        app.quit();
      }
      else{
        if(greenworks.init()){
          console.log('Steam inited successfully');
          loadWindow();
        }
        else{
          app.quit();
        }
      }

啟動(dòng) Greenworks 應(yīng)該是你收到“ready”事件后要做的第一件事。

restartAppIfNecessary 函數(shù)可防止游戲在 Steam 之外啟動(dòng)并通過從 Steam 打開它來重新啟動(dòng)它。但這只是為了發(fā)布——因?yàn)槲募?steam_appid.txt 的存在會(huì)使 restartAppIfNecessary總是返回 false。

此外，在測試時(shí)，請確保 Steam 已打開并正在運(yùn)行，并且你擁有游戲 ID。

Cocos 和 Electron 之間的通信 - 成就

現(xiàn)在，讓我們通過實(shí)現(xiàn) Steam 成就功能 來舉例說明使用 Steamworks 的功能。

首先在 Steamworks 網(wǎng)站上創(chuàng)建一個(gè)成就：

請記住，API 名稱是我們需要傳遞給 greenworks 的名稱。

在 Cocos Creator 上，讓我們創(chuàng)建一個(gè)類來處理與 Electron 的通信，你可以在成就邏輯確定發(fā)布成就的時(shí)間后調(diào)用該類。此代碼在 TypeScript 中：

export default class Electron
{
    static releaseAchievement(id: string): void
    {
        (window as any).electron.ipcRenderer.invoke('releaseAchievement', id);
    }
}

現(xiàn)在在 Cocos 中，你將調(diào)用：

Electron.releaseAchivement('bad_cats');

該方法將在全局范圍內(nèi)尋找一個(gè)名為 electron 的對象。這個(gè) electron 對象將成為我們與 Cocos 進(jìn)程中的 Electron 進(jìn)程進(jìn)行通信的大門。我們將通過調(diào)用 invoke 方法進(jìn)行通信，使用字符串參數(shù)來標(biāo)識(shí)要調(diào)用的回調(diào)，后跟任意數(shù)量的參數(shù)。

現(xiàn)在，我們需要定義這個(gè)對象 electron 。我發(fā)現(xiàn)更簡單的方法是通過編輯構(gòu)建項(xiàng)目時(shí)由 Cocos 生成的結(jié)果HTML（在 cocosExport 文件夾中的 index.html），將以下內(nèi)容添加到輸出 HTML，在 <body > tag之前。

<script>
  window.electron = require('electron');
</script>

我們不能在游戲代碼本身上設(shè)置這個(gè) require('electron')，因?yàn)?Cocos 會(huì)在構(gòu)建時(shí)嘗試找到 electron js 文件并給出錯(cuò)誤，因?yàn)樗鼰o法找到它。

接下來，我們需要告訴 Electron 瀏覽器窗口的 HTML 可以與本機(jī)節(jié)點(diǎn)進(jìn)程通信。本質(zhì)上使 electron.js 可用。為此，我們需要在創(chuàng)建 BrowserWindow 時(shí)傳遞這些額外的參數(shù)。

webPreferences: { nodeIntegration: true, contextIsolation: false }

最后，在 Electron 上添加接收器功能。創(chuàng)建 mainWindow 后，可以在任何位置添加此代碼。

  ipcMain.handle('releaseAchievement', (event, achievementString) => {
    console.log('releasing achievement', achievementString);
    greenworks.activateAchievement(achievementString);
  });

handle方法是與invoke匹配的方法。在這個(gè)例子中，Electron 收到 releaseAchievement息后，它會(huì)調(diào)用 reenworks tivateAchievement 告訴它為用戶激活成就。

通過運(yùn)行再次測試你的游戲：

electron .

將項(xiàng)目導(dǎo)出到 Windows、Mac 或 Linux

首先，通過運(yùn)行全局安裝 electron-packager。

npm install electron-packager -g

最后，運(yùn)行以下行來構(gòu)建你的游戲！

windows:

electron-packager . MyGame --platform=win32 --arch=x64 --overwrite

你也可以通過更改 –platform 值來構(gòu)建 Mac 和 Linux，可以在 electron 文檔中找到可用平臺(tái)的列表。

https://electron.github.io/electron-packager/master/modules/electronpackager.html#officialplatform

感謝 Danilo 的分享！Cocos 正在積極推進(jìn)包括 Steam 在內(nèi)的幾大平臺(tái)的官方適配，在此之前，如果你有此需求，不妨先試試上述方法。

往期精彩

實(shí)用！Cocos Creator 游戲發(fā)布 Steam 平臺(tái)攻略出爐