游戏引擎 —— cocos creator 3.52
此动效给动态修改尺寸的图片增加一层刷光的效果,直接贴代码
CCEffect %{
techniques:
- passes:
- vert: sprite-vs:vert
frag: sprite-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:
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: "光束倾斜角度",
range: [0.0, 360],
}
}
# 光束宽度
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:启用"
}
}
# 横向自动扫光速度
crossSpeed: {
value: 0.0,
editor: {
tooltip: "横向自动扫光速度。0:不自动,非0:自动扫光的速度"
}
}
# 纵向自动扫光速度
verticalSpeed: {
value: 0.0,
editor: {
tooltip: "纵向自动扫光速度:不自动,非0:自动扫光的速度"
}
}
}%
CCProgram sprite-vs %{
precision highp float;
#include
#include
勾选ENABLE LIGHT开关,可以设置刷光的颜色、位置、角度、刷光的宽度等等属性,根据实际需求选择;
增加横向和纵向自动扫光速度,为0时不会自动,大于0时会根据设置的值播放动画,代码中也可以动态修改该参数
//先获取到材质,如果是编辑器绑好的只需要获取cc.Sprite组件下的customMaterial就能获取到
this.sprArrowMat = this.sprArrow.getComponent(cc.Sprite).customMaterial;
//在计时器里面动态修改Center Point
update(dt){
if (this.sprArrowMat ) {
if (this.sprArrowChgValue <= -0.1) {
this.sprArrowChgValue = 1;
}
else {
this.sprArrowChgValue -= dt / 2;
}
//动态设置刷光的位置
this.sprArrowMat.setProperty("lightCenterPoint", cc.v2(0, this.sprArrowChgValue));
//动态设置颜色,渐变效果
this.sprArrowMat.setProperty("lightColor", cc.color(255, 200 - 120 * this.sprArrowChgValue ,0));
}
}