How to publish Cocos Creator games to the Steam platform?

Hi! Hello everyone, my name is Xiaoheng.

In response to the needs of veterans, how to publish Cocos Creator games to the Steam platform? Xiaoheng went through history and dug out an article that Sister C once published, introducing how to package the Cocos Creator game into a desktop game through Electron . I hope Can help everyone.

This is Danilo Ganzella, a game developer from Sao Paulo, Brazil. He exported his game "Wirewalk()↳" to Steam, the world's largest PC game platform, through Cocos Creator.

Game link:
https://store.steampowered.com/app/1636700/Wirewalk/

Danilo's solution is achieved by using Node.js using tools including Electron and < /span> GreenworksElectron, Cocos Creator can be easily published to any desktop. . Based on

With Danilo's permission, we translated his solution into this article. If your game is developed using Cocos Creator and you want to publish it as a desktop application, this article will help you.

Note: All command lines in this article will be run from the Windows VSCode terminal or Windows Powershell .

Learn about Node.js

Node.js is a powerful tool that enables the development of many types of applications and other tools by deploying to many native platforms using JavaScript as a common language.

Install Electron

1. Installation Node.js (please select the latest stable version)

2. Create a Electron project, open VSCode, find the project folder you want, and enter:

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

Create a file named index.js in the same folder with the following content:

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;
    });
});

It can be tested by executing.

electron .

If it opens a blank application window titledMyGame, you're done.

Now we need to provide the Cocos exported project to BrowserWindow.

Learn more about creating Electrom: https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file

Export project from Creator to Electron

Open your Cocos Creator project and select where you want to export it toElectron somewhere in the project's root folderElectron Create a subfolder named cocosExport.

Open the exported project and run the game:

Going back to of Electron , what you have to do is add anywhere after creating the object: index.jsmainWindow

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

Now simply execute it and the game will run!

electron .

You may need to make additional adjustments to HTML and Electron of BrowserWindow exported from Cocos to make it look Smoother. Next, let’s talk about how to integrate the Steamworks API.

Install Greenworks and Steamworks API

Since Steamworks does not support Electron natively (not even in JavaScript), you need to download one Tool namedGreenworks. This tool is also a Node.js package that accesses 's natively compiled by exposing an interface in JavaScript function. Steam APIC++

Download Greenworks and Steamworks API

Download Greenworks the master branch of the repository and place it in a separate folder.

Download Steamworks API from the Steam Developer Portal, and place Steamworks API in the Greenworks root directory deps folder and rename the Steamworks folder to steamworks_sdk. We need to build Greenworks so that the binaries run correctly on the Node.js version you downloaded and installed.

Build Steamworks

First, run in the root folder of Greenworks so that all dependencies are installed correctly. Greenworks

npm install

You can then build Greenworks itself. We need a build tool named node-gyp . node.js

First, install globally node-gyp by running the following command:

npm install node-gyp -g

Then, build by running the following command in the root directory of the Greenworks project:Greenworks

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

Use the electron version you installed to change electron the version, for example 12.0.7, the relevant files will be in: build\Release\greenworks-win64. node

Learn more about building Greenworks: https://github.com/greenheartgames/greenworks/blob/master/docs/build-instructions-electron.md

Copy Greenworks to your Electron project and load it.

Now, you need to copy some files into your Electron project.

First, create a folder named in the root folder of the Electron project. In it, copy the files and folders in the project root. GreenworksGreenworksgreenworks.jslib

In the lib folder, replace the file greenworks-win64.node with the file you built in the previous step.

Now just add the following line at the top of your electronic project's index.js file:

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

You’re done! The Greenworks object can now be logged to see what methods it has.

Start Greenworks

To launchGreenworks, the first thing you need to do is create a file namedsteam_appid.txt that contains your application is the one in the store, such as my game "Wirewalk()↳", Steam is 1636700. ID and nothing else. The application ID

Do not copy this txt file into the final version of this tutorial as it is for testing purposes only.

Now you can start Greenworks!

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

Startup Greenworks should be the first thing you do after receiving the "ready" event.

restartAppIfNecessaryThe function prevents the game from launching outside of Steam and restarts it by opening it from Steam. But this is just for publishing - since the presence of file steam_appid.txt will cause restartAppIfNecessary to always return false.

Also, while testing, make sure Steam is open and running and you have the game ID.

Communication between Cocos and Electron - Achievements

Now, let's illustrate the functionality of using by implementing Steam 成就功能. Steamworks

Start by creating an achievement on the Steamworks website:

Remember that the API name is the name we need to pass to greenworks.

On Cocos Creator, let's create a 类 to handle communication with Electron, which you can call after the achievement logic determines when to publish the achievement this class. This code is in TypeScript:

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

Now in Cocos you would call:

Electron.releaseAchivement('bad_cats');

This method will look for an object named electron in the global scope. This electron object will be our door to communicate with the Electron process in the Cocos process. We will communicate by calling the invoke method, using a string parameter identifying the callback to be called, followed by any number of parameters.

Now, we need to define this object electron . I found an easier way is by editing the results generated by Cocos when building the project (in the folder ), add the following to the output , before the tag. HTMLcocosExportindex.htmlHTML<body >

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

We cannot set this require('electron') on the game code itself because Cocos will try to find the electron js file at build time and give an error because It can't find it.

Next, we need to tell Electron that the browser window HTML can communicate with the native node process. Essentially making electron.js available. To do this, we need to pass these extra parameters when creating BrowserWindow.

webPreferences: { nodeIntegration: true, contextIsolation: false }

Finally, add the receiver function on Electron. After creating mainWindow, you can add this code anywhere.

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

handleThe method is the method that matches invoke. In this example, after Electron receives the releaseAchievement message, it calls reenworks tivateAchievement telling it to activate the achievement for the user.

Test your game again by running:

electron .

Export projects to Windows, Mac or Linux

First, install globally by running electron-packager.

npm install electron-packager -g

Finally, run the following lines to build your game!

windows:

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

You can also build for Mac and Linux by changing the –platform value, a list of available platforms can be found in the electron documentation.

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

Thanks Danilo for sharing! Cocos is actively promoting official adaptation for several major platforms including Steam. Before that, if you have this need, you may wish to try the above method first .

Finally, Xiaoheng recommends another free Cocos Creator plug-in: one-click publishing for Windows.

Authorproperty also comes with a complete video tutorial + a 10,000-word graphic tutorial. I won’t go into details here. Friends in need, Let’s take action now!

If this article is helpful to you, thank you for liking and sharing. See you in the next issue!

Good recent articles