Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率
【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率 【Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率】
本文目录
- 【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率
-
- 前言
-
- 技术点
- 一、Electron项目
-
- 什么是Electron
- 安装electron(已经安装完成的可以跳过)
- 把CocosCreator项目打包web变成桌面应用
- CocosCreator代码和Electron的通讯(渲染进程和主进程的通讯)
- 二、使用nircmd.exe调用原生API
-
- 什么是nircmd,它都能干什么?
- 如何使用nircmd.exe
- 在代码中使用nircmd.exe
- 三、获取屏幕支持的所有分辨率和当前分辨率
-
- node-win-screen-resolution插件
- 编译插件
- 在代码中使用
- 四、在Creator代码中封装API
- 五、构建,发布exe(只想用不想搞懂原理)
-
- Cocos中API的封装
- 修改package.json中的electron版本
- 改图标
- 构建
- 六、做成安装包
- 七、源码和体验地址
- 结尾
前言 CocosCreator关于发布Windows的资料非常少,甚至官方的文档左侧目录里连个“发布windows”的标题都没有,发win的坑太多了
比如安装VisualStudio的时候有一个Windows 8.1 SDK和UCRT SDK模块,2.x版本不勾就报错,而3.x不报错,文档就没有写。希望官方可以完善相关文档
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/12ef15f9b45a4bd8a2cd5be0f93e0f1e.jpg)
文章图片
打包Windows后,并不是全屏的,如何去全屏游戏呢,如何在游戏中去自由控制全屏窗口化或者去修改分辨率呢?这方面的资料基本为零,我只找到了一个关于全屏的资料,也只对2.x有效
我使用了一种很有意思的方案实现了全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率!那就是
Electron + HTML + nircmd + node-win-screen-resolution插件
用这一套方案,不需要去打包Windows,只需要发布web-mobile,使用electron框架做成桌面应用,利用第三方库和插件去实现
文末有源码
技术点
- Electron和Creator的通讯
- 在Creator里封装好API随意调用
- 获取电脑当前分辨率,获取屏幕支持的所有分辨率
- 修改电脑的分辨率
- 调用一些原生接口,比如静音、休眠、截图等
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/4ddf8032fb7f4875b017042875b47216.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/8d3d3f60e7f740c3805735703c75e82e.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/d5f26e26021945fb9177d6827bfca1e1.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/724c909d239745eb9904f500f3e9ba19.jpg)
文章图片
一、Electron项目 什么是Electron
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/4370de1515114b45950090197fec187e.jpg)
文章图片
简单来说,Electron可以把网页变成桌面应用,支持发布到Windows、macOS和Linux
中文文档
本文只做发布Windows
安装electron(已经安装完成的可以跳过)
已经安装了electron的可以跳过
首先要安装nodejs和electron,我的电脑上已经安装了不能重复安装,我特意开了一个win10虚拟机重新开始安装环境
安装electron,首先要安装nodejs
官网下载nodejs
直接下载安装,一路下一步即可
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/44f2fb794b434d829d0825708ac2c2b1.jpg)
文章图片
安装完右键左下角win图标,打开power shell(打开cmd也可以)
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/9e744e9cd74c4d76a17989133d553a27.jpg)
文章图片
分别输入
node -v
npm -v
显示版本就可以了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/bdde98546fb044dfadbbd4aa6fd9d15f.png)
文章图片
接下来安装electron,在安装之前建议先把npm换成淘宝源
npm config set registry https://registry.npm.taobao.org/
不换会特别慢,甚至导致错误
检测是否配置成功
npm config get registry
然后全局安装electron
npm install -g electron
我这里安装的时候报了错
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/5becbd0bbdd445429773ab8145f03a13.jpg)
文章图片
意思是npm有新版本需要更新
那就按照他的要求输入
npm install -g npm@7.24.1
然后再安装electron,就成功了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/3f80a77b5d1f40c5887dabda8a22d0ea.jpg)
文章图片
成功之后输入
electron
弹出一个这样的窗口就算安装成功了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/8c6f908aa5cc47c49794ae4a071cd621.jpg)
文章图片
查看版本(之后会用到)
electron -v
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/1fd76d6f9d154817816ed558706cea55.png)
文章图片
把CocosCreator项目打包web变成桌面应用
新建一个3.x的hello world项目
啥也不用改直接打包web-mobile
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/8b14e9d766964a29a0874bf3a4b5e318.jpg)
文章图片
在任意位置新建一个文件夹,就叫他test吧(路径最好不要中文)
把刚刚打包好的所有文件复制到 test 文件夹
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/dc5e0d77ec614386b499970b330bed9c.jpg)
文章图片
按住shift不松手,在文件夹的空白部分右键,打开power shell
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/50bbe1f0c7e0415caff9ccc6e0824024.jpg)
文章图片
输入
npm init
然后一直按回车
这样就创建了package.json文件
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/ff889c9f96834c9395307b511267ac94.jpg)
文章图片
把它改成下面这样,作者、描述可以随便写
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/ccbb2fe5b21e4912afa49f0baa620096.png)
文章图片
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: "我的应用", // 网页功能设置,必须写这些,如果不写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场景的小人在慢慢地跳舞,而且还是全屏的
这里有概率会出现一个错误,不影响程序正常运行,就没有去管他,不知道为什么引起也不知道怎么解决,希望大佬们,交流、指导!感谢!!!
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/a820924887e34ea7bd7ef77a79348fff.jpg)
文章图片
现在,来看看main.js都写了什么吧
首先从electron引入了BrowserWindow和app模块
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/164fd6438cad457ebdd09ff3c8716efe.png)
文章图片
BrowserWindow是创建并控制浏览器窗口
app是控制应用程序的事件生命周期
app官方文档
BrowserWindow官方文档
声明窗体变量,方便之后对窗口进行全屏、大小设置等等
程序加载完成后创建一个窗口
在最后一个窗口被关闭的时候退出应用
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/2e3bf8daab1b47cd9922984e9dc2a9f1.jpg)
文章图片
来看看createWindow方法是怎么创建窗口的
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/fa427aa7ac10434d8d2b4935525c9a5e.jpg)
文章图片
new出一个BrowserWindow实例,设置一些属性,这里有超级多的属性可以自定义,根据自己的需求想怎么样就怎么样,文档写的很详细很详细了,还多很多实例方法,之后就是用这些方法实现全屏、窗口化等
代码中的网页功能设置这几行代码必须有,非常重要,没有它之后electron不能和Cocos的代码通讯
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/18b7d85164eb40e9a41300dc09f64fce.jpg)
文章图片
为什么能看到小人跳舞呢,窗口要显示什么呢?窗口最终将显示一个网页,而这个网页,就是刚刚打包好的web-mobile中的index.html,代码用loadURL指定了窗口将显示的网页就是main.js所在目录的index.html,之前讲过main.js叫做主进程,我们的网页就叫做渲染进程
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/7502b382cf0d4f72bec4ec6b15a8f233.jpg)
文章图片
这里就可以使用一些窗口的实例方法设置窗口刚创建完的样子,比如是否全屏、是否最大化窗口等等,这里一定要有
win.removeMenu();
不写这句代码会造成最上面有一层菜单,作为一个游戏这肯定不是想要的
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/d655c986022d4b1ab9db46b0b601915d.jpg)
文章图片
CocosCreator代码和Electron的通讯(渲染进程和主进程的通讯)
官方的打包steam方案中也有提到与electron的通讯
刚才的main.js,只能在窗口创建完的时候执行一些实例方法,如何在打包好的网页、在Cocos中调用这些方法呢?
在主进程main.js中,从electron导入ipcMain模块
这个模块可以在主进程中添加渲染进程可以调用的事件
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/bcad75ec71b84483987115771f09e00d.png)
文章图片
这么写,就注册了两个事件供渲染进程调用,aaa,bbb就是自定义的名字,每个事件都有一个固定的名字
aaa是一个void函数,没有返回值,而bbb有字符串作为返回值
// 添加一个事件供渲染进程调用
ipcMain.on('aaa', (event, arg) => {console.log("aaa main");
})
// 添加一个有返回值的事件供渲染进程调用
ipcMain.on('bbb', (event, arg) => {event.returnValue = 'https://www.it610.com/article/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(马上就要详细讲了)
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/79e8efa3cbf14fcb984e34cc9d98136e.jpg)
文章图片
打包web-mobile
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/d782940ab69344a79374c19ae3ce7284.jpg)
文章图片
放到test文件夹,替换掉之前的文件
在Creator的代码里从全局变量获取了electron,但并没有定义全局变量electron
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/bc9c3467c0d043feb1197b1c0857d09e.png)
文章图片
必须在打包之后的index.html的body里面加上scripts定义electron,就像下面这样,这样才不会找不到electron而报错
>
window.electron = require('electron');
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/0c101d1a2e1b4582888bdca5d27ec3aa.jpg)
文章图片
在main.js中加上一句代码,写在窗口创建之后,这是打开网页的开发者工具
win.openDevTools();
加上这句代码之后,在运行会出现开发者工具
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/5480445b41c54196a82c14361a593148.jpg)
文章图片
注意:主进程的log只会出现在启动electron项目的cmd/power shell窗口中,而渲染进程的log会出现在开发者工具的控制台(console)里
小提示:每次运行都输入electron test嫌麻烦,可以新建一个cmd文件,里面就写electron test,以后每次只双击这个cmd文件就可以了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/cfba02269a8145f3be7fa9bcb2f4caf4.jpg)
文章图片
这样就实现了渲染进程调用主进程的方法
二、使用nircmd.exe调用原生API 什么是nircmd,它都能干什么?
NirCmd是一套免费的命令列指令,提供许多控制Windows的参数。让你运用命令行的方式,来执行一些常用的动作,例如修改分辨率,增加或减少计算机音量,模拟键盘或鼠标按下,让电脑进入休眠等等
官网(英文)
中文文档
网上搜索一下,很多网站都可以下载,因为官网实在是太慢了进不去所以就不从官网下了
非官方下载
注意!!!nircmd.exe有很大可能会被误报成病毒,但它真的是没有病毒的,下面是官网的解释
注意!!!nircmd.exe有很大可能会被误报成病毒,但它真的是没有病毒的,下面是官网的解释
注意!!!nircmd.exe有很大可能会被误报成病毒,但它真的是没有病毒的,下面是官网的解释
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/735d0a48700e46219fdeeffa60638a39.jpg)
文章图片
下载之后,只需要nircmd.exe这一个文件即可,别的东西都可以删了,用不到
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/7384e1d86566425e94ea76f8ad4af827.png)
文章图片
其他的都删喽只留nircmd.exe
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/eebb9a00f5c14875b8ec73bf6d9ac5b3.png)
文章图片
这一个小小的EXE文件就可以进行那么多操作,真是太厉害了,之后修改分辨率,就要用到它
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/7b9932c0c53f4db889ae56870766a637.jpg)
文章图片
如何使用nircmd.exe
在nircmd.exe文件所在位置打开cmd,不要打开power shell
在上面的输入框输入cmd就可以在当前目录打开cmd了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/49bac161679948fe9c271a2015b553f2.jpg)
文章图片
输入
nircmd.exe mutesysvolume 1
这是设置为静音的指令,输入完以后电脑就会被静音
明白了吗?nircmd.exe就是这么用的
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/1c7731223dfe4321bb0c2bc4a5669775.jpg)
文章图片
需要注意,因为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窗口,输入自定义的字符串,然后回车,就完成了指令的输入
可以用子进程模块来实现
在主进程中导入子进程模块
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/6cdce6e381124bb5bc795f0289a81e09.png)
文章图片
把nircmd.exe放到test文件夹下
在窗口创建后,加上一句代码
// __dirname表示当前文件夹,之前讲过
exec(__dirname + "/nircmd.exe mutesysvolume 1")
再运行,会发现电脑直接静音了
完美~
我的例子里只选了几个我认为很有意思的指令写出来,nircmd.exe还可以干更多事
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/968d8ca93eeb4fbfab7401af12eaa4c3.jpg)
文章图片
三、获取屏幕支持的所有分辨率和当前分辨率 node-win-screen-resolution插件
这是让我最头疼的问题,在这个问题上花的时间最长,一直不知道怎么实现,直到在github看见了这个插件
github地址
这个插件是C++编写的,nodejs不能直接拿来用,需要进行构建,编译成二进制的node文件,这样才可以拿来用
编译这个插件,是我噩梦的开始!
编译插件
编译文档
我已经编译好了,都在源码里面,在文末,可以直接拿来用,这里看看就好了,不用再去编译一遍了
不知道为什么作者在开源这个插件的时候为什么不把node文件一起上传
这两句构建代码,configure顺利通过,build总是报错
node-gyp configure
node-gyp build
我翻遍了网上几乎所有关于构建C++插件的文章,不断解决报错,不断换版本,编译这个网上说需要啥模块的都有,我就瞎安了一大堆,人家说需要什么我都下了,也不知道在VisualStudio里面多下载了多少模块,build之前,生成的解决方案还需要手动修改附加依赖项和忽略特定默认库,再build才能成功
详细看这里
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/8481b06a092046c3840d15f441661350.png)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/7a649f4c8fce42a5b14e550da64fd875.jpg)
文章图片
总之,编译这个插件我也就失败了一百多次吧
编译完是两个node文件,可以在代码里直接使用
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/35fe18a3a01748fba562dc5f7caf8a83.png)
文章图片
在代码中使用
插件lib下的index.cjs使用了bindings模块,这个模块在开发的时候使用没有任何问题,打包后死活用不了,百度后说是electron不能使用bindings,查了解决办法也没弄好,索性就不用bindings了,稍微修改了一下index.cjs
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/09b3568b716e4658be32eca93143b242.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/01e13cf248f846678aabeed32c237089.jpg)
文章图片
插件从github上下载来并不能直接用,需要编译,还得手动改下index.cjs让它不用bindings,我都弄好了,在文末源码里面就有
结构应该是这样的,两个二进制node文件,一个lib库,一个test文件夹里面的脚本用来测试
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/d6133ffc11cf4f74a0cbcf2cbc37f9c9.jpg)
文章图片
在test文件夹下打开power shell,运行test脚本,如果成功输出分辨率就说明没问题
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/5b029d607b5e4b1cacf9ebc516e6d65f.jpg)
文章图片
这个获取到的列表和系统设置里面的分辨率列表是一样的
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/27367d7d844f48618fa247cd15bacaf3.jpg)
文章图片
test.cjs首先导入index.cjs,然后获取,直接导入index.cjs来用就可以,test只是用来测试的
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/64160fb1d1f64d4cb86e50f7ac10d235.jpg)
文章图片
四、在Creator代码中封装API 其实一二三已经把核心都讲完了,这回再来做一个整体的封装
代码太多就不直接放出来了,都在源码里面
这些都是在Cocos里面封装好的API,可以随意调用
在Cocos里面运行会报错,这是正常现象,必须在打包好的index.html里面的body里加上下面的代码,用electron运行才不会报错
直接用Electron.ts里面的静态方法就可以,主进程是配套写好的
>
window.electron = require('electron');
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/b3d61e6f82c44c7bb1a043ad6e07e55f.jpg)
文章图片
nircmd.ts
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/ddbf2094b0ff483f9a483ab672b51be7.jpg)
文章图片
五、构建,发布exe(只想用不想搞懂原理) 哈哈,懒人都直接看这里了
默认你已经安装好了nodejs和electron
我做了一个方案,只需要把打包完的网页放到game文件夹下,就可以发布出exe
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/3081bc7a21a44e7f878eeaa1065ea767.jpg)
文章图片
Cocos中API的封装
直接用Electron.ts里面的静态方法就可以,主进程是配套写好的
当前,你也可以去修改主进程,自定义一些方法供Cocos代码调用
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/301e00acd8f94974a73f9f7f79c947ad.jpg)
文章图片
修改package.json中的electron版本
将使用electron-packager打包
首先安装依赖
npm install -g electron-packager
把打包好的web-mobile文件放到game文件夹下
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/2dd39127601c4c88a0aa6bfcdb784acc.jpg)
文章图片
要修改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"
}
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/f9f113119527410c9bf647bcc25e7521.jpg)
文章图片
版本这里一定要填写正确,打开cmd输入electron -v既可以查看版本
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/b97f31059e32414ea4db43959ac7959a.png)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/5f093a8bef99457ca228a1b366f59372.png)
文章图片
打包参数参考
改图标
有改图标需求直接在icon文件夹下把icon.ico换下来
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/9331a87cf5d84fb0b52b71a6429415a3.jpg)
文章图片
构建
最后运行cmd文件,构建完会多出一个WindowsDemo文件夹,下次再次构建的时候要把它删除才可以再次构建
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/31f07fe6bbe64950a419be209b4d974b.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/e14b1dafb39545698a6ab5ad5f5ddc83.png)
文章图片
不运行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
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/f0fbb9a2dc384aa4a8b6f064939e59fe.jpg)
文章图片
打开VisualStudio
文件—新建—项目
选择Setup Project,然后点确定
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/2074537569f7495d9dad2f576f37039f.jpg)
文章图片
注意!:如果找不到这个选项,需要手动安装Microsoft Visual Studio Installer Projects
打开工具—扩展和更新—在左侧找到联机,搜索Microsoft Visual Studio Installer Projects进行安装
这个会很慢,在网上搜一下,有很多离线安装包的下载,我就是从网上下载的离线安装包
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/93cde22e60e9434089029828cba9c70e.jpg)
文章图片
选中打包之后的所有文件,放到这里
左侧三个英文分别是
Application Folder — 应用程序文件夹
User’s Desktop — 用户的桌面
User’s Programs Menu — 用户的程序菜单
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/74bb6198de9c4f42ac4567e16f6469e9.jpg)
文章图片
要想有桌面快捷方式,就给Game.exe创建快捷方式,放到桌面文件夹
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/3216278ca045400a8a14d07d3e96a558.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/9032022caf254038ab7b4a37995170a7.jpg)
文章图片
应用程序菜单也可以放一个
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/f1fd79b4062042b3b3b2345e6e313a4d.jpg)
文章图片
在生成菜单下找到快捷键为U的选项,然后等待他生成完
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/90ce0a5eed47461599e98f0ff2548cfb.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/1ed9dc153a1e47e5a30d96f8078a849e.jpg)
文章图片
打开项目路径,就能看见安装包了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/142d1c7fe28d4d928aaa0702a09968eb.jpg)
文章图片
这两个运行哪个效果好像都一样
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/e2318fd36c4d48c4aeaa0ffad5e614b2.jpg)
文章图片
一路下一步,之后就会看到桌面上的快捷方式和最近添加的快捷方式了
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/b072945324db40c6b46eb7ff2abc6951.jpg)
文章图片
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/3ba1b23fd6e043f5aa1912f113439a0d.jpg)
文章图片
在应用和程序里面可以直接卸载
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/b4dbf4a1f5f642abb1cf6e0853264353.jpg)
文章图片
也可以运行之前的安装程序删除
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/d5b3be8036454724ad256ebb97941b81.jpg)
文章图片
七、源码和体验地址 直接发布Windows的方案
gitee:https://gitee.com/propertygame/creator-build-windows-app
发布Windows的CocosCreator例子
gitee:https://gitee.com/propertygame/cocos-creator-desktop-demo
体验地址(不限速飞速下载)
https://wwi.lanzoui.com/iHISKutnlmf
构建之后包体大了不少,但是作为一个PC游戏,这样的大小是完全在可以接受的范围内的
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/29ec2730f0054d91a8f8e8174acf074a.jpg)
文章图片
结尾 这是我目前为止写的最详细、所用时间最多的一篇文章了
如果这篇文章帮到了你,点个赞吧!
技术Q群:1130122408
微信公众号:property游戏开发
![Cocos游戏开发|【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率](https://img.it610.com/image/info8/aa6c6e7374b347d2b62b9ca191371b46.jpg)
文章图片
推荐阅读
- 深入理解Go之generate
- 游戏IP(立足于玩家情感的粉丝经济)
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 人生游戏--是游戏,还是人生()
- 「按键精灵安卓版」关于全分辨率脚本的一些理解(非游戏app)
- (小说)月流水几亿的火爆游戏养成记
- 游戏治愈了我无聊之症
- 我的软件测试开发工程师书单
- echart|echart 双轴图开发
- 生活与游戏日记(第182篇)(〔成长瞬间〕关注解决问题2019.10)