设置canvas透明导致 正常节点透明度设置效果异常

Creator 2.x
#1

  • Creator 版本：2.0.10

  • 目标平台： Web

  • 详细报错信息，包含调用堆栈：因为项目需求需要，设置初始场景透明，根据稳文档 设置了 cc.macro.ENABLE_TRANSPARENT_CANVAS = true;
    cc.director.setClearColor(new cc.Color(0, 0, 0, 0)); （1.9.3版本）
    场景透明效果已经实现，但是引发其他问题
    即：
    只要节点有透明度设置，就会透过该透明度，看到底下的背景如图：

    image.png1920×1057 539 KB

底下蓝色为背景，整个canvas起了一个 半透明蒙层（颜色也受背景色影响了），中间圆为一个图片，周围留有光晕效果，所以有半透明，但是却透出蓝色的背景了，下图为 为这只透明度支持

image.png1920×1057 533 KB

  • 重现方式：

  • 之前哪个版本是正常的 ：1.9.3 及 2.0.10版本表现均一致

  • 手机型号 ：

  • 手机浏览器 ：

  • 编辑器操作系统 ：

  • 编辑器之前是否有其它报错 ：

  • 出现概率：

  • 额外线索：

#2

把第二句代码删了

#3

已经没加这句了 cc.director.setClearColor(new cc.Color(0, 0, 0, 0));
一样的会有～

#4

image.png1920×977 532 KB

纠正一下，这张图才是，最终有问题的效果，整个蓝色背景，与canvas内容混合了。
如果只是 透明蒙层解决这个问题 可以设置 这个参数

image.png1870×639 445 KB

效果便如帖子中第一张图的效果，但是实际业务用的图片设置 one ，效果不好

#5

必须用 one，one minus src alpha，否则 web 端的贴图渲染时会莫名其妙和 canvas 背后的 dom 背景混合，这个目前没有办法解决，绕过的方式就是更改半透贴图的混合模式，同时设置贴图的预乘参数为 premultiply alpha，这个选项在 2.x 贴图资源上可以设置，在 1.9 应该可以通过 Texture update API 来设置进去

2赞
#6

嗯，修改贴图混合模式确实可以解决canvas和 dom混合的问题，只是项目中的实际效果和设计稿会有瑕疵

#7

解决步骤

前提
A： 宿主页面，2.1.3开发。
B: 弹出层WebView页面。

  1. 首先和其他处理一样，把背景变成透明。
  2. 不同的是我们弹出层是WebView，也就是iframe。
  3. iframe内的B页面如果用webgl就会出现上述透明度混合问题。
  4. 既然这是个无法规避的问题，换个思维，Canvas渲染本质上是软渲和div等html元素一致，是否可以用canvas渲染模式？
  5. creator 2.x已经不支持canvas，所以B项目退回到1.9.x开发，使用canvas模式打包。
  6. 问题依旧，调试引擎代码内部断点显示还是webgl代码！！
  /**** creator 1.9.2 ***/
    function _determineRenderType(config) {
      var CONFIG_KEY = cc.game.CONFIG_KEY, userRenderMode = parseInt(config[CONFIG_KEY.renderMode]) || 0;
      (isNaN(userRenderMode) || userRenderMode > 2 || userRenderMode < 0) && (config[CONFIG_KEY.renderMode] = 0);
      cc._renderType = cc.game.RENDER_TYPE_CANVAS;
      cc._supportRender = true;
      if (0 === userRenderMode) {
        if (cc.sys.capabilities["opengl"]) {
          cc._renderType = cc.game.RENDER_TYPE_WEBGL;
          cc._supportRender = true;
        } else if (cc.sys.capabilities["canvas"]) {
          cc._renderType = cc.game.RENDER_TYPE_CANVAS;
          cc._supportRender = true;
        }
      } else if (1 === userRenderMode && cc.sys.capabilities["canvas"]) {
        cc._renderType = cc.game.RENDER_TYPE_CANVAS;
        cc._supportRender = true;
      } else if (2 === userRenderMode && cc.sys.capabilities["opengl"]) {
        cc._renderType = cc.game.RENDER_TYPE_WEBGL;
        cc._supportRender = true;
      }
      cc._renderType = cc.game.RENDER_TYPE_WEBGL;   // !!!!!!!!!
      cc._supportRender = true;
    }
  1. 最后采用下面处理，在main.xxx.js里面 boot方法内执行
Object.defineProperty(cc, '_renderType', { 
            configurable: false, 
            get: function() { 
                return 0;  // canvas
            } 
        });

done

1赞
#8

MARK。亲测有效。

#9

mark.

#11

文字怎么处理呢

#12

修改了贴图混合模式 设置透明度还是无效

#13

应该是说开启canvas 透明之后。 在ios平台设置透明度 根本无法完全透明。还有一部分留在屏幕上