CocosCreatorDesktopDemo

【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率

前言

CocosCreator关于发布Windows的资料非常少，甚至官方的文档左侧目录里连个“发布windows”的标题都没有，发win的坑太多了

比如安装VisualStudio的时候有一个Windows 8.1 SDK和UCRT SDK模块，2.x版本不勾就报错，而3.x不报错，文档就没有写。希望官方可以完善相关文档 打包Windows后，并不是全屏的，如何去全屏游戏呢，如何在游戏中去自由控制全屏窗口化或者去修改分辨率呢？这方面的资料基本为零，我只找到了一个关于全屏的资料，也只对2.x有效

我使用了一种很有意思的方案实现了全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率！那就是

Electron + HTML + nircmd + node-win-screen-resolution插件

用这一套方案，不需要去打包Windows，只需要发布web-mobile，使用electron框架做成桌面应用，利用第三方库和插件去实现

文末有源码

技术点

Electron和Creator的通讯
在Creator里封装好API随意调用
获取电脑当前分辨率，获取屏幕支持的所有分辨率
修改电脑的分辨率
调用一些原生接口，比如静音、休眠、截图等

来看看效果

一、Electron项目

什么是Electron

简单来说，Electron可以把网页变成桌面应用，支持发布到Windows、macOS和Linux 中文文档

本文只做发布Windows

安装electron（已经安装完成的可以跳过）

已经安装了electron的可以跳过

首先要安装nodejs和electron，我的电脑上已经安装了不能重复安装，我特意开了一个win10虚拟机重新开始安装环境

安装electron，首先要安装nodejs 官网下载nodejs 直接下载安装，一路下一步即可在这里插入图片描述安装完右键左下角win图标，打开power shell（打开cmd也可以）分别输入

node -v

npm -v

显示版本就可以了在这里插入图片描述接下来安装electron，在安装之前建议先把npm换成淘宝源

npm config set registry https://registry.npm.taobao.org/

不换会特别慢，甚至导致错误检测是否配置成功

npm config get registry

然后全局安装electron

npm install -g electron

我这里安装的时候报了错在这里插入图片描述意思是npm有新版本需要更新那就按照他的要求输入

npm install -g npm@7.24.1

然后再安装electron，就成功了在这里插入图片描述成功之后输入

electron

弹出一个这样的窗口就算安装成功了在这里插入图片描述查看版本（之后会用到）

electron -v

在这里插入图片描述

把CocosCreator项目打包web变成桌面应用

新建一个3.x的hello world项目啥也不用改直接打包web-mobile 在这里插入图片描述在任意位置新建一个文件夹，就叫他test吧（路径最好不要中文）把刚刚打包好的所有文件复制到 test 文件夹按住shift不松手，在文件夹的空白部分右键，打开power shell 输入

npm init

然后一直按回车这样就创建了package.json文件在这里插入图片描述把它改成下面这样，作者、描述可以随便写 electron项目需要一个入口文件，它就是main.js（可以叫它主进程），刚刚创建的package.json的main就指向了它，不过它还不存在，那就新建一个main.js吧

文档的话：任何 Electron 应用程序的入口都是 main 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。

main.js的代码如下先把代码复制粘贴进去，一会详细讲

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

// 声明窗口的变量
let win;

// 当app完成初始化时，创建一个窗口
app.on('ready', createWindow);

// 在最后一个窗口被关闭时退出应用
app.on('window-all-closed', () => {
    app.quit();
});

// 创建一个窗口
function createWindow () {

    // 创建一个宽800，高600的窗口
    win = new BrowserWindow({
        // width 和 height 将设置为 web 页面的尺寸(译注: 不包含边框), 这意味着窗口的实际尺寸将包括窗口边框的大小，稍微会大一点。 默认值为 false.
        useContentSize: true,

        // 窗口宽高
        width: 800,
        height: 600,

        // 最小宽度和高度
        minWidth: 800,
        minHeight: 600,

        // 标题   默认窗口标题 默认为"Electron"。 如果由loadURL()加载的HTML文件中含有标签<title>，此属性将被忽略。
        // title: "我的应用", 

        // 网页功能设置，必须写这些，如果不写Cocos就不能调用封装好的事件
        webPreferences: {
            nodeIntegration: true,   
            enableRemoteModule: true, 
            contextIsolation: false,
        }, 
    })


    // 窗口中显示的网页
    // __dirname,表示main.js所在的目录路径
    win.loadURL(__dirname + "/index.html");

    // 全屏
    win.setFullScreen(true);

    // 最大化窗口
    // win.maximize();

    // 删除窗口的菜单栏
    win.removeMenu();

    // 任务栏图标是否闪烁
    win.flashFrame(true);


    // 监听窗体关闭事件，当窗体已经关闭时，将win赋值为null，垃圾回收。
    win.on('closed', () => {
        win = null;
    })


}

