1.参考了这位老兄的教程:
https://www.jianshu.com/p/711a54ff2fa0

effect代码
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
CCEffect %{
techniques:
- passes:
- vert: vs
frag: fs
blendState:
targets:
- blend: true
rasterizerState:
cullMode: none
properties:
texture: { value: white }
alphaThreshold: { value: 0.5 }
old_level: {
value: 1.0,
inspector: {
tooltip: "老化程度",
range:[0.0,1.0]
}
}
}%
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
#if USE_OLD_PHOTO
uniform old_photo{
float old_level;
};
vec4 get_old_photo_color(vec4 color){
float r = 0.393 * color.r + 0.769 * color.g + 0.189 * color.b;
float g = 0.349 * color.r + 0.686 * color.g + 0.168 * color.b;
float b = 0.272 * color.r + 0.534 * color.g + 0.131 * color.b;
return vec4(r,g,b,color.a); //第四个参数为透明度rgba;
}
#endif
void main () {
vec4 o = vec4(1, 1, 1, 1);
#if USE_TEXTURE
o *= texture(texture, v_uv0);
#if CC_USE_ALPHA_ATLAS_TEXTURE
o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
#endif
#endif
o *= v_color;
ALPHA_TEST(o);
#if USE_OLD_PHOTO
vec4 src_color =o;
vec4 old_color = get_old_photo_color(src_color);
o = src_color + (old_color -src_color) * old_level;
#endif
gl_FragColor = o;
}
}%
ts的代码:
// Learn TypeScript:
// - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
// - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
// - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html
const {ccclass, property} = cc._decorator;
@ccclass
export default class NewClass extends cc.Component {
@property(cc.Slider)
old_slider: cc.Slider = null;
@property(cc.Node)
image:cc.Node = null;
material:cc.Material = null;
// LIFE-CYCLE CALLBACKS:
// onLoad () {}
start () {
this.old_slider.node.on("slide",this.slider_change,this);
this.image.getComponents(cc.RenderComponent).forEach(renderComponent => {
this.material = renderComponent.getMaterial(0);
});
}
slider_change(){
console.log("change:",this.old_slider.progress);
this.material.setProperty("old_level", this.old_slider.progress);
}
// update (dt) {}
}
网友评论