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

文章目录

  • 透明原理
  • 补充设置截图以及代码
    • 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();}
});

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

在这里插入图片描述

效果图补充

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据学习11之Hive优化篇

1.Hive压缩 1.1概述 当前的大数据环境下,机器性能好,节点更多,但并不代表我们无条件直接对数据进行处理,在某些情况下,我们依旧需要对数据进行压缩处理,压缩处理能有效减少存储系统的字节读取数&#xff0…

C++builder中的人工智能(13):SELU激活函数在C++应用中的工作原理

SELU(Scaled Exponential Linear Unit)激活函数是一种在人工神经网络(ANN)中使用的高级激活函数。它是由Gnter Klambauer, Thomas Unterthiner, Andreas Mayr在2017年提出的,旨在创建自归一化的神经网络(Se…

(2024最新完整详细版)Docker部署MinIO

对象存储MinIO 对象存储是用于存储非结构化数据的数据存储架构,它将一个数据单元称为一个对象,每个对象都包含数据本身、元数据(描述数据的信息)和一个唯一标识符(通常是一个URL地址)。 MinIO是一个开源的对…

运用Agent搭建“狼人杀”游戏服务器端!

背景 从23年开年以来,大模型引爆了各行各业。去年比较出圈的是各类文生图的应用,比如Stable Diffusion。网上可以看到各类解释其背后的原理和应用的文章。另外一条平行线,则是文生文的场景。受限于当时LLM(大语言模型&#xff09…

性能调优专题(6)之MVCC多版本并发控制

一、概述 Mysql在可重复读隔离级别下如果保证事务较高的隔离性,在上一个篇章有详细介绍,同样的sql语句在一个事务多次执行查询结果相同,就算其他事务对数据进行修改也不会影响到当前事务sql语句的查询结果。 这个隔离性就是靠MVCC(Multi-Version Concurrency Control)机制来…

2022 icpc杭州(F,D,A,C,K)

文章目录 [F. Da Mi Lao Shi Ai Kan De](https://codeforces.com/gym/104090/problem/F)[D. Money Game](https://codeforces.com/gym/104090/problem/D)[A. Modulo Ruins the Legend](https://codeforces.com/gym/104090/problem/A)[C. No Bug No Game](https://codeforces.co…

ArcGIS/QGIS按掩膜提取或栅格裁剪后栅格数据的值为什么变了?

问题描述: 现有一栅格数据,使用ArcGIS或者QGIS按照矢量边界进行按掩膜提取或者栅格裁剪以后,其值的范围发生了变化,如下: 可以看到,不论是按掩膜提取还是进行栅格裁剪后,其值的范围均与原来栅…

机器学习课程总结(个人向)

前言 通过看课件PPT整理的笔记,没有截图 由于大部分内容已经耳熟能详了,故记录比较简略,只记录了一些概念和需要记忆的地方。 里面有较多的个人观点,未必正确。如有错误,还请各位大佬指正 正文 绪论 机器学习的定…

后台管理系统窗体程序:文章管理 > 文章列表

目录 文章列表的的功能介绍: 1、进入页面 2、页面内的各种功能设计 (1)文章表格 (2)删除按钮 (3)编辑按钮 (4)发表文章按钮 (5)所有分类下拉框 &a…

【算法-插入排序】基础知识,代码示例和应用场景

插入排序是一种相对简单、直观的排序算法,有点类似打扑克牌时将一张张牌“插入”到合适位置的过程。虽然插入排序的效率不如高级排序算法,但它有自己独特的优点,尤其在小数据集或已部分有序的数据中表现出色。 什么是插入排序 插入排序是一种…

大数据学习10之Hive高级

1.Hive高级 将大的文件按照某一列属性进行GROUP BY 就是分区,只是默认开窗存储; 分区是按行,如一百行数据,按十位上的数字分区,则有十个分区,每个分区里有十行; 分桶是根据某个字段哈希对桶数取…

Me-LLaMA——用于医疗领域的新型开源大规模语言模型

摘要 大规模语言模型的出现是提高病人护理质量和临床操作效率的一个重大突破。大规模语言模型拥有数百亿个参数,通过海量文本数据训练而成,能够生成类似人类的反应并执行复杂的任务。这在改进临床文档、提高诊断准确性和管理病人护理方面显示出巨大的潜…

练习LabVIEW第四十四题

学习目标: 计算学生三门课(语文,数学,英语)的平均分,并根据平均分划分成绩等级。要求输出等级A,B,C,D,E。90分以上为A,80~89为B,70~79为C,60~69为D&#xff…

【系统架构】如何演变系统架构:从单体到微服务

引言 随着企业的发展,网站架构必须不断演变以应对日益增长的用户流量和复杂性需求。本文将详细探讨从单体架构到微服务架构的演变过程,尤其关注订单和支付服务的实现方式,帮助您打造一个高效、可扩展的在线平台。 步骤1:分离应用…

Flutter鸿蒙next 实现长按录音按钮及动画特效

在 Flutter 中实现长按录音按钮并且添加动画特效,是一个有趣且实用的功能。本文将通过实现一个具有动画效果的长按录音按钮,带领你一步步了解如何使用 Flutter 完成这个任务,并解释每一部分的实现。 一、功能需求 我们需要一个按钮&#xf…

layui 实现 城市联动

<div class"layuimini-container"><form id"app-form" class"layui-form layuimini-form"><div class"layui-form-item"><label class"layui-form-label">标题</label><div class"la…

SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能

文章目录 SpringBoot整合SpringSecurity实现密码加密解密、登录认证退出功能一、引言二、JWT简介与组成1、JWT简介2、JWT的组成2.1、Header&#xff08;头部&#xff09;2.2、Payload&#xff08;载荷&#xff09;2.3、Signature&#xff08;签名&#xff09; 三、Spring Secur…

重建大师7.0 | 全新倾斜高斯泼溅OPGS技术,实景三维大规模城市三维场景的更逼真化表达

在刚刚结束的“AI智算、国产信创”2024秋季新品发布会上&#xff0c;大势智慧隆重发布了重建大师7.0、重建农场信创版、低空三维AI智算平台等覆盖实景三维数据生产体系全流程、推进实景三维国产化建设与低空应用的全新系列产品。 今天&#xff0c;重点为大家介绍一下重建大师7.…

华为 Atlas500 Euler 欧拉系统操作指南

华为 Atlas500 Euler 欧拉系统操作指南 ssh root连接 找到Atlas500的IP地址&#xff0c;如&#xff1a;192.168.1.166 账号/密码&#xff1a;admin/Huawei123 root/密码&#xff1a;Huawei123456 #直接使用root ssh连接 这里受限不让直接用root连接 ssh root192.168.1.116 #…

【MySQL 保姆级教学】深层理解索引及特性(重点)--下(12)

索引&#xff08;重点&#xff09; 1. 索引的作用2. 索引操作2.1 主键索引2.1.1 主键索引的特点2.1.2 创建主键索引 2.2 唯一键索引2.2.1 唯一键索引的特点2.2.2 唯一索引的创建 2.3 普通索引2.3.1 普通索引的特点2.3.2 普通索引的创建 2.4 全文索引2.4.1 全文索引的作用2.4.2 …