有個機會來了！！！STEAM

Cocos 官方今天發佈了 Cocos Creator 3.3.0 版本，《奔跑吧小仙女》同步升級最新版引擎，購買過的夥伴可免費升級。

• Cocos Store 購買的用戶，使用 Cocos Store 3.x 版本引擎進入商店即可下載最新版本；
  

• 在 Cocos 微店購買的用戶，請進入微店聯繫客服發送消息『升級小仙女』客服人員將會給你發送新版鏈接。

後續會打通Cocos微店與Cocos帳號的互通，敬請期待！

Cocos Creator 遊戲發佈STEAM平臺攻略

一名來自巴西聖保羅的遊戲開發者 Danilo Ganzella 將他的遊戲 《Wirewalk()↳》通過 Cocos Creator 導出發佈至全球最大的 PC 遊戲平臺 Steam。

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

如果有開發者將本篇文章中講述的解決方案做成Cocos Creator 插件，豈不是能成就一番副業，更重要的是能造福大衆！！！

Danilo 的解決方案是 通過使用 Node.js 來實現，所使用到的工具包括 Electron 和 Greenworks 。基於  Electron ，可以輕鬆將 Cocos Creator 發佈到任何桌面。

徵得 Danilo 同意之後，我們將他的解決方案翻譯整理成本文。如何你的遊戲是採用 Cocos Creator 開發製作並希望發佈爲桌面應用，這篇文章將給予你幫助。

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

---

1

瞭解 Node.js 

Node.js 是一個功能強大的工具，通過使用 JavaScript 作爲通用語言部署到許多原生平臺，可以開發多種類型的應用程序和其他工具。

2

 安裝 Electron 

1.安裝 Node.js （請選擇最新的穩定版本）

2.創建一個 Electron 項目，打開 VSCode ，找到你想要的項目文件夾，然後輸入：

    
    
    

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

    
    
    

在同一個文件夾中創建一個名爲 index.js 的文件，內容如下：

    
    
    

 
     
     
     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;
    });
});

    
    
    

可以通過執行來測試它。

    
    
    

 
     
     
     electron .

    
    
    

如果它打開一個標題爲 MyGame 的空白應用程序窗口，說明你已完成。

現在我們需要將 Cocos 導出的項目提供給 BrowserWindow 。

瞭解更多創建 Electrom 信息： https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file

將項目從 Creator 導出到 Electron

打開你的 Cocos Creator 項目，選擇你希望將其導出到 Electron 項目中的某處，在 Electron 項目的根文件夾中創建一個名爲 cocosExport 的子文件夾。

打開導出的項目並運行遊戲：

回到 Electron 的 index.js ，你要做的是在創建 mainWindow 對象後在任何地方添加：

    
    
    

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

    
    
    

現在簡單地執行它，遊戲就可以運行了！

    
    
    

 
     
     
     electron .

    
    
    

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

安裝 Greenworks 和 Steamworks API

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

下載 Greenworks 和 Steamworks API

下載 Greenworks 存儲庫的主分支並將其放在單獨的文件夾中。

從 Steam 開發 者門戶下載 Steamworks API ，將 Steamworks API 放在 Greenworks 根目錄下的 deps 文件夾中，並將 Steamworks 文件夾重命名爲 steamworks_sdk 。我們需要構建 Greenworks ，以便二進制文件在你下載並已安裝的 Node.js 版本上正常運行。

構建 Steamworks

首先，在 Greenworks 的根文件夾中運行 Greenworks ，以便正確安裝所有依賴項。

    
    
    

 
     
     
     npm install

    
    
    

然後，你可以構建 Greenworks 本身。我們需要一個名爲 node-gyp 的 node.js  構建工具。

首先，通過運行以下命令全局安裝 node-gyp ：

    
    
    

 
     
     
     npm install node-gyp -g

    
    
    

然後，通過在 Greenworks 項目的根目錄中運行以下命令來構建 Greenworks ：

    
    
    

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


    
    
    

使用你安裝的 electron 版本更改 electron 版本，例如 12.0.7 ，相關文件會在裏面：build\Release\greenworks-win64.node

瞭解更多構建 Greenworks 的信息：https://github.com/greenheartgames/greenworks/blob/master/docs/build-instructions-electron.md

將 Greenworks 複製到你的 Electron 項目並加載它。

現在，你需要將一些文件複製到你的 Electron 項目中。

