手把手教你cocos creator集成steam sdk

---

前言

本文是用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

大功告成！！！希望能帮到各位小伙伴