当前位置：首页 > news >正文

CocosCreator 构建透明背景应用（最新版！！！）

news 2025/7/20 10:23:22

文章目录

透明原理
补充设置截图以及代码
- step1: electron-js mian.js
- step2:ENABLE_TRANSPARENT_CANVAS
- step3:SOLID_COLOR Transparent
- step:4 Build Web phone
- step5:package electron-js & change body background-color
效果图补充

透明原理

使用Cocos creator 做桌面应用开发的时候，需要让桌面背景透明，比如live2d这类的应用，使用electron-js 作为package方案，如何实现桌面透明？步骤如下

tips:实测Cocos creator版本3.7.4，2.x版本可以csdn搜索另外一篇博文有提到

修改electronjs的window未no frame，transparent为true
修改Cocos creator 宏勾选ENABLE_TRANSPARENT_CANVAS
Canvas 中Camera 的Clear Flags为SOLID_COLOR 并将颜色的透明通道设置为0
选择构建，选择Web 移动端方案
构建成功之后，修改 /style.css 中body的background-color样式为#33333300 原本是#333333

补充设置截图以及代码

step1: electron-js mian.js

修改electronjs的window未no frame，transparent为true

const { app, BrowserWindow } = require('electron');
const path = require('path');function createWindow() {const win = new BrowserWindow({width: 800,height: 600,transparent: true,frame: false,webPreferences: {nodeIntegration: true,contextIsolation: false}});win.loadFile('data/index.html'); // Load your transparent HTML file
}app.whenReady().then(createWindow);
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}
});