【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率
【win】全屏、窗口化、動態(tài)修改分辨率和獲取屏幕支持的所有分辨率
本文目錄
- 【win】全屏、窗口化、動態(tài)修改分辨率和獲取屏幕支持的所有分辨率
- 前言
- 技術(shù)點(diǎn)
- 一、Electron項(xiàng)目
- 什么是Electron
- 安裝electron（已經(jīng)安裝完成的可以跳過）
- 把CocosCreator項(xiàng)目打包web變成桌面應(yīng)用
- CocosCreator代碼和Electron的通訊（渲染進(jìn)程和主進(jìn)程的通訊）
- 二、使用nircmd.exe調(diào)用原生API
- 什么是nircmd，它都能干什么？
- 如何使用nircmd.exe
- 在代碼中使用nircmd.exe
- 三、獲取屏幕支持的所有分辨率和當(dāng)前分辨率
- node-win-screen-resolution插件
- 編譯插件
- 在代碼中使用
- 四、在Creator代碼中封裝API
- 五、構(gòu)建，發(fā)布exe（只想用不想搞懂原理）
- Cocos中API的封裝
- 修改package.json中的electron版本
- 改圖標(biāo)
- 構(gòu)建
- 六、做成安裝包
- 七、源碼和體驗(yàn)地址
- 結(jié)尾
前言
CocosCreator關(guān)于發(fā)布Windows的資料非常少，甚至官方的文檔左側(cè)目錄里連個(gè)“發(fā)布windows”的標(biāo)題都沒有，發(fā)win的坑太多了
比如安裝VisualStudio的時(shí)候有一個(gè)Windows 8.1 SDK和UCRT SDK模塊，2.x版本不勾就報(bào)錯，而3.x不報(bào)錯，文檔就沒有寫。希望官方可以完善相關(guān)文檔
打包Windows后，并不是全屏的，如何去全屏游戲呢，如何在游戲中去自由控制全屏窗口化或者去修改分辨率呢？這方面的資料基本為零，我只找到了一個(gè)關(guān)于全屏的資料，也只對2.x有效
我使用了一種很有意思的方案實(shí)現(xiàn)了全屏、窗口化、動態(tài)修改分辨率和獲取屏幕支持的所有分辨率！那就是
Electron + HTML + nircmd + node-win-screen-resolution插件
用這一套方案，不需要去打包Windows，只需要發(fā)布web-mobile，使用electron框架做成桌面應(yīng)用，利用第三方庫和插件去實(shí)現(xiàn)
文末有源碼
技術(shù)點(diǎn)
- Electron和Creator的通訊
- 在Creator里封裝好API隨意調(diào)用
- 獲取電腦當(dāng)前分辨率，獲取屏幕支持的所有分辨率
- 修改電腦的分辨率
- 調(diào)用一些原生接口，比如靜音、休眠、截圖等
來看看效果
一、Electron項(xiàng)目
什么是Electron
簡單來說，Electron可以把網(wǎng)頁變成桌面應(yīng)用，支持發(fā)布到Windows、macOS和Linux
中文文檔
本文只做發(fā)布Windows
安裝electron（已經(jīng)安裝完成的可以跳過）
已經(jīng)安裝了electron的可以跳過
首先要安裝nodejs和electron，我的電腦上已經(jīng)安裝了不能重復(fù)安裝，我特意開了一個(gè)win10虛擬機(jī)重新開始安裝環(huán)境
安裝electron，首先要安裝nodejs
官網(wǎng)下載nodejs
直接下載安裝，一路下一步即可
安裝完右鍵左下角win圖標(biāo)，打開power shell（打開cmd也可以）
分別輸入
顯示版本就可以了
接下來安裝electron，在安裝之前建議先把npm換成淘寶源
不換會特別慢，甚至導(dǎo)致錯誤
檢測是否配置成功
然后全局安裝electron
npm install -g electron我這里安裝的時(shí)候報(bào)了錯
意思是npm有新版本需要更新
那就按照他的要求輸入
然后再安裝electron，就成功了
成功之后輸入
彈出一個(gè)這樣的窗口就算安裝成功了
查看版本（之后會用到）
把CocosCreator項(xiàng)目打包web變成桌面應(yīng)用
新建一個(gè)3.x的hello world項(xiàng)目
啥也不用改直接打包web-mobile
在任意位置新建一個(gè)文件夾，就叫他test吧（路徑最好不要中文）
把剛剛打包好的所有文件復(fù)制到 test 文件夾
按住shift不松手，在文件夾的空白部分右鍵，打開power shell
輸入
然后一直按回車
這樣就創(chuàng)建了package.json文件
把它改成下面這樣，作者、描述可以隨便寫
electron項(xiàng)目需要一個(gè)入口文件，它就是main.js（可以叫它主進(jìn)程），剛剛創(chuàng)建的package.json的main就指向了它，不過它還不存在，那就新建一個(gè)main.js吧
文檔的話：
任何 Electron 應(yīng)用程序的入口都是 main 文件。 這個(gè)文件控制了主進(jìn)程，它運(yùn)行在一個(gè)完整的Node.js環(huán)境中，負(fù)責(zé)控制您應(yīng)用的生命周期，顯示原生界面，執(zhí)行特殊操作并管理渲染器進(jìn)程(稍后詳細(xì)介紹)。
main.js的代碼如下
先把代碼復(fù)制粘貼進(jìn)去，一會詳細(xì)講
然后在test文件夾的所在目錄（注意不是test文件夾內(nèi)）打開power shell，輸入
electron test這樣就運(yùn)行了
不出意外，你會看到hello world場景的小人在慢慢地跳舞，而且還是全屏的
這里有概率會出現(xiàn)一個(gè)錯誤，不影響程序正常運(yùn)行，就沒有去管他，不知道為什么引起也不知道怎么解決，希望大佬們，交流、指導(dǎo)！感謝！！！
現(xiàn)在，來看看main.js都寫了什么吧
首先從electron引入了BrowserWindow和app模塊
BrowserWindow是創(chuàng)建并控制瀏覽器窗口
app是控制應(yīng)用程序的事件生命周期
app官方文檔
BrowserWindow官方文檔
聲明窗體變量，方便之后對窗口進(jìn)行全屏、大小設(shè)置等等
程序加載完成后創(chuàng)建一個(gè)窗口
在最后一個(gè)窗口被關(guān)閉的時(shí)候退出應(yīng)用
來看看createWindow方法是怎么創(chuàng)建窗口的
new出一個(gè)BrowserWindow實(shí)例，設(shè)置一些屬性，這里有超級多的屬性可以自定義，根據(jù)自己的需求想怎么樣就怎么樣，文檔寫的很詳細(xì)很詳細(xì)了，還多很多實(shí)例方法，之后就是用這些方法實(shí)現(xiàn)全屏、窗口化等
代碼中的網(wǎng)頁功能設(shè)置這幾行代碼必須有，非常重要，沒有它之后electron不能和Cocos的代碼通訊
為什么能看到小人跳舞呢，窗口要顯示什么呢？窗口最終將顯示一個(gè)網(wǎng)頁，而這個(gè)網(wǎng)頁，就是剛剛打包好的web-mobile中的index.html，代碼用loadURL指定了窗口將顯示的網(wǎng)頁就是main.js所在目錄的index.html，之前講過main.js叫做主進(jìn)程，我們的網(wǎng)頁就叫做渲染進(jìn)程
這里就可以使用一些窗口的實(shí)例方法設(shè)置窗口剛創(chuàng)建完的樣子，比如是否全屏、是否最大化窗口等等，這里一定要有
不寫這句代碼會造成最上面有一層菜單，作為一個(gè)游戲這肯定不是想要的
CocosCreator代碼和Electron的通訊（渲染進(jìn)程和主進(jìn)程的通訊）
官方的打包steam方案中也有提到與electron的通訊
剛才的main.js，只能在窗口創(chuàng)建完的時(shí)候執(zhí)行一些實(shí)例方法，如何在打包好的網(wǎng)頁、在Cocos中調(diào)用這些方法呢？
在主進(jìn)程main.js中，從electron導(dǎo)入ipcMain模塊
這個(gè)模塊可以在主進(jìn)程中添加渲染進(jìn)程可以調(diào)用的事件
這么寫，就注冊了兩個(gè)事件供渲染進(jìn)程調(diào)用，aaa，bbb就是自定義的名字，每個(gè)事件都有一個(gè)固定的名字
aaa是一個(gè)void函數(shù)，沒有返回值，而bbb有字符串作為返回值
在Creator中新建一個(gè)TS腳本取名Electron
Electron.ts
渲染進(jìn)程調(diào)用主進(jìn)程注冊好的事件需要借助ipcRenderer模塊
首先在腳本里面獲取一下electron，這里是全局變量，等打包web-mobile后需要在index.html里面加上
這里只是說一下，后面還會講
獲取到了electron，就可以使用ipcRenderer模塊接收事件了，調(diào)用一個(gè)void函數(shù)和調(diào)用一個(gè)有返回值的函數(shù)所用方法可不一樣哦
隨便找個(gè)節(jié)點(diǎn)把腳本掛上
這時(shí)候運(yùn)行會報(bào)錯，報(bào)錯就對了，這是正常現(xiàn)象，因?yàn)榇a根本找不到electron，必須在打包好的index.html里面定義electron（馬上就要詳細(xì)講了）
打包web-mobile
放到test文件夾，替換掉之前的文件
在Creator的代碼里從全局變量獲取了electron，但并沒有定義全局變量electron
必須在打包之后的index.html的body里面加上scripts定義electron，就像下面這樣，這樣才不會找不到electron而報(bào)錯
在main.js中加上一句代碼，寫在窗口創(chuàng)建之后，這是打開網(wǎng)頁的開發(fā)者工具
加上這句代碼之后，在運(yùn)行會出現(xiàn)開發(fā)者工具
注意：主進(jìn)程的log只會出現(xiàn)在啟動electron項(xiàng)目的cmd/power shell窗口中，而渲染進(jìn)程的log會出現(xiàn)在開發(fā)者工具的控制臺（console）里
小提示：每次運(yùn)行都輸入electron test嫌麻煩，可以新建一個(gè)cmd文件，里面就寫electron test，以后每次只雙擊這個(gè)cmd文件就可以了
這樣就實(shí)現(xiàn)了渲染進(jìn)程調(diào)用主進(jìn)程的方法
二、使用nircmd.exe調(diào)用原生API
什么是nircmd，它都能干什么？
NirCmd是一套免費(fèi)的命令列指令，提供許多控制Windows的參數(shù)。讓你運(yùn)用命令行的方式，來執(zhí)行一些常用的動作，例如修改分辨率，增加或減少計(jì)算機(jī)音量，模擬鍵盤或鼠標(biāo)按下，讓電腦進(jìn)入休眠等等
官網(wǎng)（英文）
中文文檔
網(wǎng)上搜索一下，很多網(wǎng)站都可以下載，因?yàn)楣倬W(wǎng)實(shí)在是太慢了進(jìn)不去所以就不從官網(wǎng)下了
非官方下載
注意！！！nircmd.exe有很大可能會被誤報(bào)成病毒，但它真的是沒有病毒的，下面是官網(wǎng)的解釋
注意！！！nircmd.exe有很大可能會被誤報(bào)成病毒，但它真的是沒有病毒的，下面是官網(wǎng)的解釋
注意！！！nircmd.exe有很大可能會被誤報(bào)成病毒，但它真的是沒有病毒的，下面是官網(wǎng)的解釋
下載之后，只需要nircmd.exe這一個(gè)文件即可，別的東西都可以刪了，用不到
其他的都刪嘍只留nircmd.exe
這一個(gè)小小的EXE文件就可以進(jìn)行那么多操作，真是太厲害了，之后修改分辨率，就要用到它
如何使用nircmd.exe
在nircmd.exe文件所在位置打開cmd，不要打開power shell
在上面的輸入框輸入cmd就可以在當(dāng)前目錄打開cmd了
輸入
這是設(shè)置為靜音的指令，輸入完以后電腦就會被靜音
明白了嗎？nircmd.exe就是這么用的
需要注意，因?yàn)閏md窗口是在nircmd.exe所在路徑下打開的，所以直接輸入
才有效果，如果不在nircmd.exe所在路徑打開cmd，輸入這個(gè)則會錯誤
只要在前面加上nircmd.exe的所在目錄，就可以在任意cmd中使用了，我的電腦上nircmd.exe在D:\ElectronDemo\test下
D:\ElectronDemo\test\nircmd.exe mutesysvolume 1在代碼中使用nircmd.exe
nodejs子進(jìn)程官方文檔
只要用代碼打開一個(gè)cmd窗口，輸入自定義的字符串，然后回車，就完成了指令的輸入
可以用子進(jìn)程模塊來實(shí)現(xiàn)
在主進(jìn)程中導(dǎo)入子進(jìn)程模塊
把nircmd.exe放到test文件夾下
在窗口創(chuàng)建后，加上一句代碼
再運(yùn)行，會發(fā)現(xiàn)電腦直接靜音了
完美~
我的例子里只選了幾個(gè)我認(rèn)為很有意思的指令寫出來，nircmd.exe還可以干更多事
三、獲取屏幕支持的所有分辨率和當(dāng)前分辨率
node-win-screen-resolution插件
這是讓我最頭疼的問題，在這個(gè)問題上花的時(shí)間最長，一直不知道怎么實(shí)現(xiàn)，直到在github看見了這個(gè)插件
github地址
這個(gè)插件是C++編寫的，nodejs不能直接拿來用，需要進(jìn)行構(gòu)建，編譯成二進(jìn)制的node文件，這樣才可以拿來用
編譯這個(gè)插件，是我噩夢的開始！
編譯插件
編譯文檔
我已經(jīng)編譯好了，都在源碼里面，在文末，可以直接拿來用，這里看看就好了，不用再去編譯一遍了
不知道為什么作者在開源這個(gè)插件的時(shí)候?yàn)槭裁床话裯ode文件一起上傳
這兩句構(gòu)建代碼，configure順利通過，build總是報(bào)錯
我翻遍了網(wǎng)上幾乎所有關(guān)于構(gòu)建C++插件的文章，不斷解決報(bào)錯，不斷換版本，編譯這個(gè)網(wǎng)上說需要啥模塊的都有，我就瞎安了一大堆，人家說需要什么我都下了，也不知道在VisualStudio里面多下載了多少模塊，build之前，生成的解決方案還需要手動修改附加依賴項(xiàng)和忽略特定默認(rèn)庫，再build才能成功
詳細(xì)看這里
總之，編譯這個(gè)插件我也就失敗了一百多次吧
編譯完是兩個(gè)node文件，可以在代碼里直接使用
在代碼中使用
插件lib下的index.cjs使用了bindings模塊，這個(gè)模塊在開發(fā)的時(shí)候使用沒有任何問題，打包后死活用不了，百度后說是electron不能使用bindings，查了解決辦法也沒弄好，索性就不用bindings了，稍微修改了一下index.cjs
插件從github上下載來并不能直接用，需要編譯，還得手動改下index.cjs讓它不用bindings，我都弄好了，在文末源碼里面就有
結(jié)構(gòu)應(yīng)該是這樣的，兩個(gè)二進(jìn)制node文件，一個(gè)lib庫，一個(gè)test文件夾里面的腳本用來測試
在test文件夾下打開power shell，運(yùn)行test腳本，如果成功輸出分辨率就說明沒問題
這個(gè)獲取到的列表和系統(tǒng)設(shè)置里面的分辨率列表是一樣的
test.cjs首先導(dǎo)入index.cjs，然后獲取，直接導(dǎo)入index.cjs來用就可以，test只是用來測試的
四、在Creator代碼中封裝API
其實(shí)一二三已經(jīng)把核心都講完了，這回再來做一個(gè)整體的封裝
代碼太多就不直接放出來了，都在源碼里面
這些都是在Cocos里面封裝好的API，可以隨意調(diào)用
在Cocos里面運(yùn)行會報(bào)錯，這是正常現(xiàn)象，必須在打包好的index.html里面的body里加上下面的代碼，用electron運(yùn)行才不會報(bào)錯
直接用Electron.ts里面的靜態(tài)方法就可以，主進(jìn)程是配套寫好的
nircmd.ts
五、構(gòu)建，發(fā)布exe（只想用不想搞懂原理）
哈哈，懶人都直接看這里了
默認(rèn)你已經(jīng)安裝好了nodejs和electron
我做了一個(gè)方案，只需要把打包完的網(wǎng)頁放到game文件夾下，就可以發(fā)布出exe
Cocos中API的封裝
直接用Electron.ts里面的靜態(tài)方法就可以，主進(jìn)程是配套寫好的
當(dāng)前，你也可以去修改主進(jìn)程，自定義一些方法供Cocos代碼調(diào)用
修改package.json中的electron版本
將使用electron-packager打包
首先安裝依賴
把打包好的web-mobile文件放到game文件夾下
在打包好的index.html的body里面，加上這三句代碼
要修改package.json的結(jié)尾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既可以查看版本
打包參數(shù)參考
改圖標(biāo)
有改圖標(biāo)需求直接在icon文件夾下把icon.ico換下來
構(gòu)建
最后運(yùn)行cmd文件，構(gòu)建完會多出一個(gè)WindowsDemo文件夾，下次再次構(gòu)建的時(shí)候要把它刪除才可以再次構(gòu)建
不運(yùn)行cmd文件，在game文件夾下power shell輸入，同理
一定要注意electron版本號
構(gòu)建完如果打不開，出現(xiàn)下面這種，或者全屏就卡住等奇葩情況
不要悲傷，不要心急
改一下兼容性就好了，親測有效
六、做成安裝包
首先打包成exe
打開VisualStudio
文件—新建—項(xiàng)目
選擇Setup Project，然后點(diǎn)確定
注意！：如果找不到這個(gè)選項(xiàng)，需要手動安裝Microsoft Visual Studio Installer Projects
打開工具—擴(kuò)展和更新—在左側(cè)找到聯(lián)機(jī)，搜索Microsoft Visual Studio Installer Projects進(jìn)行安裝
這個(gè)會很慢，在網(wǎng)上搜一下，有很多離線安裝包的下載，我就是從網(wǎng)上下載的離線安裝包
選中打包之后的所有文件，放到這里
左側(cè)三個(gè)英文分別是
Application Folder — 應(yīng)用程序文件夾
User’s Desktop — 用戶的桌面
User’s Programs Menu — 用戶的程序菜單
要想有桌面快捷方式，就給Game.exe創(chuàng)建快捷方式，放到桌面文件夾
應(yīng)用程序菜單也可以放一個(gè)
在生成菜單下找到快捷鍵為U的選項(xiàng)，然后等待他生成完
打開項(xiàng)目路徑，就能看見安裝包了
這兩個(gè)運(yùn)行哪個(gè)效果好像都一樣
一路下一步，之后就會看到桌面上的快捷方式和最近添加的快捷方式了
在應(yīng)用和程序里面可以直接卸載
也可以運(yùn)行之前的安裝程序刪除
七、源碼和體驗(yàn)地址
直接發(fā)布Windows的方案
gitee：https://gitee.com/propertygame/creator-build-windows-app
發(fā)布Windows的CocosCreator例子
gitee：https://gitee.com/propertygame/cocos-creator-desktop-demo
體驗(yàn)地址（不限速飛速下載）
https://wwi.lanzoui.com/iHISKutnlmf
如果不能正常運(yùn)行，改一下兼容性
構(gòu)建之后包體大了不少，但是作為一個(gè)PC游戲，這樣的大小是完全在可以接受的范圍內(nèi)的
結(jié)尾
這是我目前為止寫的最詳細(xì)、所用時(shí)間最多的一篇文章了
如果這篇文章幫到了你，點(diǎn)個(gè)贊吧！
技術(shù)Q群：1130122408
微信公眾號：property游戲開發(fā)
總結(jié)
以上是生活随笔為你收集整理的【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt 设置指定列数显示
- 下一篇： jdk环境变量配置_jmeter及jdk