一键发布STEAM插件！H5游戏通用

Hi，我是property，由于高中学业繁忙，我已经很久没有写文章了。

受晓衡哥的建议，趁着暑寒假期间，有时间来介绍下我自己的作品。

其实距离我公众号上一次发表文章，已经整整三年了，再次翻看自己初二时的文章，感慨万千。

当时我做了一个横版闯关游戏的游戏，还提交到Cocos商城上，但是没有被晓衡哥通过。

原因是我做的游戏，美术素材大部分是在淘宝买的，都是别人游戏中的素材。

不过晓衡哥还是建议我学习为重，寒暑可以来 Store 上发现一些 DEMO 和技术经验，这些年我也一直是这样做。

​

今天给大家介绍一下我的最新作品：一键发布 STEAM/WINDOWS Pro。

插件链接

• https://store.cocos.com/app/detail/5729

示例项目

• https://store.cocos.com/app/detail/5731

插件亮点如下

• 无需复杂配置，一键发布Steam/Windows

• 提供STEAM API/WINDOWS API~直接在Creator里调用

• 可在编辑器内直接预览效果

• 提供可视化构建面板

• 打包速度快

• 带有示例项目

• 以简单的 UI 操作代替复杂的命令行操作

插件图标还是老图没更新哈

为什么要上STEAM？

STEAM大家应该都不陌生吧

一个让无数宅男挥金如土的地方，作为全球最火的PC游戏平台，遍布249个国家/地区,日曝光率更是达到了万亿级别

数据惊人

对于一些内容类、解谜类、关卡类游戏的开发者来说，STEAM 是一个非常不错的市场，盈利方式可以分为传统的付费购买和内购两种。最关键的是！上架不需要版号！！！

重要的事说三遍：

上架不需要版号！！！

上架不需要版号！！！

上架不需要版号！！！

如今游戏审核越来越严格,更有甚者开发两周，审核两个月，这真不是玩笑话

真的离谱

STEAM这块肥肉，不吃白不吃

插件的前世今生

我一直对 PC 游戏非常感兴趣，尤其是那种画质超好的大型游戏，但是CocosCreator关于发布WINDOWS的资料非常少，甚至官方的早期文档左侧目录里连个“发布WINDOWS”的标题都没有，坑也是非常多

图中为CocosCreator3.3文档

打包 WINDOWS 后，游戏并不是全屏的，如何全屏游戏呢？

如何在游戏中去自由控制全屏窗口化？

或修改屏幕分辨率呢？

这方面的资料基本为零！

初二的我曾写过一个构建 WINDOWS 项目的方案，也没有可视化面板。

当时还写了一篇 2W 字长文，对于小白来说用起来还是有一定的门槛。

初中毕业之后，直到现在我高二，我一直再给这个方案做优化。如今已经做成了 CocosCreator3.x 插件。

不仅有了可视化面板、支持编辑器内预览，一键发布，而且提供了大量STEAM API / WINDOWS API。

更有趣的是，虽然插件只支持 CocosCreator3.x，但是 2.x 的项目也可以用的哦！

不仅仅是 2.x 可以用！理论上只要是H5游戏，只要能出 html 文件，都可以用！

PS：当然非 3.x 项目需要用命令行打包。

迟到的主题

今年也就是 24 年年初，我在 CocosStore 官方商城上架了一键发布 STEAM/WINDOWS Pro这款插件

这是一款基于 electron 框架，使用 Cocos Creator 制作的可视化 electron 预览构建一条龙插件。

经过我上百小时技术沉淀~上千次失败精心打造

使用这款插件可以非常简单、省时、高效地将游戏发布到STEAM/WINDOWS，实现真正的一键发布，构建速度飞快，并且支持在 Creator 编辑器内预览！

插件不仅通过导入nircmd内置了超多 PC 游戏常用的 WINDOWS API，比如全屏等对窗口的操作，对电脑音量、分辨率的操作等等。

还集成了 github 开源项目 steamworks.js 这个第三方库成功接入了STEAM API，让接入STEAM成就就像吃豆腐那么简单。

传入成就名字即可

由于 STEAM API 本身是 C ++，根本不支持 JS，接入STEAM API一共有两条思路：

1. 打包 WINDOWS 原生，然后接入 C ++ SDK

2. 打包 Web 然后用 electron 套壳

走第一条路子的门槛比较高，需要熟悉 VS 以及 C++ 等等，而且最大的问题是：不好调试，所以我果断选择了第二条路。

最初我想通过 greenwork 线路接入，结果我头也不回地放弃了，原因就是线路太老了，对一些东西的支持也并不好。所以我索性选择了steamworks.js

仔细看...它支持的是VS2013？nodejs 8？？？

我不是 github 上直接 copy 了过来，我把各种API包括项目的预览和构建做到了和 Creator 编辑器的高度结合。

保证项目是可以跑通的，而且我还写了很多避坑的点。

从网上把开源项目下载下来想跑通得也得折腾个一两天，前提还得是你熟悉 electron 和 STEAM 相关知识，如果从来没搞过这些，那需要的时间成本就......

在接入过程中我遇到了各种各样的奇奇怪怪的问题，甚至可能遇到了 nodejs 本身的bug：