然后在test文件夹的所在目录（注意不是test文件夹内）打开power shell，输入

electron test

这样就运行了不出意外，你会看到hello world场景的小人在慢慢地跳舞，而且还是全屏的在这里插入图片描述这里有概率会出现一个错误，不影响程序正常运行，就没有去管他，不知道为什么引起也不知道怎么解决，希望大佬们，交流、指导！感谢！！！现在，来看看main.js都写了什么吧首先从electron引入了BrowserWindow和app模块在这里插入图片描述 BrowserWindow是创建并控制浏览器窗口 app是控制应用程序的事件生命周期 app官方文档 BrowserWindow官方文档

声明窗体变量，方便之后对窗口进行全屏、大小设置等等程序加载完成后创建一个窗口在最后一个窗口被关闭的时候退出应用在这里插入图片描述来看看createWindow方法是怎么创建窗口的 new出一个BrowserWindow实例，设置一些属性，这里有超级多的属性可以自定义，根据自己的需求想怎么样就怎么样，文档写的很详细很详细了，还多很多实例方法，之后就是用这些方法实现全屏、窗口化等代码中的网页功能设置这几行代码必须有，非常重要，没有它之后electron不能和Cocos的代码通讯在这里插入图片描述为什么能看到小人跳舞呢，窗口要显示什么呢？窗口最终将显示一个网页，而这个网页，就是刚刚打包好的web-mobile中的index.html，代码用loadURL指定了窗口将显示的网页就是main.js所在目录的index.html，之前讲过main.js叫做主进程，我们的网页就叫做渲染进程 在这里插入图片描述这里就可以使用一些窗口的实例方法设置窗口刚创建完的样子，比如是否全屏、是否最大化窗口等等，这里一定要有

win.removeMenu();

不写这句代码会造成最上面有一层菜单，作为一个游戏这肯定不是想要的在这里插入图片描述

CocosCreator代码和Electron的通讯（渲染进程和主进程的通讯）

官方的打包steam方案中也有提到与electron的通讯刚才的main.js，只能在窗口创建完的时候执行一些实例方法，如何在打包好的网页、在Cocos中调用这些方法呢？在主进程main.js中，从electron导入ipcMain模块 这个模块可以在主进程中添加渲染进程可以调用的事件 在这里插入图片描述这么写，就注册了两个事件供渲染进程调用，aaa，bbb就是自定义的名字，每个事件都有一个固定的名字 aaa是一个void函数，没有返回值，而bbb有字符串作为返回值

// 添加一个事件供渲染进程调用
ipcMain.on('aaa', (event, arg) => {
  console.log("aaa main");
})
// 添加一个有返回值的事件供渲染进程调用
ipcMain.on('bbb', (event, arg) => {
  event.returnValue = 'hello world';
})

在Creator中新建一个TS脚本取名Electron Electron.ts


import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

// electron模块，打包web-mobil后在HTML中定义全局变量electron
const electron = (window as any).electron;

@ccclass('Electron')
export class Electron extends Component {

    onLoad () {
        // 执行主进程的方法
        this.aaa();
        console.log("返回值结果：", this.bbb());
    }

    // 执行主进程自定义的方法
    aaa () {
        electron.ipcRenderer.send("aaa");
    }

    // 返回主进程中自定义的字符串
    bbb (): string {
        return electron.ipcRenderer.sendSync("bbb");
    }

}

渲染进程调用主进程注册好的事件需要借助ipcRenderer模块首先在脚本里面获取一下electron，这里是全局变量，等打包web-mobile后需要在index.html里面加上这里只是说一下，后面还会讲

window.electron = require('electron');

获取到了electron，就可以使用ipcRenderer模块接收事件了，调用一个void函数和调用一个有返回值的函数所用方法可不一样哦

