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 操作代替复杂的命令行操作
![10e84a446416b4cdcfb816d67e047247.png](https://i-blog.csdnimg.cn/blog_migrate/a448ba2d206483f9dbdb86186380fdb0.png)
为什么要上STEAM?
STEAM大家应该都不陌生吧
![b3fc059bc7903dcd9a2c6f3e99edf372.png](https://i-blog.csdnimg.cn/blog_migrate/51147b29a77190bcc4b1512fe8a93650.png)
一个让无数宅男挥金如土的地方,作为全球最火的PC游戏平台,遍布249个国家/地区,日曝光率更是达到了万亿级别
![e7d917f7fd756f4bdb87859cc0a98de6.png](https://i-blog.csdnimg.cn/blog_migrate/3cdba14a77adddd758bbc7111f30472e.png)
对于一些内容类、解谜类、关卡类游戏的开发者来说,STEAM 是一个非常不错的市场,盈利方式可以分为传统的付费购买和内购两种。最关键的是!上架不需要版号!!!
重要的事说三遍:
上架不需要版号!!!
上架不需要版号!!!
上架不需要版号!!!
如今游戏审核越来越严格,更有甚者开发两周,审核两个月,这真不是玩笑话
![52cd6cc22495c50ee899472be5ccfea8.png](https://i-blog.csdnimg.cn/blog_migrate/4814c33cb361d22fb7f8fadf7ce19090.png)
STEAM这块肥肉,不吃白不吃
插件的前世今生
我一直对 PC 游戏非常感兴趣,尤其是那种画质超好的大型游戏,但是CocosCreator关于发布WINDOWS的资料非常少,甚至官方的早期文档左侧目录里连个“发布WINDOWS”的标题都没有,坑也是非常多
![d7de2f56a7f4e933c870ed806df89132.png](https://i-blog.csdnimg.cn/blog_migrate/360ef6694119325548f14b98b7e84918.png)
打包 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 预览构建一条龙插件。
经过我上百小时技术沉淀~上千次失败精心打造
![ef470aaea5f44e2d61d3c94bfaa05172.png](https://i-blog.csdnimg.cn/blog_migrate/5a3df613d476188d55ab822368878dfe.png)
使用这款插件可以非常简单、省时、高效地将游戏发布到STEAM/WINDOWS,实现真正的一键发布,构建速度飞快,并且支持在 Creator 编辑器内预览!
插件不仅通过导入nircmd内置了超多 PC 游戏常用的 WINDOWS API,比如全屏等对窗口的操作,对电脑音量、分辨率的操作等等。
还集成了 github 开源项目 steamworks.js 这个第三方库成功接入了STEAM API,让接入STEAM成就就像吃豆腐那么简单。
![a6c8b647b8a7e4c345adc104330a788b.png](https://i-blog.csdnimg.cn/blog_migrate/26ae3c060402746b22b8330c38343ce5.png)
由于 STEAM API 本身是 C ++,根本不支持 JS,接入STEAM API一共有两条思路:
打包 WINDOWS 原生,然后接入 C ++ SDK
打包 Web 然后用 electron 套壳
走第一条路子的门槛比较高,需要熟悉 VS 以及 C++ 等等,而且最大的问题是:不好调试,所以我果断选择了第二条路。
最初我想通过 greenwork 线路接入,结果我头也不回地放弃了,原因就是线路太老了,对一些东西的支持也并不好。所以我索性选择了steamworks.js
![37449f37f762d1bee084beead7dbb0b1.png](https://i-blog.csdnimg.cn/blog_migrate/cfc38e51bce9e7133afc5556e9b37a77.png)
我不是 github 上直接 copy 了过来,我把各种API包括项目的预览和构建做到了和 Creator 编辑器的高度结合。
保证项目是可以跑通的,而且我还写了很多避坑的点。
从网上把开源项目下载下来想跑通得也得折腾个一两天,前提还得是你熟悉 electron 和 STEAM 相关知识,如果从来没搞过这些,那需要的时间成本就......
在接入过程中我遇到了各种各样的奇奇怪怪的问题,甚至可能遇到了 nodejs 本身的bug:
C++模块进行 asar 加密后会调用 C 盘临时生成路径下的临时文件,问了一些前端大佬也没得出结果。
看我 CSDN 说是 nodejs 本身的bug,最终我把 asar 加密包和 C++ 模块进行了分离,问题完美解决。
总之,自己从上到下跑通一遍,非常不容易。
![f9d69a3218c2d3fbbd220cc4ff16f38e.png](https://i-blog.csdnimg.cn/blog_migrate/98542aa4e6a52a6c50bc457eeed2e406.png)
怕大家用不明白,我还写了配套的 Demo,见下图:
![cc31f499bb4f61733d9e76b35d72aa73.png](https://i-blog.csdnimg.cn/blog_migrate/5fb4673202b02b8c8d0ada73fd037a94.png)
![b4373ef2ce4490b260bac82f8f1d4d77.png](https://i-blog.csdnimg.cn/blog_migrate/e681b07ebc67f23801cb480236e6181f.png)
![37c012ce2faed0af001c2e2e33fff24e.png](https://i-blog.csdnimg.cn/blog_migrate/ca070c4083e016e4fb14dfdb2b229f11.png)
![96e82b9f1245612208d81deca3b7d1d9.png](https://i-blog.csdnimg.cn/blog_migrate/562b3e48c8d2c9e14164f0f10a942ab5.png)
如何使用
环境安装
首先安装插件依赖环境,打开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文件夹下,强烈推荐手动添加。
![e58d48576750218e5119daef624f35a0.png](https://i-blog.csdnimg.cn/blog_migrate/da6c34a0ca1a4ca416896bc8a7ce161a.png)
请在 …\extensions\BuildWindowsAPP\main\preview\preview.js 中把steamAppID变量设置成你的游戏ID,如果只想发布WINDOWS不上STEAM,可以默认ID为480,也可以改主进程不初始化STEAM SDK。
同理也需要在…\extensions\BuildWindowsAPP\main\build.js中设置,请在启动游戏前打开Steam,不然没有任何反应。
![6d5422306d899d24c436556abaf86a8d.png](https://i-blog.csdnimg.cn/blog_migrate/0d301d99908380c3d5b0276826ee4e06.png)
构建
构建前需要先打包 web-mobile 到插件指定目录下 ,之后根据需要选好配置,点击一键发布即可。
![86fc65c040bf97311f3c25945b8cdbe0.png](https://i-blog.csdnimg.cn/blog_migrate/a598c6c1e57e6bb752dffca8b883436b.png)
打包成功后,请在打包后点击插件的【打开steamSDK目录】按钮,把目录内的steamworks.js文件夹复制到【输出目录】的resources文件夹下。
不然会初始化STEAM API失败,当然可以通过修改主进程不初始化STEAM SDK。
2.x项目及其他H5游戏如何使用插件
这里就以 CocosCreator2.x 项目为例,都是一样的道理。
如何使用API?
如图在 2.x 项目中创建一个脚本,导入 electron,并且定义一个方法,可以参照插件的API脚本定义。
![11763ab263d5dd5d2f00e890b80f3718.png](https://i-blog.csdnimg.cn/blog_migrate/c9b43fcb5ec1edd73eb2882fefdf72a0.png)
然后打包 web-mobile
![d0afdaadad6d781f606412c1ca63e901.png](https://i-blog.csdnimg.cn/blog_migrate/1161a51448d04a73bd7de99d16904c30.png)
在打包出的 index.html 里合适的位置加上这几句代码来定义全局变量。
<script>
window.electron = require('electron');
</script>
然后把打包出的所有文件复制粘贴到插件的web目录下。仍可以打开任意 3.x 项目使用图形化界面打包,当然这么做有点麻烦hhh......
推荐使用 VSCODE 中命令行打包,因为这样即使失败也可以获取到更多log,并且窗口不会一闪而过。
打包代码就在build.bat文件中,该文件在插件目录\main\build
![929d360d0ef994dd376b95d109430c6a.png](https://i-blog.csdnimg.cn/blog_migrate/72c71b7a0c6c8b5a476c23b59e29b54c.png)
成功打包!默认是全屏的,点击按钮后顺利窗口化
![5d599f9d520bcb432e8b5d68ffb1c1e0.png](https://i-blog.csdnimg.cn/blog_migrate/b669da273adc3580a07f19663c7cea07.png)
关于 STEAM 成就的接入
只有已经发布的游戏才可以编辑成就,在接入成就前,确保你已经修改了代码中的steamAppID(改成你自己的游戏)。
请在你的 Steam 游戏管理后台添加新的成就 并且要记住你起的名字,之后会用到。
之后在直接调用我提供的API即可 需要传入的name就是让你记住的你自己取的名字
![2773de72777a20ca7c926e6e0a857c9b.png](https://i-blog.csdnimg.cn/blog_migrate/fc903e6796c80c27db01bb0f5fc9c093.png)
![edaad04425e2b941c9d525710a97a582.png](https://i-blog.csdnimg.cn/blog_migrate/2436c69dbf0f0622c20f5902199eaa19.png)
失败怎么办
首先保证环境安装完成,图形化打包遇到下面这种情况:
![7b6346155e2e24244ae754dfd029f08a.png](https://i-blog.csdnimg.cn/blog_migrate/4caaa2b1ba546c34b70b880ad4895ca4.png)
大概率是因为没有全局安装 electron-packager。乱码是因为出现了中文,而乱码的内容,应该就是:
![100943ed6e902a8665e293ede0094f12.png](https://i-blog.csdnimg.cn/blog_migrate/11a4008374166122d088ace093451cdc.png)
如果安装环境过程中被打断,建议删除已安装但没安装完的部分并且重新安装。
保证网络正常且尽量使用淘宝源,项目路径不能有中文 项目不能直接在盘下eg:
直接放在D盘下:D:\你的项目 ×
不直接放:D:\Cocos\你的项目 √
请确保系统允许运行脚本,如果不行,在命令行输入:
set-ExecutionPolicy RemoteSigned
选择 A 即可,请确保再次打包时你的项目可以被覆盖,如果原项目不能被删除,也会导致打包失败。
注意,Mac电脑上不能使用。
一些想法
我将不断优化这个插件,目前想的是将来让插件不仅仅支持WINDOWS/STEAM。
还能够一键发布 Linux 和 Mac,一旦我有了苹果设备就会开始做,长这么大没用过苹果设备hhh。
我想在以后接入一些 Mac 和 Linux 独有的API,让游戏发布 STEAM 不仅仅支持WINDOWS。
有任何问题欢迎联系我 邮箱:2573126576@qq.com
我还在上高中啦,不能接合作。
再等一年半,高中毕业了我就火力全!
都看到这里了!感谢!
大家过年好!用晓衡哥的红包封面,给大家拜年啦!
过年插件限时优惠哦,点击阅读原文直达~
往期推荐
点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