多分辨率适配时,Mask组件无法铺满全屏的问题

  • Creator 版本:2.0.9

  • 目标平台: Web, iOS

  • 详细报错信息,包含调用堆栈:

  • 重现方式:

  • 出现概率:必现

将场景Canvas的Fit Height和Fit Width均设置为true,即文档中描述的SHOW_ALL模式,自动适配Height,Width。

但是场景的Mask却无法铺满全屏,即使将Mask的子节点的width/height设置为非常大。
从表现上看,Mask遮罩好像使用Canvas的设计分辨率进行了裁剪。

模拟iPad Pro的表现:

模拟iPhone X的表现:

模拟iPhone 7的表现:

查看CCMask.js中的代码如下 ,是我使用的不对还是因为_clearGraphics的填充问题呢?
期望:Mask子节点非常大时,一定可以铺满全屏。

MaskExample.zip (241.8 KB)

https://forum.cocos.com/t/cocos-creator/74001

这根 Mask 无关吧?你用一个超大的 Sprite 能遮住全屏?

将场景Canvas的Fit Height和Fit Width均设置为true,和你想的不一样,并不是拉伸宽高填满屏幕 ,反而是按照最小比率拉伸宽或者高,如果屏幕的尺寸的比例和canvas的比例不一样时就会留下黑边。这个黑边并不是mask没有填满,而是canvas只渲染了这个区域,超过canvas的都不会显示。

Mask的确是这个问题,使用Mask反向遮罩裁剪时,超出Canvas区域的部分不会进行显示(不进行反向遮罩则不会)。 @jare

暂时处理办法,你可以使用同色精灵和widget组件手动对canvas四边进行补充。或者换一种适配方式。

文档后面两种适配的描述有问题吧。
第一种 fitHeight,第二种fitwidth,第三种fitHeight,fitWidht同时勾选,第四种fitHeight,fitWidth同时不勾选。
文档第三种和第四种描述搞混了,第四种应该是同时不勾选,少了个"不"字,并且这个应该叫No_Border或者其他更合适吧,第三种叫Show_All才合适。

应该是Mask的问题。应该Mask中的_clearGraphics画的矩形是以canvas大小为准,实际屏幕与设计分辨率不一致的时候,Canvas只适配宽或高,导致无法铺满全屏,所以Mask反向遮罩时会有黑边。如果修改Mask中的_clearGraphics画的矩形大小,可以解决这个问题:

const { ccclass, property, requireComponent } = cc._decorator;

@ccclass
@requireComponent(cc.Mask)
export default class MaskExtComponent extends cc.Component {

    private mask: cc.Mask;
    private clearGraphic: cc.Graphics;
    protected onLoad(): void {
        this.mask = this.getComponent(cc.Mask);
        this.clearGraphic = this.mask._clearGraphics;

        let canvasSize = cc.view.getCanvasSize();
        this.clearGraphic.rect(-canvasSize.width/2, -canvasSize.height/2, 3000, 3000);
        this.clearGraphic.fill();
    }

PS:刚才下载2.1.1版,此问题已经没有了,看CCMask.js的log,应该是代码重构时修复了这个问题

3赞

代码中主动调整Mask中_clearGraphics的绘制大小可以避免这个问题。

谢谢跟进

收到,我们看下