专栏首页白玉无冰一个全能的挖孔 Shader

一个全能的挖孔 Shader

本文由“壹伴编辑器”提供技术支持

效果展示

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

是矩形还是圆形呢

圆形

大小位置变化丝毫不影响

多姿多彩

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

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

eazax-ccc 是我目前维护的一个开源游戏开发脚手架,包含各种实用的组件,目前也在不断更新中,有需要的童鞋在公众号发送“开源”即可获取链接,不要忘记 Star 哦~

让你点啥就点啥

☆ 实现上面的新手引导需要的核心代码还不到 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 和配套组件做完,而且我觉得还有优化的空间。

5. 以后我也会持续学习并深入理解 Shader 的编写,自己学习的同时也不忘记把知识分享给大家。后面我会写一系列入门文章,给同样想要学习 Shader 的童鞋参考,感兴趣的童鞋可以关注下哦~

代码实现

注:本 Shader 基于 Cocos Creator 2.3.3 开发

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

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

1. 由于完整 Shader 代码过于冗长,这里只贴出来比较关键的片段着色器部分,至于完整的代码以及文件可以点击文章底部的阅读原文查看并下载

另外由于我对 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 组件,当然可以自行实现。原文件在同级目录下,需要的话也是可以点击文章底部阅读原文找到~

独立版本

使用方法

1. 在带有 Sprite 组件的节点上添加 HollowOut 组件。

2. 将镂空 Shader 文件 eazax-hollowout.effect 拖到 HollowOut 组件的 Effect 属性上即可。

3. 在编辑器上调整需要的属性,或者使用代码获取 HollowOut 组件来设置属性。

How to use?

结束语

以上皆为陈皮皮的个人观点,小生不才,文采不足,如果写得不好还请各位多多包涵。如果有哪些地方说的不对,还请各位指出,希望与大家共同进步。

本文分享自微信公众号 - 白玉无冰(lamyoung-com)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 盯着双11开喵铺里的小人许久,我也写了一个!cocos creator !

    ◇ 打开支付宝,天猫双11合伙人全面开喵铺的活动映入眼帘。点击进去后,我竟然盯着小人走路许久,琢磨着,自己也写个玩玩吧!

    白玉无冰
  • 竟然可以用 effect 玩水?Cocos Creator 3D !

    最近逛论坛时,看到一位大佬在分享各种 shader 特效。基于其中的水波 shader ,白玉无冰写了一个玩水效果!文章底部获取完整代码!还可以试试水哦!

    白玉无冰
  • 拇指射箭 ! Cocos Creator 3D !

    长按屏幕,拖动瞄准,放手发射。风向、重力和距离影响最终结果!越靠近中心得分越高!最高分10分!

    白玉无冰
  • [Cocos Creator] 一个全能的挖孔 Shader

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

    陈皮皮
  • angular 模态框 模拟windows 拖动改变大小 指令

    treeNewBe
  • React如何处理事件

    以上示例在点击链接时,会报错:Uncaught TypeError: Cannot read property 'setState' of undefined。...

    用户1272076
  • Flutter第4天--基础控件(下)+Flex布局详解

    张风捷特烈
  • node.js + postgres 从注入到Getshell

    (最近你们可能会看到我发很多陈年漏洞的分析,其实这些漏洞刚出来我就想写,不过是没时间,拖延拖延,但该做的事迟早要做的,共勉)

    phith0n
  • Flutter组件学习(三)—— 输入框TextFiled

    Google 前两天发布了 Flutter 1.0 正式版本,正式版发布之后,LZ身边越来越多的人都开始入坑了,不得不说 Flutter 框架的魅力还是很吸引人...

    用户2802329

扫码关注云+社区

领取腾讯云代金券