CocosCreator 构建透明背景应用(最新版!!!)

透明原理

使用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();
    }
});

step2:ENABLE_TRANSPARENT_CANVAS

修改Cocos creator 宏勾选ENABLE_TRANSPARENT_CANVAS
在这里插入图片描述

step3:SOLID_COLOR Transparent

Canvas 中Camera 的Clear Flags为SOLID_COLOR 并将颜色的透明通道设置为0
在这里插入图片描述

step:4 Build Web phone

选择构建,选择Web 移动端方案
在这里插入图片描述

step5:package electron-js & change body background-color

构建成功之后,修改 /style.css 中body的background-color样式为#33333300 原本是#333333

在这里插入图片描述

效果图补充

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/topc2000/article/details/143578997