C++模块进行 asar 加密后会调用 C 盘临时生成路径下的临时文件，问了一些前端大佬也没得出结果。

看我 CSDN 说是 nodejs 本身的bug，最终我把 asar 加密包和 C++ 模块进行了分离，问题完美解决。

总之，自己从上到下跑通一遍，非常不容易。

怕大家用不明白，我还写了配套的 Demo，见下图：

右上角识别出了STEAM用户名和ID~右下角检测成就

PC游戏常见的设置分辨率和窗口

WINDOWS原生API~你值得拥有

nodejs原生接口

如何使用

环境安装

首先安装插件依赖环境，打开nodejs中文网，下载并一路回车安装nodejs，为了避免网络问题，强烈建议换成淘宝源

// 设置为淘宝源
npm config set registry https://registry.npm.taobao.org/

// 查看当前使用的源
npm config get registry

全局安装依赖

npm install -g electron
npm install -g electron-packager
npm install -g steamworks.js

如果遇到了系统禁止运行脚本的情况，需要手动改一下，解决方案看下文的【失败怎么办】

把插件添加到目标项目的extensions文件夹下，强烈推荐手动添加。

请在 …\extensions\BuildWindowsAPP\main\preview\preview.js 中把steamAppID变量设置成你的游戏ID，如果只想发布WINDOWS不上STEAM，可以默认ID为480，也可以改主进程不初始化STEAM SDK。

同理也需要在…\extensions\BuildWindowsAPP\main\build.js中设置，请在启动游戏前打开Steam，不然没有任何反应。

编辑器内预览

构建

构建前需要先打包 web-mobile 到插件指定目录下 ，之后根据需要选好配置，点击一键发布即可。

打包成功后，请在打包后点击插件的【打开steamSDK目录】按钮，把目录内的steamworks.js文件夹复制到【输出目录】的resources文件夹下。

不然会初始化STEAM API失败，当然可以通过修改主进程不初始化STEAM SDK。

2.x项目及其他H5游戏如何使用插件

这里就以 CocosCreator2.x 项目为例，都是一样的道理。

如何使用API？

如图在 2.x 项目中创建一个脚本，导入 electron，并且定义一个方法，可以参照插件的API脚本定义。

然后打包 web-mobile

在打包出的 index.html 里合适的位置加上这几句代码来定义全局变量。

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

然后把打包出的所有文件复制粘贴到插件的web目录下。仍可以打开任意 3.x 项目使用图形化界面打包，当然这么做有点麻烦hhh......

推荐使用 VSCODE 中命令行打包，因为这样即使失败也可以获取到更多log，并且窗口不会一闪而过。

打包代码就在build.bat文件中，该文件在插件目录\main\build

成功打包！默认是全屏的，点击按钮后顺利窗口化

关于 STEAM 成就的接入

只有已经发布的游戏才可以编辑成就，在接入成就前，确保你已经修改了代码中的steamAppID（改成你自己的游戏）。

请在你的 Steam 游戏管理后台添加新的成就 并且要记住你起的名字，之后会用到。

之后在直接调用我提供的API即可 需要传入的name就是让你记住的你自己取的名字

steamworks管理后台

没错传入一个成就名即可，就是这么简单

失败怎么办

首先保证环境安装完成，图形化打包遇到下面这种情况：

大概率是因为没有全局安装 electron-packager。乱码是因为出现了中文，而乱码的内容，应该就是：

如果安装环境过程中被打断，建议删除已安装但没安装完的部分并且重新安装。

保证网络正常且尽量使用淘宝源，项目路径不能有中文 项目不能直接在盘下eg:

• 直接放在D盘下：D:\你的项目 ×

• 不直接放：D:\Cocos\你的项目 √

请确保系统允许运行脚本，如果不行，在命令行输入：

set-ExecutionPolicy RemoteSigned

选择 A 即可，请确保再次打包时你的项目可以被覆盖，如果原项目不能被删除，也会导致打包失败。

注意，Mac电脑上不能使用。

一些想法

我将不断优化这个插件，目前想的是将来让插件不仅仅支持WINDOWS/STEAM。

还能够一键发布 Linux 和 Mac，一旦我有了苹果设备就会开始做，长这么大没用过苹果设备hhh。

我想在以后接入一些 Mac 和 Linux 独有的API，让游戏发布 STEAM 不仅仅支持WINDOWS。

有任何问题欢迎联系我 邮箱：2573126576@qq.com

我还在上高中啦，不能接合作。

再等一年半，高中毕业了我就火力全！

都看到这里了！感谢！

大家过年好！用晓衡哥的红包封面，给大家拜年啦！

过年插件限时优惠哦，点击阅读原文直达~

往期推荐

• 1分钟搞定跨境支付！什么GPT4、Mj、TikTok、GooglePlay通通不在话下！

• “短剧狂热全球！”2023全球应用(非游戏)收入531亿美元！短剧+游戏成为增长新动力
  

• “下载量惊人！”2023年12月全球手游下载TOP10

• 上千款小游戏源码，可直接打包H5\微信\抖音，赶紧收藏！

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