【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不報錯，文檔就沒有寫。希望官方可以完善相關文檔

打包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的選項，然后等待他生成完


打開項目路徑，就能看見安裝包了

這兩個運行哪個效果好像都一樣

一路下一步，之后就會看到桌面上的快捷方式和最近添加的快捷方式了


在應用和程序里面可以直接卸載

也可以運行之前的安裝程序刪除

七、源碼和體驗地址

直接發布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游戲，這樣的大小是完全在可以接受的范圍內的

結尾

這是我目前為止寫的最詳細、所用時間最多的一篇文章了
如果這篇文章幫到了你，點個贊吧！

技術Q群：1130122408
微信公眾號：property游戲開發

總結

以上是生活随笔為你收集整理的【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。