帮我写一个cocos creator2.4.3版本能使用的shader效果,shader会被挂在skeleton组件上。目的是当人物在战斗中受击的时候呈现一个颜色变化。要求:受击时,能通过某种方式传递颜色,总时间持续10帧(设定每秒30帧),0-3帧时,颜色数值0-255过渡,4-10帧时,颜色数值255-0过渡
时间: 2024-02-05 10:13:24 浏览: 18
以下是一个简单的shader效果示例:
```
CCEffect %{
techniques:
- name: hit-effect
passes:
- vert: shader.vert
frag: shader.frag
blendState:
targets:
- blend: true
blendSrc: src_alpha
blendDst: one_minus_src_alpha
properties:
hitColor: { value: [1.0, 0.0, 0.0, 1.0], type: color }
}%
CCProgram hit-effect {
CCVertexShader shader.vert %{
precision highp float;
attribute vec2 a_position;
attribute vec2 a_uv0;
varying vec2 uv0;
void main () {
gl_Position = vec4(a_position, 0, 1);
uv0 = a_uv0;
}
%}
CCFragmentShader shader.frag %{
precision highp float;
varying vec2 uv0;
uniform sampler2D texture;
uniform vec4 hitColor;
uniform float time;
void main () {
vec4 color = texture2D(texture, uv0);
if (time >= 0.0 && time <= 3.0) {
color = mix(color, hitColor, time / 3.0);
} else if (time >= 4.0 && time <= 10.0) {
color = mix(hitColor, color, (time - 4.0) / 6.0);
}
gl_FragColor = color;
}
%}
}
```
将以上代码保存为一个 `.effect` 文件,然后在 `skeleton` 组件上添加一个 `Mesh Renderer` 组件,并将创建的 `.effect` 文件拖放到 `Material` 属性上。在代码中,可以通过设置 `time` 属性的值来控制受击时的颜色变化。例如:
```
let renderer = this.node.getComponent(sp.Skeleton).getComponentInChildren(cc.MeshRenderer);
let material = renderer.getMaterial(0);
material.setProperty('time', 0);
material.setProperty('hitColor', cc.color(255, 0, 0, 255));
// 受击动作
for (let i = 0; i < 10; i++) {
material.setProperty('time', i);
}
```