[Cocos Creator] 一个全能的挖孔 Shader

陈皮皮

发布于 2020-07-10 16:58:32

2.5K0

发布于 2020-07-10 16:58:32

文章被收录于专栏：菜鸟小栈

效果展示

★ 镂空 Shader 与 HollowOut 组件搭配使用效果顶呱呱~

是矩形还是圆形呢

圆形

大小位置变化丝毫不影响

多姿多彩

★ 下图是我配合 TouchBlocker 组件实现的新手引导功能。

TouchBlocker 是用来限制可点击的节点的独立组件，完整文件在 eazax-ccc/component 目录下。

让你点啥就点啥

☆ 实现上面的新手引导需要的核心代码还不到 15 行，嗐！苏福~

// 以下为新手引导实现核心代码，多简单啊

protected onLoad() {
    this.startBtn.on('touchend', this.onStartBtnClick, this);
    this.oneBtn.on('touchend', this.onOneBtnClick, this);
    this.twoBtn.on('touchend', this.onTwoBtnClick, this);
}

protected start() {
    this.hollowOut.nodeSize(); // 将遮罩镂空设为节点大小
    this.touchBlocker.setTarget(this.startBtn); // 设置可点击节点
}

private async onStartBtnClick() {
    this.touchBlocker.blockAll(); // 屏蔽所有点击
    await this.hollowOut.rectTo(1, this.oneBtn.getPosition(), this.oneBtn.width + 10, this.oneBtn.height + 10, 5, 5);
    this.touchBlocker.setTarget(this.oneBtn); // 设置可点击节点
}

private async onOneBtnClick() {
    this.hollowOut.nodeSize(); // 将遮罩镂空设为节点大小
    this.touchBlocker.blockAll(); // 屏蔽所有点击
    await this.hollowOut.rectTo(1, this.twoBtn.getPosition(), this.twoBtn.width + 10, this.twoBtn.height + 10, 5, 5);
    this.touchBlocker.setTarget(this.twoBtn); // 设置可点击节点
}

private onTwoBtnClick() {
    this.hollowOut.nodeSize(); // 将遮罩镂空设为节点大小
    this.touchBlocker.passAll(); // 放行所有点击
}

正文

整体思路

1. 镂空的具体实现思路无非就是渲染时判断每个点的位置，是否符合我们的要求，符合的设为透明或者直接放弃渲染，否则正常渲染即可。

2. 由于 Shader 在渲染时使用的是标准屏幕坐标系（左上角为原点），与我们平时在 Creator 中使用的笛卡尔坐标系（左下角为原点）和本地坐标系（中间为原点）不同，使用时需要经过坐标转换。

3. 同时 Shader 中的点的坐标使用的不是相对于坐标系的位置，而是点处于节点宽高的百分比值，比如在屏幕中间的位置为(0, 0)，在 Shader 中就为 (0.5, 0.5)，这也是需要我们自己去计算的地方。

4. 由于我接触 Shader 的时间还不是很长，很多地方都不熟悉，一路跌跌撞撞边学边写花了几个晚上才把这个 Shader 和配套组件做完，而且我觉得还有优化的空间。

代码实现

注：本 Shader 基于 Cocos Creator 2.3.3 开发

重要提醒：使用自定义 Shader 需要禁用动态合图功能，否则在运行的时候会出现渲染单色图片 Shader 失效的情况（编辑器中正常显示）！

// 禁用动态合图
cc.dynamicAtlasManager.enabled = false;

由于我对 Shader 编写还不是很熟悉，主函数中使用了很多 if else 判断，我也在尝试优化中，如果有大佬知道如何优化，还请多多指教！

// 以下为镂空 Shader 中的片段着色器部分

