分享一个UI边框流光效果

大佬 2.x 能不能用

没用过2.x哈, 东西应该差挺多的 ,需要你自己去研究一下 , 实现的原理就是上面那几步

好的,之后试试

要在 2.x 上用,要改一下。

大佬,有详细一点的吗 借鉴

1赞

感谢 感谢

2.x伸手党自取HelloWorldUIFrameLight.zip (310.6 KB)
如果要单条流光效果,看源码

// 想要单条流光使用这行代码
// float dirColor = smoothstep(0.,1.,dot( uvFromCenter,dir));

感谢楼主分享

2赞

QQ20220726-115553-HD

这个报错是啥意思啊???
[Asset DB] …/src/kuang-ui.effect - kuang-vs:vert: Error EFX2001: can not resolve ‘common’

[Asset DB] …/src/kuang-ui.effect - kuang-vs:vert: Error EFX2001: can not resolve ‘common’

at EffectImporter.import (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\modules\engine-extensions\extensions\engine-extends\dist\importer\importers\effect.ccc:1:2309)

at C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules@editor\asset-db\libs\task.ccc:1:2765

at new Promise ()

at ImportTask.importAsset (C:\ProgramData\cocos\editors\Creator\3.6.3\resources\app.asar\node_modules@editor\asset-db\libs\task.ccc:1:2648)

at runMicrotasks ()

at runNextTicks (internal/process/task_queues.js:58:5)

[Scene] download failed: import://31/31357e70-a9ea-4ce3-8788-7bdf44ac4a69.json?_t=1723117790383, status: 0(error)

把effect 文件里的 #if SAMPLE_FROM_RT 都删了把

膜拜大佬·~~

20240809_145357

增加了一个新的流光效果

来自https://forum.cocos.org/t/shader-flowlight/96282

从2.x修改到3.8 ,

1赞

kuang-ui-new.zip (1.5 KB)

mark一下

不错,喜欢这个

结合这个 帖子 creator shader:从零开始,用shader画个彩虹 画彩虹的代码, 简单改造了一下头像框,让其流光变彩色:
headframecolor

effect代码, 就是改了USE_COLORFUL部分代码:
// Copyright © 2017-2020 Xiamen Yaji Software Co., Ltd.

CCEffect %{

  techniques:

  - passes:

    - vert: kuang-vs:vert

      frag: kuang-fs:frag

      depthStencilState:

        depthTest: false

        depthWrite: false

      blendState:

        targets:

        - blend: true

          blendSrc: src_alpha

          blendDst: one_minus_src_alpha

          blendDstAlpha: one_minus_src_alpha

      rasterizerState:

        cullMode: none

      properties:

        kuangColorStrength  : { value : 3.0}   #//流光叠加颜色的强度  

         

}%

CCProgram kuang-vs %{

  precision highp float;

  #include <builtin/uniforms/cc-global>

  #if USE_LOCAL

    #include <builtin/uniforms/cc-local>

  #endif  

  #if SAMPLE_FROM_RT

    #include <common/common-define>

  #endif

  in vec3 a_position;

  in vec2 a_texCoord;

  in vec4 a_color;

  out vec4 v_color;

  out vec2 uv0;

  vec4 vert () {

    vec4 pos = vec4(a_position, 1);

    #if USE_LOCAL

      pos = cc_matWorld * pos;

    #endif

    #if USE_PIXEL_ALIGNMENT

      pos = cc_matView * pos;

      pos.xyz = floor(pos.xyz);

      pos = cc_matProj * pos;

    #else

      pos = cc_matViewProj * pos;

    #endif

    uv0 = a_texCoord;

    #if SAMPLE_FROM_RT

      CC_HANDLE_RT_SAMPLE_FLIP(uv0);

    #endif

    v_color = a_color;

    return pos;

  }

}%

CCProgram kuang-fs %{

     precision highp float;

     #include <builtin/internal/sprite-texture>

     #include <builtin/uniforms/cc-global>

     in vec4 v_color;

     uniform ARGS{

         vec4  kuangcolor;

         float time;

         float kuangColorStrength;

     };

     in vec2 uv0;

     vec4 frag () {

        vec4 color  = texture(cc_spriteTexture, uv0);      //采样精灵颜色  

        vec2 dir =  normalize(vec2(1.,1.)-vec2(0.5,0.5));   //定义一个从uv中心点出发的向量   ,成为向量kuang

        float angle =fract(cc_time.x*0.2)*6.28;     //  用cc_time ,来表现增加的弧度值

        dir = vec2(dir.x*cos(angle)-dir.y*sin(angle),dir.x*sin(angle)+dir.y*cos(angle)) ;   // 把上面的向量进行旋转 , 公式可参考向量旋转

        vec2 uvFromCenter =  uv0-vec2(0.5,0.5);                // 使用uv0 来定义图上每一个uv点 和中心点所组成的向量  ,称为向量org

        float dirColor = abs(dot( uvFromCenter,dir)); //点乘org和kuang向量 , 向量点乘含义大家应该都懂吧,  然后用abs把负值的也掰为正的,实现有两条相对的流光

        dirColor*=color.a;      //  乘一下kuang的透明通道, 把不是kuang上的颜色剔除掉  

        dirColor= pow(dirColor,2.);    //pow一下不然流光范围太大  

  #if USE_COLORFUL

        vec4 rcolor = vec4(

        sin(4.*(atan(uvFromCenter.x, uvFromCenter.y) + angle) +0.85)*2.-0.5,

        sin(5.*(atan(uvFromCenter.x, uvFromCenter.y) + angle) -1.),

        sin(3.*(atan(uvFromCenter.x, uvFromCenter.y) + angle) -1.5) *1.5,

        1

        );

        vec4 finalkuangColor= v_color*rcolor*dirColor;     // 流光颜色叠加我们的主颜色

  #else

        vec4 finalkuangColor= v_color*dirColor;     // 流光颜色叠加我们的主颜色

  #endif

  

        color += color*finalkuangColor*kuangColorStrength;     // 对流光颜色进行增亮, 不然太暗  

   

        return color;

     }  

 }%
2赞

mark!!! 学习

mask!!