简介

功能：图片实现扫光效果
引擎：cocos Creator 3.7.2
开发语言：ts

完整版链接

链接https://lengmo714.top/284d90f4.html

效果图

shader代码

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.
CCEffect %{techniques:- passes:- vert: sprite-vs:vertfrag: sprite-fs:fragdepthStencilState:depthTest: falsedepthWrite: falseblendState:targets:- blend: trueblendSrc: src_alphablendDst: one_minus_src_alphablendDstAlpha: one_minus_src_alpharasterizerState:cullMode: noneproperties:alphaThreshold: { value: 0.5 }# 自定义lightColor: { value: [1.0, 1.0, 0.0, 1.0], editor: {type: color,tooltip: "光束颜色" }}lightCenterPoint: { value: [0.2, 0.2], editor: { tooltip: "光束中心点坐标" }}lightAngle: { value: 36.0, editor: { tooltip: "光束倾斜角度" }}lightWidth: { value: 0.2, editor: { tooltip: "光束宽度" }}enableGradient: { value: 1.0, editor: { tooltip: "是否启用光束渐变。0：不启用，非0：启用" }}cropAlpha: { value: 1.0, editor: { tooltip: "是否裁剪透明区域上的光。0：不启用，非0：启用" }}enableFog: { value: 0.0, editor: { tooltip: "是否启用迷雾效果。0：不启用，非0：启用" }}
}%CCProgram sprite-vs %{precision highp float;#include <builtin/uniforms/cc-global>#if USE_LOCAL#include <builtin/uniforms/cc-local>#endifin vec3 a_position;in vec2 a_texCoord;in vec4 a_color;out vec4 color;out vec2 uv0;vec4 vert () {vec4 pos = vec4(a_position, 1);#if USE_PIXEL_ALIGNMENTpos = cc_matView * pos;pos.xyz = floor(pos.xyz);pos = cc_matProj * pos;#elsepos = cc_matViewProj * pos;#endifuv0 = a_texCoord;color = a_color;return pos;}
}%CCProgram sprite-fs %{precision highp float;#include <builtin/internal/embedded-alpha>#include <builtin/internal/alpha-test>in vec4 color;#if USE_TEXTUREin vec2 uv0;#pragma builtin(local)layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture;#endif#if ENABLE_LIGHTuniform Light {// 光束颜色vec4 lightColor;// 光束中心点坐标vec2 lightCenterPoint;// 光束倾斜角度float lightAngle;// 光束宽度float lightWidth;// 启用光束渐变// ps：编辑器还不支持 bool 类型的样子，因此用float来定义float enableGradient;// 裁剪掉透明区域上的光// ps：编辑器还不支持 bool 类型的样子，因此用float来定义float cropAlpha;   // 是否启用迷雾效果// ps：编辑器还不支持 bool 类型的样子，因此用float来定义float enableFog;};/*** 添加光束颜色