如何将 Cocos Creator 游戏发布到 Steam 平台？
Creator星球游戏开发社区
共 9053字，需浏览 19分钟
·
2023-11-11 21:01
Hi！大家好，我是晓衡。
为响应老铁们的需求，如何将 Cocos Creator 游戏发布到 Steam 平台？晓衡翻遍历史，挖出C姐曾经发布过的一篇文章，介绍如何通过 Electron 将 Cocos Creator 游戏打包成桌面游戏，希望能帮助到大家。
游戏链接：
https://store.steampowered.com/app/1636700/Wirewalk/
Node.js 来实现，所使用到的工具包括 Electron 和 Greenworks。基于 Electron，可以轻松将 Cocos Creator 发布到任何桌面。
注：本文所有命令行都将从 Windows VSCode终端或Windows Powershell运行。
1
了解 Node.js
Node.js 是一个功能强大的工具，通过使用 JavaScript 作为通用语言部署到许多原生平台，可以开发多种类型的应用程序和其他工具。
2
安装 Electron
Node.js（请选择最新的稳定版本）
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的空白应用程序窗口，说明你已完成。
BrowserWindow。
了解更多创建 Electrom 信息：https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file
将项目从 Creator 导出到 Electron
Electron 项目中的某处，在 Electron 项目的根文件夹中创建一个名为cocosExport的子文件夹。
Electron 的 index.js，你要做的是在创建 mainWindow 对象后在任何地方添加：
mainWindow.loadURL('file://' + __dirname + '/cocosExport/web-desktop/index.html').then(() =>{
});
electron .
HTML 以及 Electron 的 BrowserWindow 进行额外调整，使其看起来更流畅。接下来，讲一下如何集成 Steamworks API。
安装 Greenworks 和 Steamworks API
Steamworks 本身不支持 Electron（甚至在 JavaScript 中也不支持），因此你需要下载一个名为 Greenworks 的工具。这个工具也是一个 Node.js 包，它通过在 JavaScript 中暴露一个接口来访问 Steam API 的本地编译的 C++函数。
下载 Greenworks 和 Steamworks API
Greenworks 存储库的主分支并将其放在单独的文件夹中。
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。
Cocos 和 Electron 之间的通信 - 成就
成就功能 来举例说明使用 Steamworks 的功能。
Steamworks 网站上创建一个成就：
API 名称是我们需要传递给 greenworks 的名称。
类来处理与 Electron 的通信，你可以在成就逻辑确定发布成就的时间后调用该类。此代码在 TypeScript 中：
export default class Electron
{
static releaseAchievement(id: string): void
{
(window as any).electron.ipcRenderer.invoke('releaseAchievement', id);
}
}
Electron.releaseAchivement('bad_cats');
electron 的对象。这个 electron 对象将成为我们与 Cocos 进程中的 Electron 进程进行通信的大门。我们将通过调用 invoke 方法进行通信，使用字符串参数来标识要调用的回调，后跟任意数量的参数。
electron 。我发现更简单的方法是通过编辑构建项目时由 Cocos 生成的结果HTML（在 cocosExport 文件夹中的 index.html），将以下内容添加到输出 HTML，在 <body > tag之前。
<script>
window.electron = require('electron');
</script>
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
electron-packager . MyGame --platform=win32 --arch=x64 --overwrite
–platform 值来构建 Mac 和 Linux，可以在 electron 文档中找到可用平台的列表。
https://electron.github.io/electron-packager/master/modules/electronpackager.html#officialplatform
评论