CCProgram fs %{
  precision highp float;

  in vec2 v_uv0;
  in vec4 v_color;

  uniform sampler2D texture;

  uniform BaseParams {
    vec2 center;
    float ratio;
  };

  uniform RectParams {
    float width;
    float height;
    float round;
    float feather;
  };

  void main () {
    vec4 color = v_color;
    color *= texture(texture, v_uv0);
    // 边缘
    float minX = center.x - (width / 2.0);
    float maxX = center.x + (width / 2.0);
    float minY = center.y - (height * ratio / 2.0);
    float maxY = center.y + (height * ratio / 2.0);
    if (v_uv0.x >= minX && v_uv0.x <= maxX && v_uv0.y >= minY && v_uv0.y <= maxY) {
      if (round == 0.0) discard; // 没有圆角则直接丢弃
      // 圆角处理
      float roundY = round * ratio;
      vec2 vertex;
      if (v_uv0.x <= minX + round) {
        if (v_uv0.y <= minY + roundY) {
          vertex = vec2(minX + round, (minY + roundY) / ratio); // 左上角
        } else if (v_uv0.y >= maxY - roundY) {
          vertex = vec2(minX + round, (maxY - roundY) / ratio); // 左下角
        } else {
          vertex = vec2(minX + round, v_uv0.y / ratio); // 左中
        }
      } else if (v_uv0.x >= maxX - round) {
        if (v_uv0.y <= minY + roundY){
          vertex = vec2(maxX - round, (minY + roundY) / ratio); // 右上角
        } else if (v_uv0.y >= maxY - roundY) {
          vertex = vec2(maxX - round, (maxY - roundY) / ratio); // 右下角
        } else {
          vertex = vec2(maxX - round, v_uv0.y / ratio); // 右中
        }
      } else if (v_uv0.y <= minY + roundY) {
        vertex = vec2(v_uv0.x, (minY + roundY) / ratio); // 上中
      } else if (v_uv0.y >= maxY - roundY) {
        vertex = vec2(v_uv0.x, (maxY - roundY) / ratio); // 下中
      } else {
        discard; // 中间
      }
      float dis = distance(vec2(v_uv0.x, v_uv0.y / ratio), vertex);
      color.a = smoothstep(round - feather, round, dis);
    } else {
      color.a = 1.0;
    }
    
    color.a *= v_color.a;
    gl_FragColor = color;
  }
}%

2. 然后是配套使用的 HollowOut 组件，开箱即用~组件中已经实现了坐标以及距离的转换，使用非常的方便快捷。组件的完整文件在 exzax-ccc/component 目录下（公众号发送“开源”获取链接）。

这个组件的代码也比较多，这里只贴出较为关键的代码，大多数的情况处理我都已经封装好了，通过下面的代码大家可以轻易得知我是如何转换参数的，所以你也可以参照实现自己需要的特效或功能~

/**
 * 渲染
 * @param keepUpdating 是否每帧自动更新
 */
private render(keepUpdating: boolean) {
    if (!this.material) this.getMaterial();
    switch (this.shape) {
        case Shape.Rect:
            this.rect(this.center, this.width, this.height, this.round, this.feather, keepUpdating);
            break;
        case Shape.Circle:
            this.circle(this.center, this.radius, this.feather, keepUpdating);
            break;
    }
}

/**
 * 矩形镂空
 * @param center 中心坐标
 * @param width 宽
 * @param height 高
 * @param round 圆角半径
 * @param feather 边缘虚化宽度
 * @param keepUpdating 是否每帧自动更新
 */
public rect(center?: cc.Vec2, width?: number, height?: number, round?: number, feather?: number, keepUpdating: boolean = false) {
    this.shape = Shape.Rect;
    if (center !== null) this.center = center;
    if (width !== null) this.width = width;
    if (height !== null) this.height = height;
    if (round !== null) {
        this.round = round >= 0 ? round : 0;
        let min = Math.min(this.width / 2, this.height / 2);
        this.round = this.round <= min ? this.round : min;
    }
    if (feather !== null) {
        this.feather = feather >= 0 ? feather : 0;
        this.feather = this.feather <= this.round ? this.feather : this.round;
    }
    this.material.setProperty('ratio', this.getRatio());
    this.material.setProperty('center', this.getCenter(this.center));
    this.material.setProperty('width', this.getWidth(this.width));
    this.material.setProperty('height', this.getHeight(this.height));
    this.material.setProperty('round', this.getRound(this.round));
    this.material.setProperty('feather', this.getFeather(this.feather));
    this.keepUpdating = keepUpdating;
}

/**
 * 圆形镂空
 * @param center 中心坐标
 * @param radius 半径
 * @param feather 边缘虚化宽度
 * @param keepUpdating 是否每帧自动更新
 */
