有個(gè)機(jī)會(huì)來(lái)了?。。TEAM
Cocos 官方今天發(fā)布了 Cocos Creator 3.3.0 版本，《奔跑吧小仙女》同步升級(jí)最新版引擎，購(gòu)買過(guò)的伙伴可免費(fèi)升級(jí)。
Cocos Store 購(gòu)買的用戶，使用 Cocos Store 3.x 版本引擎進(jìn)入商店即可下載最新版本；
在 Cocos 微店購(gòu)買的用戶，請(qǐng)進(jìn)入微店聯(lián)系客服發(fā)送消息『升級(jí)小仙女』客服人員將會(huì)給你發(fā)送新版鏈接。
后續(xù)會(huì)打通Cocos微店與Cocos帳號(hào)的互通，敬請(qǐng)期待！
游戲鏈接：
https://store.steampowered.com/app/1636700/Wirewalk/
Node.js 來(lái)實(shí)現(xiàn)，所使用到的工具包括 Electron 和 Greenworks?；?nbsp;Electron，可以輕松將 Cocos Creator 發(fā)布到任何桌面。注：本文所有命令行都將從 Windows VSCode終端或Windows Powershell運(yùn)行。
1
了解 Node.js
Node.js 是一個(gè)功能強(qiáng)大的工具，通過(guò)使用 JavaScript 作為通用語(yǔ)言部署到許多原生平臺(tái)，可以開(kāi)發(fā)多種類型的應(yīng)用程序和其他工具。2
安裝 Electron
Node.js（請(qǐng)選擇最新的穩(wěn)定版本）Electron 項(xiàng)目，打開(kāi) VSCode，找到你想要的項(xiàng)目文件夾，然后輸入：npm init -y
npm i --save-dev electron
index.js 的文件，內(nèi)容如下：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 .
MyGame的空白應(yīng)用程序窗口，說(shuō)明你已完成。BrowserWindow。了解更多創(chuàng)建 Electrom 信息：https://www.electronjs.org/docs/tutorial/quick-start#create-the-main-script-file
將項(xiàng)目從 Creator 導(dǎo)出到 Electron
Electron 項(xiàng)目中的某處，在 Electron 項(xiàng)目的根文件夾中創(chuàng)建一個(gè)名為cocosExport的子文件夾。Electron 的 index.js，你要做的是在創(chuàng)建 mainWindow 對(duì)象后在任何地方添加：mainWindow.loadURL('file://' + __dirname + '/cocosExport/web-desktop/index.html').then(() =>{
});
electron .
HTML 以及 Electron 的 BrowserWindow 進(jìn)行額外調(diào)整，使其看起來(lái)更流暢。接下來(lái)，講一下如何集成 Steamworks API。安裝 Greenworks 和 Steamworks API
Steamworks 本身不支持 Electron（甚至在 JavaScript 中也不支持），因此你需要下載一個(gè)名為 Greenworks 的工具。這個(gè)工具也是一個(gè) Node.js 包，它通過(guò)在 JavaScript 中暴露一個(gè)接口來(lái)訪問(wèn) Steam API 的本地編譯的 C++函數(shù)。下載 Greenworks 和 Steamworks API
Greenworks 存儲(chǔ)庫(kù)的主分支并將其放在單獨(dú)的文件夾中。Steamworks API，將 Steamworks API 放在 Greenworks 根目錄下的 deps 文件夾中，并將 Steamworks 文件夾重命名為steamworks_sdk。我們需要構(gòu)建 Greenworks，以便二進(jìn)制文件在你下載并已安裝的 Node.js 版本上正常運(yùn)行。構(gòu)建 Steamworks
Greenworks 的根文件夾中運(yùn)行 Greenworks，以便正確安裝所有依賴項(xiàng)。npm install
Greenworks 本身。我們需要一個(gè)名為 node-gyp 的 node.js 構(gòu)建工具。node-gyp：npm install node-gyp -g
Greenworks 項(xiàng)目的根目錄中運(yùn)行以下命令來(lái)構(gòu)建 Greenworks：node-gyp rebuild --target=<electron_version> --arch=x64 --dist-url=https://atom.io/download/atom-shell
electron 版本更改 electron 版本，例如 12.0.7 ，相關(guān)文件會(huì)在里面：build\Release\greenworks-win64.node了解更多構(gòu)建 Greenworks的信息：https://github.com/greenheartgames/greenworks/blob/master/docs/build-instructions-electron.md
Greenworks 復(fù)制到你的 Electron 項(xiàng)目并加載它。Electron 項(xiàng)目中。Electron 項(xiàng)目的根文件夾中創(chuàng)建一個(gè)名為 Greenworks 的文件夾。在其中，復(fù)制 Greenworks 項(xiàng)目根文件中的 greenworks.js 文件和 lib 文件夾。lib 文件夾中，將文件 greenworks-win64.node 替換為你在上一步中構(gòu)建的文件。index.js 文件頂部添加以下行：const greenworks = require(‘./greenworks/greenworks’);
Greenworks 對(duì)象以查看它具有哪些方法。啟動(dòng) Greenworks
Greenworks，需要做的第一件事是創(chuàng)建一個(gè)名為 steam_appid.txt 的文件，其中包含你的應(yīng)用程序 ID 而沒(méi)有其他任何內(nèi)容。應(yīng)用程序 ID 是商店中的那個(gè)，比如我的游戲《Wirewalk()?》，Steam 是1636700。不要將此 txt文件復(fù)制到本教程最后一步的最終版本中，因?yàn)樗鼉H用于測(cè)試目的。
Greenworks 了！let relaunch = greenworks.restartAppIfNecessary(1636700);
if(relaunch){
app.quit();
}
else{
if(greenworks.init()){
console.log('Steam inited successfully');
loadWindow();
}
else{
app.quit();
}
}
Greenworks 應(yīng)該是你收到“ready”事件后要做的第一件事。restartAppIfNecessary 函數(shù)可防止游戲在 Steam 之外啟動(dòng)并通過(guò)從 Steam 打開(kāi)它來(lái)重新啟動(dòng)它。但這只是為了發(fā)布——因?yàn)槲募?steam_appid.txt 的存在會(huì)使 restartAppIfNecessary總是返回 false。Cocos 和 Electron 之間的通信 - 成就
成就功能 來(lái)舉例說(shuō)明使用 Steamworks 的功能。Steamworks 網(wǎng)站上創(chuàng)建一個(gè)成就：API 名稱是我們需要傳遞給 greenworks 的名稱。類來(lái)處理與 Electron 的通信，你可以在成就邏輯確定發(fā)布成就的時(shí)間后調(diào)用該類。此代碼在 TypeScript 中：export default class Electron
{
static releaseAchievement(id: string): void
{
(window as any).electron.ipcRenderer.invoke('releaseAchievement', id);
}
}
Electron.releaseAchivement('bad_cats');
electron 的對(duì)象。這個(gè) electron 對(duì)象將成為我們與 Cocos 進(jìn)程中的 Electron 進(jìn)程進(jìn)行通信的大門。我們將通過(guò)調(diào)用 invoke 方法進(jìn)行通信，使用字符串參數(shù)來(lái)標(biāo)識(shí)要調(diào)用的回調(diào)，后跟任意數(shù)量的參數(shù)。electron 。我發(fā)現(xiàn)更簡(jiǎn)單的方法是通過(guò)編輯構(gòu)建項(xiàng)目時(shí)由 Cocos 生成的結(jié)果HTML（在 cocosExport 文件夾中的 index.html），將以下內(nèi)容添加到輸出 HTML，在 <body > tag之前。<script>
window.electron = require('electron');
</script>
electron js 文件并給出錯(cuò)誤，因?yàn)樗鼰o(wú)法找到它。Electron 瀏覽器窗口的 HTML 可以與本機(jī)節(jié)點(diǎn)進(jìn)程通信。本質(zhì)上使 electron.js 可用。為此，我們需要在創(chuàng)建 BrowserWindow 時(shí)傳遞這些額外的參數(shù)。webPreferences: { nodeIntegration: true, contextIsolation: false }
Electron 上添加接收器功能。創(chuàng)建 mainWindow 后，可以在任何位置添加此代碼。ipcMain.handle('releaseAchievement', (event, achievementString) => {
console.log('releasing achievement', achievementString);
greenworks.activateAchievement(achievementString);
});
handle方法是與invoke匹配的方法。在這個(gè)例子中，Electron 收到 releaseAchievement息后，它會(huì)調(diào)用 reenworks tivateAchievement 告訴它為用戶激活成就。electron .
將項(xiàng)目導(dǎo)出到 Windows、Mac 或 Linux
electron-packager。npm install electron-packager -g
electron-packager . MyGame --platform=win32 --arch=x64 --overwrite
–platform 值來(lái)構(gòu)建 Mac 和 Linux，可以在 electron 文檔中找到可用平臺(tái)的列表。https://electron.github.io/electron-packager/master/modules/electronpackager.html#officialplatform
評(píng)論
圖片
表情