大佬 2.x 能不能用
没用过2.x哈, 东西应该差挺多的 ,需要你自己去研究一下 , 实现的原理就是上面那几步
好的,之后试试
要在 2.x 上用,要改一下。
大佬,有详细一点的吗 借鉴
感谢 感谢
2.x伸手党自取HelloWorldUIFrameLight.zip (310.6 KB)
如果要单条流光效果,看源码
// 想要单条流光使用这行代码
// float dirColor = smoothstep(0.,1.,dot( uvFromCenter,dir));
感谢楼主分享
这个报错是啥意思啊???
[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 都删了把
膜拜大佬·~~
mark一下
不错,喜欢这个
结合这个 帖子 creator shader:从零开始,用shader画个彩虹 画彩虹的代码, 简单改造了一下头像框,让其流光变彩色:
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;
}
}%
mark!!! 学习
mask!!