CocosCreator追光效果+多相机RenderTexture应用

最新推荐文章于 2023-04-10 18:04:00 发布

泉小墨

最新推荐文章于 2023-04-10 18:04:00 发布

阅读量3.3k

点赞数

文章标签：图形渲染 cocos2d

本文链接：https://blog.csdn.net/qq_20026817/article/details/124103728

版权

效果预览

前面的话

参考了《异名》大佬的追光效果，但是他那个只能应用于一张图，但实际游戏开发肯定不止一张图，所以在他的基础上进行了改进，可以做多图的效果，并且可以定义不处理的分组(UI)。

核心思路

根据效果我们需要实现：

光圈的形状和大小可控
光圈的边缘虚化
光圈可操控移动
渲染相机渲染结果输出RenderTexture
主相机渲染最终结果

实现过程

首先我们放一张跟场景一样大的背景图，假设坐标在中心点，那它的uv坐标就是(0.5, 0.5),我们只需要让圆心到边缘的距离大于指定阈值的像素丢弃(discard)或者透明度为0，是不是就能得到一个圆？

      properties:
        radius: {value: 0.1}
        center: { value: [0.5,0.5]}
        
fs
void main() {
  color.a = step(length(v_uv0 - center), radius);
}

length是取模，step是内置函数：step(a, x) = x >= a? 1 : 0;让alpha非0即1.

上面的代码得出的效果只是一个椭圆，因为uv都是从0到1的，如果应用于正方形的图，那就是一个正圆，但长方形的话，因为横纵比不一样，所以这个图片的横纵比我们可以通过参数传进来：

      wh_ratio: { value: 1}
      blur: { value: 0.1}
      
void main() {
    float circle = radius * radius;
    float rx = center.x * wh_ratio;
    float ry = center.y;
    
    float dis = (v_uv0.x * wh_ratio - rx) * (v_uv0.x * wh_ratio - rx) + (v_uv0.y - ry) * (v_uv0.y - ry);
    o.a = smoothstep(circle, circle - blur, dis);
}

this.renderSpr.getMaterial(0).setProperty("wh_ratio", cc.winSize.width / cc.winSize.height)

shader新增了wh_ratio横纵比、blur虚化区域，smoothstep相对step来说除了非0即1外，额外多了一个从0到1过渡的变化.

ts代码中将背景图的横纵比传进去，因为我地图是铺满全屏的，所以直接用cc.winSize了，这样得到的效果如下：

最后再将光圈可操作移动加进去：其实就是将位置center实时传进去

    toucheEvent(evt: cc.Event.EventTouch) {
        let pos = evt.getLocation();
        this.bg.getMaterial(0).setProperty('center', [pos.x / cc.winSize.width, (cc.winSize.height - pos.y) / cc.winSize.height]);
    }

到这里算是算是把核心逻辑实现了，但是如果你想再挂其他图片进去就会发现其他图片不起作用，这个时候我们就需要用RenderTexture来处理了。

我们新增一张空白图renderSpr，将其尺寸设置成场景一样大，并增加Widget组件使其跟随场景缩放。新增分组render并将renderSpr的分组设置成render,新增RenderCamera，使其只捕获default，而MainCamera只渲染render,底图的材质还原成默认精灵的材质，ts中对底图的操作改成对renderSpr的操作

在ts代码里，我们需要新建一个RenderTexture去获取RenderCamera，并将RenderTexture的纹理实时赋给renderSpr，代码如下

    start () {
        this.texture1 = new cc.RenderTexture();
        this.texture1.initWithSize(cc.winSize.width, cc.winSize.height);
        this.renderCamera.targetTexture = this.texture1;
    }
    
    update (dt) {
        let spriteFrame = new cc.SpriteFrame();
        spriteFrame.setTexture(this.texture1);
        this.renderSpr.spriteFrame = spriteFrame;
    }

不出意外，你能得到这样的一个效果：

图被翻转了，有2种方案解决这个问题：

renderSpr的scaleY改成-1
在顶点中v_uv0 = vec2(a_uv0.x, a_uv0.y);改成v_uv0 = vec2(a_uv0.x, 1.0 - a_uv0.y);

随后在toucheEvent中(cc.winSize.height - pos.y)改成pos.y，使触摸归正。

最后增加动态调整范围和过渡区域的滑动条，其代码如下：

    onSliderSize(slider:cc.Slider) {
        this.renderSpr.getMaterial(0).setProperty("radius", slider.progress)
    }

    onSliderBlur(slider:cc.Slider) {
        this.renderSpr.getMaterial(0).setProperty("blur", slider.progress * 0.2)
    }