随便找个节点把脚本挂上这时候运行会报错，报错就对了，这是正常现象，因为代码根本找不到electron，必须在打包好的index.html里面定义electron（马上就要详细讲了）在这里插入图片描述打包web-mobile 放到test文件夹，替换掉之前的文件在Creator的代码里从全局变量获取了electron，但并没有定义全局变量electron 必须在打包之后的index.html的body里面加上scripts定义electron，就像下面这样，这样才不会找不到electron而报错

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

在这里插入图片描述在main.js中加上一句代码，写在窗口创建之后，这是打开网页的开发者工具

win.openDevTools();

加上这句代码之后，在运行会出现开发者工具在这里插入图片描述 注意：主进程的log只会出现在启动electron项目的cmd/power shell窗口中，而渲染进程的log会出现在开发者工具的控制台（console）里

小提示：每次运行都输入electron test嫌麻烦，可以新建一个cmd文件，里面就写electron test，以后每次只双击这个cmd文件就可以了 在这里插入图片描述

这样就实现了渲染进程调用主进程的方法

二、使用nircmd.exe调用原生API

什么是nircmd，它都能干什么？

NirCmd是一套免费的命令列指令，提供许多控制Windows的参数。让你运用命令行的方式，来执行一些常用的动作，例如修改分辨率，增加或减少计算机音量，模拟键盘或鼠标按下，让电脑进入休眠等等官网（英文）中文文档网上搜索一下，很多网站都可以下载，因为官网实在是太慢了进不去所以就不从官网下了非官方下载

注意！！！nircmd.exe有很大可能会被误报成病毒，但它真的是没有病毒的，下面是官网的解释 注意！！！nircmd.exe有很大可能会被误报成病毒，但它真的是没有病毒的，下面是官网的解释 注意！！！nircmd.exe有很大可能会被误报成病毒，但它真的是没有病毒的，下面是官网的解释 在这里插入图片描述下载之后，只需要nircmd.exe这一个文件即可，别的东西都可以删了，用不到其他的都删喽只留nircmd.exe

这一个小小的EXE文件就可以进行那么多操作，真是太厉害了，之后修改分辨率，就要用到它在这里插入图片描述

如何使用nircmd.exe

在nircmd.exe文件所在位置打开cmd，不要打开power shell 在上面的输入框输入cmd就可以在当前目录打开cmd了在这里插入图片描述输入

nircmd.exe mutesysvolume 1

这是设置为静音的指令，输入完以后电脑就会被静音明白了吗？nircmd.exe就是这么用的在这里插入图片描述需要注意，因为cmd窗口是在nircmd.exe所在路径下打开的，所以直接输入

nircmd.exe mutesysvolume 1

才有效果，如果不在nircmd.exe所在路径打开cmd，输入这个则会错误

只要在前面加上nircmd.exe的所在目录，就可以在任意cmd中使用了，我的电脑上nircmd.exe在D:\ElectronDemo\test下

D:\ElectronDemo\test\nircmd.exe mutesysvolume 1

在代码中使用nircmd.exe

nodejs子进程官方文档只要用代码打开一个cmd窗口，输入自定义的字符串，然后回车，就完成了指令的输入可以用子进程模块来实现在主进程中导入子进程模块在这里插入图片描述把nircmd.exe放到test文件夹下在窗口创建后，加上一句代码

	// __dirname表示当前文件夹，之前讲过
    exec(__dirname + "/nircmd.exe mutesysvolume 1")

再运行，会发现电脑直接静音了

完美~

我的例子里只选了几个我认为很有意思的指令写出来，nircmd.exe还可以干更多事在这里插入图片描述

三、获取屏幕支持的所有分辨率和当前分辨率

node-win-screen-resolution插件

这是让我最头疼的问题，在这个问题上花的时间最长，一直不知道怎么实现，直到在github看见了这个插件 github地址这个插件是C++编写的，nodejs不能直接拿来用，需要进行构建，编译成二进制的node文件，这样才可以拿来用

编译这个插件，是我噩梦的开始！

编译插件

编译文档 我已经编译好了，都在源码里面，在文末，可以直接拿来用，这里看看就好了，不用再去编译一遍了

不知道为什么作者在开源这个插件的时候为什么不把node文件一起上传这两句构建代码，configure顺利通过，build总是报错

node-gyp configure
node-gyp build

我翻遍了网上几乎所有关于构建C++插件的文章，不断解决报错，不断换版本，编译这个网上说需要啥模块的都有，我就瞎安了一大堆，人家说需要什么我都下了，也不知道在VisualStudio里面多下载了多少模块，build之前，生成的解决方案还需要手动修改附加依赖项和忽略特定默认库，再build才能成功详细看这里在这里插入图片描述总之，编译这个插件我也就失败了一百多次吧编译完是两个node文件，可以在代码里直接使用