首先，在 Electron 項目的根文件夾中創建一個名爲 Greenworks 的文件夾。在其中，複製 Greenworks 項目根文件中的 greenworks.js 文件和 lib 文件夾。

在 lib 文件夾中，將文件 greenworks-win64.node 替換爲你在上一步中構建的文件。

現在只需在你的電子項目的 index.js 文件頂部添加以下行：

    
    
    

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

    
    
    

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

啓動 Greenworks

要啓動 Greenworks ，需要做的第一件事是創建一個名爲 steam_appid.txt 的文件，其中包含你的應用程序 ID 而沒有其他任何內容。應用程序 ID 是商店中的那個，比如我的遊戲《Wirewalk()↳》，Steam 是1636700。

不要將此 txt 文件複製到本教程最後一步的最終版本中，因爲它僅用於測試目的。

現在，可以啓動 Greenworks 了！

    
    
    

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

    
    
    

啓動 Greenworks 應該是你收到“ready”事件後要做的第一件事。

restartAppIfNecessary 函數可防止遊戲在 Steam 之外啓動並通過從 Steam 打開它來重新啓動它。但這只是爲了發佈——因爲文件 steam_appid.txt 的存在會使 restartAppIfNecessary 總是返回 false 。

此外，在測試時，請確保 Steam 已打開並正在運行，並且你擁有遊戲 ID。

Cocos 和 Electron 之間的通信 - 成就

現在，讓我們通過實現 Steam 成就功能 來舉例說明使用 Steamworks 的功能。

首先在 Steamworks 網站上創建一個成就：

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

在 Cocos Creator 上，讓我們創建一個 類 來處理與 Electron 的通信，你可以在成就邏輯確定發佈成就的時間後調用該類。此代碼在 TypeScript 中：

    
    
    

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

    
    
    

現在在 Cocos 中，你將調用：

    
    
    

 
     
     
     Electron.releaseAchivement('bad_cats');

    
    
    

該方法將在全局範圍內尋找一個名爲 electron 的對象。這個 electron 對象將成爲我們與 Cocos 進程中的 Electron 進程進行通信的大門。我們將通過調用 invoke 方法進行通信，使用字符串參數來標識要調用的回調，後跟任意數量的參數。

現在，我們需要定義這個對象 electron 。我發現更簡單的方法是通過編輯構建項目時由 Cocos 生成的結果 HTML （在 cocosExport 文件夾中的 index.html ），將以下內容添加到輸出 HTML ，在 <body > tag之前。

    
    
    

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

    
    
    

我們不能在遊戲代碼本身上設置這個 require('electron')， 因爲 Cocos 會在構建時嘗試找到 electron js 文件並給出錯誤，因爲它無法找到它。

接下來，我們需要告訴 Electron 瀏覽器窗口的 HTML 可以與本機節點進程通信。本質上使 electron.js 可用。爲此，我們需要在創建 BrowserWindow 時傳遞這些額外的參數。

    
    
    

 
     
     
     webPreferences: { nodeIntegration: true, contextIsolation: false }

    
    
    

最後，在 Electron 上添加接收器功能。創建 mainWindow 後，可以在任何位置添加此代碼。

    
    
    

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

    
    
    

handle 方法是與 invoke 匹配的方法。在這個例子中， Electron 收到 releaseAchievement 息後，它會調用 reenworks tivateAchievement 告訴它爲用戶激活成就。

通過運行再次測試你的遊戲：

    
    
    

 
     
     
     electron .

    
    
    

將項目導出到 Windows、Mac 或 Linux

首先，通過運行全局安裝 electron-packager 。

    
    
    

 
     
     
     npm install electron-packager -g

    
    
    

最後，運行以下命令行來構建你的遊戲！

windows:

    
    
    

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

    
    
    

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

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

---

感謝 Danilo 的分享！ Cocos 正在積極推進包括 Steam 在內的幾大平臺的官方適配， 在此之前，如果你 能將此做成Cocos Creator插件，上架到 Cocos Store 那豈不是能成就一番副業，更重要的是能造福大衆！！！

• Creator遊戲開發教程PDF免費下載(800+頁)

• 編寫高效 TS 的一些建議

• JavaScript 內存詳解 & 分析指南

• Creator 最佳文字書寫解決方案！

• Creator 2.x 大項目卡頓有救了！

本文分享自微信公衆號 - Creator星球遊戲開發社區（creator-star）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。