public circle(center?: cc.Vec2, radius?: number, feather?: number, keepUpdating: boolean = false) {
    this.shape = Shape.Circle;
    if (center !== null) this.center = center;
    if (radius !== null) this.radius = radius;
    if (feather !== null) this.feather = feather >= 0 ? feather : 0;
    this.material.setProperty('ratio', this.getRatio());
    this.material.setProperty('center', this.getCenter(this.center));
    this.material.setProperty('width', this.getWidth(this.radius * 2));
    this.material.setProperty('height', this.getHeight(this.radius * 2));
    this.material.setProperty('round', this.getRound(this.radius));
    this.material.setProperty('feather', this.getFeather(this.feather));
    this.keepUpdating = keepUpdating;
}

/**
 * 缓动镂空（矩形）
 * @param time 时间
 * @param center 中心坐标
 * @param width 宽
 * @param height 高
 * @param round 圆角半径
 * @param feather 边缘虚化宽度
 */
public rectTo(time: number, center: cc.Vec2, width: number, height: number, round: number = 0, feather: number = 0): Promise<void> {
    return new Promise(res => {
        cc.Tween.stopAllByTarget(this);
        this.tweenRes && this.tweenRes();
        this.tweenRes = res;
        if (round > width / 2) round = width / 2;
        if (round > height / 2) round = height / 2;
        if (feather > round) feather = round;
        this.shape = Shape.Rect;
        cc.tween<HollowOut>(this)
            .call(() => this.keepUpdating = true)
            .to(time, {
                center: center,
                width: width,
                height: height,
                round: round,
                feather: feather
            })
            .call(() => {
                this.scheduleOnce(() => {
                    this.keepUpdating = false;
                    this.tweenRes();
                    this.tweenRes = null;
                });
            })
            .start();
    });
}

/**
 * 缓动镂空（圆形）
 * @param time 时间
 * @param center 中心坐标
 * @param radius 半径
 * @param feather 边缘虚化宽度
 */
public circleTo(time: number, center: cc.Vec2, radius: number, feather: number = 0): Promise<void> {
    return new Promise(res => {
        cc.Tween.stopAllByTarget(this);
        this.tweenRes && this.tweenRes();
        this.tweenRes = res;
        this.shape = Shape.Circle;
        
        cc.tween<HollowOut>(this)
            .call(() => this.keepUpdating = true)
            .to(time, {
                center: center,
                radius: radius,
                feather: feather
            })
            .call(() => {
                this.scheduleOnce(() => {
                    this.keepUpdating = false;
                    this.tweenRes();
                    this.tweenRes = null;
                });
            })
            .start();
    });
}

/**
 * 取消所有挖孔
 */
public reset() {
    this.rect(cc.v2(), 0, 0, 0, 0);
}

/**
 * 挖孔设为节点大小（就整个都挖没了）
 */
public nodeSize() {
    this.rect(this.node.getPosition(), this.node.width, this.node.height, 0, 0);
}

/**
 * 获取中心点
 * @param center 
 */
private getCenter(center: cc.Vec2) {
    let x = (center.x + (this.node.width / 2)) / this.node.width;
    let y = (-center.y + (this.node.height / 2)) / this.node.height;
    return cc.v2(x, y);
}

/**
 * 获取节点宽高比
 */
private getRatio() {
    return this.node.width / this.node.height;
}

/**
 * 获取挖孔宽度
 * @param width 
 */
private getWidth(width: number) {
    return width / this.node.width;
}

/**
 * 获取挖孔高度
 * @param height 
 */
private getHeight(height: number) {
    return height / this.node.width;
}

/**
 * 获取圆角半径
 * @param round 
 */
private getRound(round: number) {
    return round / this.node.width;
}

/**
 * 获取边缘虚化宽度
 * @param feather 
 */
private getFeather(feather: number) {
    return feather / this.node.width;
}

3. 另外我还提供了矩形和圆形的独立版本 Shader ，独立版本需要自行设置 Material 才能使用，同时不适用于 HollowOut 组件，当然可以自行实现。原文件在同级目录下，需要的话也是可以点击文章底部阅读原文找到~