在代码中使用

插件lib下的index.cjs使用了bindings模块，这个模块在开发的时候使用没有任何问题，打包后死活用不了，百度后说是electron不能使用bindings，查了解决办法也没弄好，索性就不用bindings了，稍微修改了一下index.cjs

在这里插入图片描述 插件从github上下载来并不能直接用，需要编译，还得手动改下index.cjs让它不用bindings，我都弄好了，在文末源码里面就有

结构应该是这样的，两个二进制node文件，一个lib库，一个test文件夹里面的脚本用来测试在这里插入图片描述在test文件夹下打开power shell，运行test脚本，如果成功输出分辨率就说明没问题这个获取到的列表和系统设置里面的分辨率列表是一样的

test.cjs首先导入index.cjs，然后获取，直接导入index.cjs来用就可以，test只是用来测试的在这里插入图片描述

四、在Creator代码中封装API

其实一二三已经把核心都讲完了，这回再来做一个整体的封装代码太多就不直接放出来了，都在源码里面这些都是在Cocos里面封装好的API，可以随意调用在Cocos里面运行会报错，这是正常现象，必须在打包好的index.html里面的body里加上下面的代码，用electron运行才不会报错直接用Electron.ts里面的静态方法就可以，主进程是配套写好的

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

在这里插入图片描述 nircmd.ts

五、构建，发布exe（只想用不想搞懂原理）

哈哈，懒人都直接看这里了默认你已经安装好了nodejs和electron 我做了一个方案，只需要把打包完的网页放到game文件夹下，就可以发布出exe 在这里插入图片描述

Cocos中API的封装

直接用Electron.ts里面的静态方法就可以，主进程是配套写好的当前，你也可以去修改主进程，自定义一些方法供Cocos代码调用在这里插入图片描述

修改package.json中的electron版本

将使用electron-packager打包首先安装依赖

npm install -g electron-packager

把打包好的web-mobile文件放到game文件夹下在这里插入图片描述在打包好的index.html的body里面，加上这三句代码

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

要修改package.json的结尾electron的版本号

	"scripts": {
        "package-win": "electron-packager . Game --win --out ../WindowsDemo --arch=x64 --electronVersion 15.0.0 --overwr ite --ignore=node_modules --icon=../icon/icon.ico"
    }

在这里插入图片描述版本这里一定要填写正确，打开cmd输入electron -v既可以查看版本打包参数参考

改图标

有改图标需求直接在icon文件夹下把icon.ico换下来在这里插入图片描述

构建

最后运行cmd文件，构建完会多出一个WindowsDemo文件夹，下次再次构建的时候要把它删除才可以再次构建在这里插入图片描述

不运行cmd文件，在game文件夹下power shell输入，同理一定要注意electron版本号

electron-packager . Game --win --out ../WindowsDemo --arch=x64 --electronVersion 15.0.0 --overwr ite --ignore=node_modules --icon=../icon/icon.ico

构建完如果打不开，出现下面这种，或者全屏就卡住等奇葩情况 不要悲伤，不要心急 在这里插入图片描述改一下兼容性就好了，亲测有效

六、做成安装包

首先打包成exe 在这里插入图片描述打开VisualStudio 文件---新建---项目选择Setup Project，然后点确定注意！：如果找不到这个选项，需要手动安装Microsoft Visual Studio Installer Projects 打开工具---扩展和更新---在左侧找到联机，搜索Microsoft Visual Studio Installer Projects进行安装这个会很慢，在网上搜一下，有很多离线安装包的下载，我就是从网上下载的离线安装包在这里插入图片描述选中打包之后的所有文件，放到这里左侧三个英文分别是 Application Folder --- 应用程序文件夹 User's Desktop --- 用户的桌面 User's Programs Menu --- 用户的程序菜单要想有桌面快捷方式，就给Game.exe创建快捷方式，放到桌面文件夹在这里插入图片描述应用程序菜单也可以放一个在生成菜单下找到快捷键为U的选项，然后等待他生成完打开项目路径，就能看见安装包了这两个运行哪个效果好像都一样一路下一步，之后就会看到桌面上的快捷方式和最近添加的快捷方式了在这里插入图片描述在应用和程序里面可以直接卸载也可以运行之前的安装程序删除