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

Cocos Store 購買的用戶，使用 Cocos Store 3.x 版本引擎進入商店即可下載最新版本；
在 Cocos 微店購買的用戶，請進入微店聯(lián)系客服發(fā)送消息『升級小仙女』客服人員將會給你發(fā)送新版鏈接。

后續(xù)會打通Cocos微店與Cocos帳號的互通，敬請期待！

Cocos Creator 游戲發(fā)布STEAM平臺攻略

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

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

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

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

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

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

了解 Node.js

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

安裝 Electron

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

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

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

在同一個文件夾中創(chuàng)建一個名為 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 .

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

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

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

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

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

打開導(dǎo)出的項目并運行游戲：

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

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

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

electron .

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

安裝 Greenworks 和 Steamworks API

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

下載 Greenworks 和 Steamworks API

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

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

構(gòu)建 Steamworks

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

npm install

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

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

npm install node-gyp -g

然后，通過在 Greenworks 項目的根目錄中運行以下命令來構(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)文件會在里面：build\Release\greenworks-win64.node

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

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

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

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

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

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

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

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

啟動 Greenworks

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

不要將此 txt 文件復(fù)制到本教程最后一步的最終版本中，因為它僅用于測試目的。

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

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

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

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

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

Cocos 和 Electron 之間的通信 - 成就

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

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

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

在 Cocos Creator 上，讓我們創(chuàng)建一個類來處理與 Electron 的通信，你可以在成就邏輯確定發(fā)布成就的時間后調(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)尋找一個名為 electron 的對象。這個 electron 對象將成為我們與 Cocos 進程中的 Electron 進程進行通信的大門。我們將通過調(diào)用 invoke 方法進行通信，使用字符串參數(shù)來標(biāo)識要調(diào)用的回調(diào)，后跟任意數(shù)量的參數(shù)。

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

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

我們不能在游戲代碼本身上設(shè)置這個 require('electron')，因為 Cocos 會在構(gòu)建時嘗試找到 electron js 文件并給出錯誤，因為它無法找到它。

接下來，我們需要告訴 Electron 瀏覽器窗口的 HTML 可以與本機節(jié)點進程通信。本質(zhì)上使 electron.js 可用。為此，我們需要在創(chuàng)建 BrowserWindow 時傳遞這些額外的參數(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匹配的方法。在這個例子中，Electron 收到 releaseAchievement息后，它會調(diào)用 reenworks tivateAchievement 告訴它為用戶激活成就。

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

electron .

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

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

npm install electron-packager -g

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

windows:

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

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

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

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

Creator游戲開發(fā)教程PDF免費下載(800+頁)
編寫高效 TS 的一些建議
JavaScript 內(nèi)存詳解 & 分析指南
Creator 最佳文字書寫解決方案！
Creator 2.x 大項目卡頓有救了！

有個機會來了?。?！STEAM