CocosCreator实现划过的位置显示纹理

系统管理员 2023-02-10 01:27 2阅读 0赞

## 1、项目需求 ##

项目需要有一个功能：是当一个光点走过的路径，这个路径的位置就都亮起来的功能。

## 2、资料内容 ##

功能类似这位大神的橡皮擦功能：[https://forum.cocos.org/t/2-0-8/74246][https_forum.cocos.org_t_2-0-8_74246]

![format_png][]

但是，项目的需求还要经过的路径周围有模糊的外边——也就是从中心到边缘越来越暗。

所以对于借鉴了网上大神的shader例子，类似以下的示例：

![20200519175043842.gif][]

在大神的肩膀上做了一些改动，来实现项目的需求。

## 3、项目示例 ##

以下是我自己的测试项目的示例：

![202005191759286.gif][]

（请忽略这渣渣的画质，懒得装录屏软件了）

## 4、项目代码 ##

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70][] ##

SliderPointLight.ts

const { ccclass, property } = cc._decorator;
    
    @ccclass
    export default class Follow_spot extends cc.Component {
      @property(cc.Node)
      bg: cc.Node = null;
      material: cc.Material = null;
      center: number[] = [0.5, 0.5];
      testArr: number[] = [];
    
      onLoad() {
        this.material = this.bg.getComponent(cc.Sprite).getMaterial(0);
        this.material.setProperty('wh_ratio', this.bg.width / this.bg.height);
        this.material.setProperty('center', this.center);
    
        //js 中最重要是这一句,这里参数是数组长度*数组里向量的维度
        this.material.setProperty('colorArr', new Float32Array(400));
        //这里设置的时候需要把数组里向量的分量展开到一个一维数组
        this.material.setProperty('colorArr', []);
    
        this.bg.on(cc.Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);
      }
    
      touchMoveEvent(evt: cc.Event.EventTouch) {
        this.center[0] = evt.getLocation().x / this.bg.width;
        this.center[1] = 1 - evt.getLocation().y / this.bg.height;
        console.log(this.center);
        this.material.setProperty('center', this.center);
        if (this.testArr.length >= 400) {
          this.testArr.shift();
          this.testArr.shift();
        }
        this.testArr.push(this.center[0]);
        this.testArr.push(this.center[1]);
    
    
        //js 中最重要是这一句,这里参数是数组长度*数组里向量的维度
        this.material.setProperty('colorArr', new Float32Array(this.testArr));
        //这里设置的时候需要把数组里向量的分量展开到一个一维数组
        this.material.setProperty('colorArr', this.testArr);
      }
    }

SliderPointLight.effect

CCEffect %{
      techniques:
      - passes:
        - vert: vs
          frag: fs
          blendState:
            targets:
            - blend: true
          rasterizerState:
            cullMode: none
          properties:
            texture: { value: white }
            wh_ratio: {
              value: 1.78,
              editor: {
                tooltip: "宽高比"
              }
            }
            blur: {
              value: 0.35,
              editor: {
                tooltip: "光圈模糊程度"
              }
            }
            radius: {
              value: 0.5,
              editor: {
                tooltip: "光圈半径"
              }
            }
            center: {
              value: [0.5, 0.5],
              editor: {
                tooltip: "光圈起点"
              }
            }
            colorArr: {value: [0.5,0.5,0.5,0.5]}
    }%
    
    
    CCProgram vs %{
      precision highp float;
    
      #include <cc-global>
      #include <cc-local>
    
      in vec3 a_position;
      in vec4 a_color;
      out vec4 v_color;
    
      #if USE_TEXTURE
      in vec2 a_uv0;
      out vec2 v_uv0;
      #endif
    
      void main () {
        vec4 pos = vec4(a_position, 1);
    
        #if CC_USE_MODEL
        pos = cc_matViewProj * cc_matWorld * pos;
        #else
        pos = cc_matViewProj * pos;
        #endif
    
        #if USE_TEXTURE
        v_uv0 = a_uv0;
        #endif
    
        v_color = a_color;
    
        gl_Position = pos;
      }
    }%
    
    CCProgram fs %{
    
      precision highp float;
    
      #include <alpha-test>
    
      in vec4 v_color;
    
      #if USE_TEXTURE
      in vec2 v_uv0;
      uniform sampler2D texture;
      #endif
    
      uniform ARGS{
        float radius;
        float blur;
        vec2 center;
        float wh_ratio;
      };
    
      //effect定义
       uniform Metaball {
           vec4 colorArr[100];
       };
    
      void main () {
        vec4 o = vec4(1, 1, 1, 0);
        o *= texture(texture, v_uv0);
        o *= v_color;
        float circle = radius * radius;
        for(int i = 0; i < 100; i++) {
          float colorX = colorArr[i].x;
          float colorY = colorArr[i].y;
          float rx = colorX * wh_ratio;
          float ry = colorY;
          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)+o.a;
        }
    
        gl_FragColor = o;
      }
    }%

[https_forum.cocos.org_t_2-0-8_74246]: https://forum.cocos.org/t/2-0-8/74246
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9mb3J1bS5jb2Nvcy5vcmcvdXBsb2Fkcy9kZWZhdWx0L29yaWdpbmFsLzNYLzEvZC8xZDcwOTU5MzczMTljNDQzMDBmZGZmNDJjOWIwZDQ0ZjEwY2MyYTNiLnBuZw?x-oss-process=image/format,png
[20200519175043842.gif]: https://img-blog.csdnimg.cn/20200519175043842.gif
[202005191759286.gif]: https://img-blog.csdnimg.cn/202005191759286.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519175306736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU=,size_16,color_FFFFFF,t_70