Hi！大家好，我是曉衡。

為響應(yīng)老鐵們的需求，如何將 Cocos Creator 游戲發(fā)布到 Steam 平臺(tái)？曉衡翻遍歷史，挖出C姐曾經(jīng)發(fā)布過的一篇文章，介紹如何通過 Electron 將 Cocos Creator 游戲打包成桌面游戲，希望能幫助到大家。

游戲鏈接：
https://store.steampowered.com/app/1636700/Wirewalk/

注：本文所有命令行都將從 Windows VSCode 終端或 Windows Powershell 運(yùn)行。

    
    

     npm init -y
npm i --save-dev electron
    
    

    
    

     const { app, BrowserWindow } = require('electron')

app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', function() {

    mainWindow = new BrowserWindow({
      width: 768,
      height: 768,
      show: true,
      fullscreen: false,
      resizable: false,
      frame: true,
      title: "MyGame"
    });

    mainWindow.removeMenu();

    mainWindow.on('closed', function() {
      mainWindow = null;
    });
});
    
    

    
    

     electron .
    
    

了解更多創(chuàng)建 Electrom 信息：https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file

將項(xiàng)目從 Creator 導(dǎo)出到 Electron

    
    

         mainWindow.loadURL('file://' + __dirname + '/cocosExport/web-desktop/index.html').then(() =>{
    });
    
    

    
    

     electron .
    
    

安裝 Greenworks 和 Steamworks API

下載 Greenworks 和 Steamworks API

構(gòu)建 Steamworks

    
    

     npm install
    
    

    
    

     npm install node-gyp -g
    
    

    
    

     node-gyp rebuild --target=<electron_version> --arch=x64 --dist-url=https://atom.io/download/atom-shell

    
    

了解更多構(gòu)建 Greenworks 的信息：https://github.com/greenheartgames/greenworks/blob/master/docs/build-instructions-electron.md

    
    

     const greenworks = require(‘./greenworks/greenworks’);
    
    

啟動(dòng) Greenworks

不要將此 txt 文件復(fù)制到本教程最后一步的最終版本中，因?yàn)樗鼉H用于測試目的。

    
    

           let relaunch = greenworks.restartAppIfNecessary(1636700);
 
      if(relaunch){
        app.quit();
      }
      else{
        if(greenworks.init()){
          console.log('Steam inited successfully');
          loadWindow();
        }
        else{
          app.quit();
        }
      }
    
    

Cocos 和 Electron 之間的通信 - 成就

    
    

     export default class Electron
{
    static releaseAchievement(id: string): void
    {
        (window as any).electron.ipcRenderer.invoke('releaseAchievement', id);
    }
}
    
    

    
    

     Electron.releaseAchivement('bad_cats');
    
    

    
    

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

    
    

     webPreferences: { nodeIntegration: true, contextIsolation: false }
    
    

    
    

       ipcMain.handle('releaseAchievement', (event, achievementString) => {
    console.log('releasing achievement', achievementString);
    greenworks.activateAchievement(achievementString);
  });
    
    

    
    

     electron .
    
    

將項(xiàng)目導(dǎo)出到 Windows、Mac 或 Linux

    
    

     npm install electron-packager -g
    
    

    
    

     electron-packager . MyGame --platform=win32 --arch=x64 --overwrite
    
    

https://electron.github.io/electron-packager/master/modules/electronpackager.html#officialplatform

• ChatGPT有什么新奇的使用方式？
  

• 僅用4臺(tái)電腦開局10年兩套房！講講我那些年的經(jīng)歷
  

• 這個(gè)殘影特效，簡直太酷了！
  

• 6連招！Cocos卡牌游戲優(yōu)化技巧

• 史上最強(qiáng) Cocos Shader 學(xué)習(xí)資源推薦！