前言
本文是用electron将cocos creator开发的游戏打包发布steam平台,希望能帮助有需要的人
一、cocos creator
cocos creator 发布成web-mobile
二、electron
1.添加electron国内镜像
国内在安装electron会出现卡死的情况,可以通过添加electron国内镜像的方法来解决
找到你的npm配置文件:c:\用户\{你的用户名}\.npmrc,添加以下内容
# electron 国内镜像
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
2.安装electron
init初始化,创建一个空文件夹(尽量不要函中文、空格和一些特殊字符)
进入文件夹,打开控制台,输入命令
yarn init
此时,文件夹中会多出一个package.json的文件,大致长这样:
{
"name": "demo", // 后面打包的目录会生成demo-win32-x64,以windows为例
"version": "1.0.0",
"description": "Cocos Creator Steam Game", // 必须
"main": "index.js", // 需要手动新建一个index.js
"author": "Jason Woo", // 必须
"license": "MIT"
}
接下来安装electron及electron-forge打包工具
yarn add -D electron
yarn add -D @electron-forge/cli
npx electron-forge import
3.将cocos creator构建生成的web-mobile文件夹拷贝到根目录
web-mobile文件夹在cocos 项目目录下的build下
4.安装steamworks.js库
这里推荐用steamworks.js库,网上有很多用greenworks库的教程,不过greenworks已经N年没更新了,如果要用steam 最新的sdk需要修改代码。
5.在根目录创建index.js的文件,代码如下:
const { app, BrowserWindow, ipcMain } = require('electron');
const steamworks = require('steamworks.js');
const steamAppID = 480; // 正式打包用自己的steamAppID
let mainWindow = null;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1920,
height: 1080,
show: true,
fullscreen: true, // 是否全屏运行,如果是窗口模式运行,steam的overlay层会出现无法正常渲染的情况
resizable: false,
title: 'cocos steam',
webPreferences: {
// 这里必须要设置,不然就无法在index.html文件中require electron了
contextIsolation: false,
nodeIntegration: true,
},
});
// mainWindow.openDevTools(); // 开启调试工具
mainWindow.setAspectRatio(1920 / 1080);
mainWindow.loadFile('web-mobile/index.html');
mainWindow.removeMenu();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
let client;
app.whenReady().then(() => {
// 设置必须从steam启动游戏, 本机调试的时候可以在根目录添加steam_appid.txt文件,里面写入480,这样restartAppIfNecessary就返回false了
if (steamworks.restartAppIfNecessary(steamAppID)) {
app.quit();
} else {
client = steamworks.init(steamAppID);
if (client) {
createWindow();
} else {
app.quit();
}
}
});
app.on('window-all-closed', () => {
app.quit();
});
// steam overlay渲染
steamworks.electronEnableSteamOverlay();
需要注意的地方,在上面的代码注释中有说明
6.现在可以通过以下命令运行你的程序了
yarn start
如果不出意外的话,这时应该可以看到右下角的提示了
如果用窗口模式运行这个提示会渲染失败,纯白框,如果是无边框的窗口模式,steam overlay的部分会半透明。如果有小伙伴解决了这个问题,请赐教!因此,我还是推荐用全屏运行
三、cocos creator 与 electron通信
1.创建cocos creator构建模版
打开cocos项目目录下的build-templates/web-mobile/index.ejs文件
在body标签前增加以下代码
<script>
window.electron = require('electron');
</script>
2.在cocos creator中创建一个electron工具类
现在演示在cocos creator中获取steam的accountId
cocos creator代码
export class ElectronHelper {
private static _instance: ElectronHelper | null = null;
private get electron() {
return window.electron ?? null;
}
static get instance() {
if (this._instance === null) {
this._instance = new ElectronHelper();
}
return this._instance;
}
check() {
return this.electron !== null;
}
invoke<T>(channel: string, ...args: any[]) {
return new Promise<T>((resolve, reject) => {
this.electron?.ipcRenderer?.once(channel, (e, res) => {
resolve(res as T);
});
this.electron?.ipcRenderer?.invoke(channel, args);
});
}
send(channel: string, ...args: any[]) {
this.electron?.ipcRenderer?.invoke(channel, args);
}
getAccountID() {
return this.invoke<number>('getAccountID');
}
}
3. 在electron 的index.js中监听cocos creator发过来的事件
// 新增监听函数,并在creatWindow()之后 调用函数
function initHanldes() {
ipcMain.handle('getAccountID', (event) => {
const accountId = client.localplayer.getSteamId().accountId;
console.log(accountId);
// 发送事件,这里用相同的事件名,是为了cocos中使用electron?.ipcRenderer?.once相同的channel
mainWindow.webContents.send('getAccountID', accountId);
});
}
完整inde.js代码如下
const { app, BrowserWindow, ipcMain } = require('electron');
const steamworks = require('steamworks.js');
const steamAppID = 480; // 正式打包用自己的steamAppID
let mainWindow = null;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1920,
height: 1080,
show: true,
fullscreen: true, // 是否全屏运行,如果是窗口模式运行,steam的overlay层会出现无法正常渲染的情况
resizable: false,
title: 'cocos steam',
webPreferences: {
// 这里必须要设置,不然就无法在index.html文件中require electron了
contextIsolation: false,
nodeIntegration: true,
},
});
// mainWindow.openDevTools(); // 开启调试工具
mainWindow.setAspectRatio(1920 / 1080);
mainWindow.loadFile('web-mobile/index.html');
mainWindow.removeMenu();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
let client;
app.whenReady().then(() => {
// 设置必须从steam启动游戏, 本机调试的时候可以在根目录添加steam_appid.txt文件,里面写入480,这样restartAppIfNecessary就返回false了
if (steamworks.restartAppIfNecessary(steamAppID)) {
app.quit();
} else {
client = steamworks.init(steamAppID);
if (client) {
createWindow();
initHanldes();
} else {
app.quit();
}
}
});
app.on('window-all-closed', () => {
app.quit();
});
function initHanldes() {
ipcMain.handle('getAccountID', (event) => {
const accountId = client.localplayer.getSteamId().accountId;
console.log(accountId);
mainWindow.webContents.send('getAccountID', accountId);
});
}
// steam overlay渲染
steamworks.electronEnableSteamOverlay();
4. cocos creator中使用ElectronHelper工具类获取steam accountId
代码如下
ElectronHelper.instance.getAccountID().then((gameId)=>{
console.log(gameId)
})
四、打包
给应用程序添加icon,将图标文件favicon.ico(名字随意)放入根目录下
修改forge.config.js,添加icon配置
module.exports = {
packagerConfig: {
asar: true,
icon: './favicon.ico',
},
// ...
};
打包命令如下
yarn package
运行完命令这时会在根目录出现out目录
下面这部至关重要,需要将steam_api64.dll文件复制到./out/对应的目录下
这里的demo-win32-x64 是根据你package.json中的name名字自动生成的
打开powershell,输入以下命令:把demo-win32-x64替换成你自己的目录
Copy-Item -Path ./node_modules/steamworks.js/dist/* -Destination ./out/demo-win32-x64/resources/app.asar.unpacked/node_modules/steamworks.js/dist/ -Recurse -force
你也可以将上面的命令写到package.json中,如下
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package && powershell Copy-Item -Path ./node_modules/steamworks.js/dist/* -Destination ./out/demo-win32-x64/resources/app.asar.unpacked/node_modules/steamworks.js/dist/ -Recurse -force",
"make": "electron-forge make && powershell Copy-Item -Path ./node_modules/steamworks.js/dist/* -Destination ./out/demo-win32-x64/resources/app.asar.unpacked/node_modules/steamworks.js/dist/ -Recurse -force"
}
重新运行打包命令
yarn package
大功告成!!!希望能帮到各位小伙伴