• cocos creator 场景如何透明,多个canvas层级显示


    转载地址:https://forum.cocos.com/t/creator-canvas/55373/14

    • Creator 版本:1.7

    • 目标平台:WEB MOBILE

    项目需要,页面做了多个Canvas,不同的Canvas可以调整Css的zIndex来调整渲染层级关系:

    不过cocos自带的Canvas底层会盖着一层黑色的颜色,怎么去掉?















    截这些图就为了说明
    cc.find('Canvas').active = false;
    执行之后,依然有一层黑颜色遮盖到cocos引擎的Canvas里面,我就想把这个黑色给替换成透明颜色,请问怎么做到?

    • Canvas放一个透明的背景,然后把cocos的canvas标签的背景颜色设置为 然后再试试


    试过了,不行


    http://docs.cocos.com/creator/api/zh/enums/macro.html?h=cc.game21 
    在cc.game.run 开始之前cc.macro.ENABLE_TRANSPARENT_CANVAS = true; 最好打包后再main.js 里面加,过不过我没试过,我想应该是这样的


    试过了,没效果

    直接改的打包后的main.js

    Canvas设置了透明度吗?
    不改透明度,可以显示Canvas后面的dom元素才能实现比较好的效果

    没有,这个是根据cocos里面的这个位置node节点的透明度来决定的,我在里面有个背景遮罩,有0.2的透明度

    你把body的背景色去掉,如果Canvas透明了,那么整个页面应该是白色的



    当你设置了为true后,在绘制区域有透明度的地方可以看到后面的div元素

    不加cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
    这个透明效果就出不来吗?


    经过多次实验,Canvas模式下,

    cc.game.run(option, onStart);

    之前

    cc.macro.ENABLE_TRANSPARENT_CANVAS = true;

    成功露出了cocos 自带的Canvas下的其他dom元素

    在WebGL模式下,渲染层级在最上面的Node需要开启opacity = 1,同时设置

    则此node内的范围都会露出底层的其他dom元素,同时node之外的内容被裁切掉了

    感谢kkk_barron同学的支持,结帖撒花~


    根据楼主测试结果,
    cc.game.run之前设置cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
    然后cc.director.setClearColor(new cc.Color(0,0,0, 0));,这样在canvas和webGL下都正常使用。
    因为我是VideoPlayer组件播放视频,实现跳过按钮,所以我还设置了VideoPlayerElement的zIndex = -1


    我来做一个总结吧:
    1、修改
    C:CocosCreator esourcesstaticpreview-templatesoot.js
    C:CocosCreator esourcesstaticuild-templatessharesmain.js

    """
    cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
    cc.game.run(option, function () {
    cc.director.setClearColor(new cc.Color(0,0,0, 0));
    """

    2、修改CSS
    C:CocosCreator esourcesstaticpreview-templatesstyle.css
    C:CocosCreator esourcesstaticuild-templatessharesstyle-mobile.css

    body和.wrapper中的background-color改为如下:

    background-color: transparent; /*设置透明*/



  • 相关阅读:
    人们常说的带宽是什么意思?
    关注前端性能
    单测学习笔记
    基于 Istanbul 生成测试用例覆盖率报告
    如何做高水科研
    Human-like Controllable Image Captioning with Verb-specific Semantic Roles(具有动词语义角色的类人可控图像字幕生成)
    Netty应用程序的全部基本构建模块_netty学习笔记(2)-20210405
    异步和事件驱动_netty学习笔记(1)-20210330
    理解 cosocket(转)
    nginx lua阶段处理流程
  • 原文地址:https://www.cnblogs.com/mokey/p/9934375.html
Copyright © 2020-2023  润新知