写在前面
本篇是系列专栏的第二篇。如需了解其他内容，可前往：
https://www.bilibili.com/opus/660503568572219426CocosCreator & Steam 开发手记（2）：Greenworks 接入 Steamworks
https://www.bilibili.com/opus/662400522504896535CocosCreator & Steam 开发手记（3）：CocosCreator 与 Electron 通信
开发环境
Steamworks SDK：v1.53a
Greenworks：master
Electron Rebuild：3.2.7
想在 Steam 上架游戏，就必须接入 Steamworks，不幸的是 Steamworks API 官方仅支持 C++。闹呢？它以为所有的游戏全是 C++ 开发的咩？！幸运的是 Steam 自己也意识到了这个问题，于是它为我们推荐了一个神器 —— Greenworks！
Greenworks 是一个 node.js 插件，它允许您通过向 JavaScript 公开大量 Steamworks API 来将您的 HTML5 游戏（或应用程序）与 Steamworks 集成。
啊这……这基本上是把答案甩我脸上让我抄啊！
不愧是 Steam 指定的 JavaScript 第三方解决方案呢！哎呀~真香~
现实很快打了我的脸 —— Greenworks 已经很久没更新了。而它对 Electron 和 Steamworks的版本要求是较为严格的：根据我的测试，即使我用了对应版本的 Steamworks 仍然有问题，因此我猜测是 Electron 版本不匹配导致的。
不过这些都是小问题，虽然不能直接拿来用，但我们可以自己构建 Greenworks。
话不多说，开整！
一、构建 Greenworks
打开 EleProj 文件夹，并在此处打开控制台，输入以下命令：
> npm install --save --ignore-scripts git+https://github.com/greenheartgames/greenworks.git注意！上边这是一行命令！！！
该命令会安装 Greenworks 。安装大概率会遇到一些报错，这基本都是网络问题，使用魔法后就能顺利安装了。（啊！好强的既视感！）
2. 打开 Steamworks 官网：https://partner.steamgames.com，下载最新版 SDK 并解压到 EleProj\node_modules\greenworks\deps 目录下，并将 sdk 文件夹重命名为 steamworks_sdk。
3. 返回 EleProj 目录并输入以下命令：
> npm install该命令会安装所有依赖项。
4. 接着输入以下命令：
> npm install --save-dev electron-rebuild该命令会安装 Electron Rebuild 。Greenworks 推荐我们用它来进行构建，更多 Electron Rebuild 的信息可参考其官网：https://github.com/electron/electron-rebuild。
5. 执行以下命令来构建 Greenworks ：
> .\node_modules\.bin\electron-rebuild.cmd这样，Greenworks 就构建完成啦！
二、使用 Greenworks
1. 在 index.js 中加入以下代码，用来初始化 Steamworks ：
// app模块控制应用程序的事件生命周期。
// BrowserWindow模块创建和管理应用程序窗口。
const { app, BrowserWindow } = require('electron')
// 加载greenworks模块
const greenworks = require('greenworks')
...
...
...
// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
// restartAppIfNecessary 方法将查看您的可执行文件是否通过 Steam 启动
// 如果返回 true，则在必须时启动 Steam 客户端，然后通过客户端再次启动您的游戏，而您应尽快退出进程。
// 而如果返回 false，则您的游戏是由 Steam 客户端启动，无需进行任何操作。
//
// 它需要一个参数：你的AppID。
// 出于测试目的，我在这里使用 Spacewar 的 AppID - 480。
// 这是 Steamworks SDK 中包含的示例游戏（默认情况下，Steam 上的每个人都自动拥有此游戏）
let relaunch = greenworks.restartAppIfNecessary(480)
if (relaunch) {
app.quit()
}
else {
if (greenworks.init()) {
console.log('Steam inited successfully')
// 创建窗口
createWindow()
}
else {
app.quit()
}
}
})
...代码相对简单，注释我也写的比较清楚了，这里就不再赘述。
2. 在 EleProj 目录下，新建一个名为 steam_appid.txt 的文件，只需要在文件中写入你的 appID 并保存即可（与代码中保持一致，比如我两处写的都是480）。
steam_appid.txt
该文件能让 restartappIfNecessary 方法无论何种情况都会返回 false， 这让我们不必通过 Steam 客户端启动游戏也能进行开发与测试。
3. 现在，运行 Electron 来看看效果吧~
> npm start（请确保 Steam 已被安装且正在运行）
运行 Electron
大功告成啦！
什么？你说看起来跟之前没什么区别？毫无成就感？
行吧，那你接着往下看~
三、一个小瑕疵的处理
我先不说我想干什么，我们只需要在 index.js 中加入一行代码即可看到效果：
...
// 加载greenworks模块
const greenworks = require('greenworks')
// 解决steam overlay无效的问题
app.commandLine.appendSwitch('--in-process-gpu')
...再次运行 Electron：
弹出steam社区快捷键提示窗
注意到右下角弹出的 Steam 社区快捷键提示窗了吗？
还愣着干嘛？快试试按 Shift+Tab 呐！
游戏内Steam社区界面覆盖
这下看起来跟之前有区别了吧？(o≖◡≖)♪
有成就感了吧？(o≖◡≖)♪
Steam 界面是 Steam 用户接口的一部分，
游戏本身无需做任何改动，界面会自动挂载到所有通过 Steam 启动的游戏中，激活后可覆盖于几乎所有通过 Steam 启动的游戏上。
以上是 Steamworks 官方文档中的解释说明。也就是说，我们什么都不用做，只要接入了 Steamworks SDK ，我们就具备了该功能。这也是我为什么加粗并划掉了一部分 —— 它跟我们的实际情况不符，我们好赖是加了一行代码呢！（傲娇脸）
那难不成 Steamworks 官方文档写错了？
当然不是，这是由于我们项目的特殊性导致的。
为了使 Steam 叠加层（默认情况下由“Shift + Tab”激活）正常工作，就需要让 Electron 绘制每一帧，但一般来说，Electron 主进程不会重绘每一帧。且我们知道 Electron 的内核是 Chromium ，因此我们需要给 Chromium 中添加一个命令行开关“--in-process-gpu”来解决这个问题。
最后，对于这个问题感兴趣的同学，可以参考 Greenworks 对该问题的解释，链接：https://github.com/greenheartgames/greenworks/blob/master/docs/troubleshooting.md。
关于 Electron 进程相关的信息可参考其官方文档，这也会对我们下一篇要讨论的内容有很大帮助，链接：https://www.electronjs.org/zh/docs/latest/tutorial/process-model。
要是还有精力，根本把持不住对知识渴望的同学，可以继续深入了解下 Chromium 的 GPU 进程和命令行参数。
那么今天的内容就这些吧，如果对你有帮助，求个一键三连。
下一篇我会聊聊 CocosCreator 与 Electron 的通信，敬请期待！
