给sprite上增加刷光动效

游戏引擎 —— cocos creator 3.52

此动效给动态修改尺寸的图片增加一层刷光的效果,直接贴代码

CCEffect %{techniques:- passes:- vert: sprite-vs:vertfrag: sprite-fs:fragdepthStencilState:depthTest: falsedepthWrite: falseblendState:targets:- blend: trueblendSrc: src_alphablendDst: one_minus_src_alphablendDstAlpha: one_minus_src_alpharasterizerState:cullMode: noneproperties: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 <cc-global>#include <output>#if USE_LOCAL#include <cc-local>#endifin vec3 a_position;in vec2 a_texCoord;in vec4 a_color;out vec4 v_color;out vec2 v_uv0;#if USE_TEXTUREin vec2 a_uv0;#endifvec4 vert () {vec4 pos = vec4(a_position, 1);#if USE_LOCALpos = cc_matWorld * pos;#endif#if USE_PIXEL_ALIGNMENTpos = cc_matView * pos;pos.xyz = floor(pos.xyz);pos = cc_matProj * pos;#elsepos = cc_matViewProj * pos;#endif#if USE_TEXTUREv_uv0 = a_uv0;#endifv_color = a_color;v_uv0 = a_texCoord;return pos;}
}%CCProgram sprite-fs %{precision highp float;#include <embedded-alpha>#include <alpha-test>#include <cc-global>in vec4 v_color;#if USE_TEXTUREin vec2 v_uv0;#pragma builtin(local)layout(set = 2, binding = 11) uniform sampler2D cc_spriteTexture;#endif#if ENABLE_LIGHTuniform PROPERTIES {// 光束颜色vec4 lightColor;// 光束中心点坐标vec2 lightCenterPoint;// 光束倾斜角度float lightAngle;// 光束宽度float lightWidth;// 启用光束渐变// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float enableGradient;// 裁剪掉透明区域上的光// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float cropAlpha;   // 是否启用迷雾效果// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float enableFog;// 横向自动扫光速度// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float crossSpeed;// 纵向自动扫光速度// ps:编辑器还不支持 bool 类型的样子,因此用float来定义float verticalSpeed;};/*** 添加光束颜色*/vec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {if(crossSpeed > 0.0){float time = cc_time.x * crossSpeed;lightCenterPoint.x = time - floor(time / (1.0 + lightWidth)) * (1.0 + lightWidth);}if(verticalSpeed > 0.0){float time = cc_time.x * verticalSpeed;lightCenterPoint.y = time - floor(time / (1.0 + lightWidth)) * (1.0 + lightWidth);}// 边界值处理,没有宽度就返回原始颜色if (lightWidth <= 0.0) {return textureColor;}// 计算当前 uv 到 光束 的距离float angleInRadians = radians(lightAngle);// 角度0与非0不同处理float dis = 0.0;if (mod(lightAngle, 180.0) != 0.0) {// 计算光束中心线下方与X轴交点的X坐标// 1.0 - lightCenterPoint.y 是将转换为OpenGL坐标系,下文的 1.0 - y 类似float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));// 以当前点画一条平行于X轴的线,假设此线和光束中心线相交的点为D点// 那么// D.y = uv0.y// D.x = lightOffsetX + D.y / tan(angle)float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);// D 到当前 uv0 的距离就是// dis = |uv0.x - D.x|float offsetDis = abs(v_uv0.x - dx);// 当前点到光束中心线的的垂直距离就好算了dis = sin(angleInRadians) * offsetDis;} else {dis = abs(v_uv0.y - lightCenterPoint.y);}float a = 1.0 ;// 裁剪掉透明区域上的点光if (bool(cropAlpha)) {a *= step(0.5, textureColor.a);}// 裁剪掉光束范围外的uv(迷雾效果)if (!bool(enableFog)) {a *= step(dis, lightWidth * 0.5);}// 加入从中心往外渐变的效果if (bool(enableGradient)) {a *= 1.0 - dis / (lightWidth * 0.5);a*=lightColor.a;}// 计算出扩散范围内,不同 uv 对应的实际扩散颜色值vec4 finalLightColor = lightColor * a;// 混合颜色:在原始图像颜色上叠加扩散颜色return textureColor * textureColor.a + finalLightColor;}#endifvec4 frag () {vec4 o = vec4(1, 1, 1, 1);#if USE_TEXTUREo *= CCSampleWithAlphaSeparated(cc_spriteTexture, v_uv0);#if CC_USE_ALPHA_ATLAS_TEXTUREo.a *= CCSampleWithAlphaSeparated(cc_spriteTexture, v_uv0 + vec2(0, 0.5)).r;#endif#endifo *= v_color;ALPHA_TEST(o);#if ENABLE_LIGHTo = addLightColor(o, lightColor, lightCenterPoint, lightAngle, lightWidth);#endifreturn o;}
}%

编辑器:

勾选ENABLE LIGHT开关,可以设置刷光的颜色、位置、角度、刷光的宽度等等属性,根据实际需求选择;

增加横向和纵向自动扫光速度,为0时不会自动,大于0时会根据设置的值播放动画,代码中也可以动态修改该参数

代码播放:

//先获取到材质,如果是编辑器绑好的只需要获取cc.Sprite组件下的customMaterial就能获取到this.sprArrowMat = this.sprArrow.getComponent(cc.Sprite).customMaterial;//在计时器里面动态修改Center Pointupdate(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));}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/165621.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Charles 网络抓包工具详解与实战指南

文章目录 导读软件版本Charles基本原理核心功能下载及安装界面介绍网络包展示 常用场景介绍PC 端网络抓包移动端网络抓包PC 端配置手机端配置 开启 SSL 代理PC 端和移动端 CA 证书安装Charles 直接安装Charles 下载 CA 文件手动安装 常用操作请求重发请求改写、动态改写断点&am…

Qt+SQLITE数据库设计的会员卡管理系统

一、前言 本项目演示在QT中使用SQLITE数据库存储数据管理的过程。当前以会员卡管理系统为例,写了一个界面,完成会员卡的注册,添加,充值,查询,注销,导出顾客信息EXECL表格 等功能的实现。 演示 SQLITE数据库的建表、增、删、改、查等语句功能实现。 SQLite是一款轻型的…

计算机网络——物理层相关习题(计算机专业考研全国统考历年真题)

目录 2012-34 原题 答案 解析 2018-34 原题 答案 解析 2009/2011-34 原题 答案 解析 2016-34 原题 答案 解析 2014-35/2017-34 原题 答案 解析 2013-34 原题 答案 解析 2015-34 原题 答案 解析 物理层的协议众多&#xff0c;这是因为物理层…

为啥 有了锤子,看啥都是钉子?

坏处&#xff1a;有了锤子&#xff0c;看啥都是钉子&#xff0c;有何坏处&#xff1f; 事倍功半&#xff0c;甚至适得其反。比如具有高并发设计经验的人&#xff0c;在初创系统初期&#xff0c;就设计高并发架构&#xff0c;其复杂度大概率无法支持试点业务快速落地&#xff0…

【DevOps】Git 图文详解(九):工作中的 Git 实践

本系列包含&#xff1a; Git 图文详解&#xff08;一&#xff09;&#xff1a;简介及基础概念Git 图文详解&#xff08;二&#xff09;&#xff1a;Git 安装及配置Git 图文详解&#xff08;三&#xff09;&#xff1a;常用的 Git GUIGit 图文详解&#xff08;四&#xff09;&a…

【SpringMVC】 三层架构

一.lombok工具包 中央仓库查找这个工具包:https://mvnrepository.com/ 给类添加Data注解就可以获取gettter和setter方法 , 这样我们就不必写getter 和 setter 方法. 也可以给成员属性添加单独的getter 和 setter , 针对某个成员属性单独添加setter或setter方法. 二.如果使用spr…

ORACLE手动建库

1.确定oracle的实例名,以及数据库名 实例名称: ORACLE_SIDtest 数据库名称: test 2.手工创建如下目录&#xff1a; /oracle/admin/test/adump --对应的是spfile里参数audit_file_dest …

一起学docker系列之七docker容器卷技术

目录 1 为什么使用容器数据卷&#xff1f;2 数据卷的特点和优势3 使用数据卷的方法3.1 创建容器并挂载数据卷3.2 容器间数据卷的共享与继承 4 数据卷的权限设置5 注意事项5.1 解决权限问题5.2 路径自动创建 结语 对于容器化应用程序的数据管理和持久化&#xff0c;Docker 数据卷…

链表的回文结构

题目描述 题目链接&#xff1a;链表的回文结构_牛客题霸_牛客网 (nowcoder.com) 题目分析 我们的思路是&#xff1a; 找到中间结点逆置后半段比对 我们可以简单画个图来表示一下&#xff1a; ‘ 奇数和偶数都是可以的 找中间结点 我们可以用快慢指针来找中&#xff1a;l…

如何实现图片轮播(python版)

为了实现图片自动轮播&#xff0c;我们可以使用Python编写一个简单的脚本。首先&#xff0c;我们需要安装一个名为Pillow的库来处理图片。在命令行中输入以下命令进行安装&#xff1a; pip install Pillow 接下来&#xff0c;我们编写一个名为image_slideshow.py的脚本&#x…

leetcode.884——字符串分割(substr),哈希(unordered_map)的练习

884. 两句话中的不常见单词 句子 是一串由空格分隔的单词。每个 单词 仅由小写字母组成。 如果某个单词在其中一个句子中恰好出现一次&#xff0c;在另一个句子中却 没有出现 &#xff0c;那么这个单词就是 不常见的 。 给你两个 句子 s1 和 s2 &#xff0c;返回所有 不常用…

成为AI产品经理——模型构建流程(下)

目录 1.模型训练 2.模型验证 3.模型融合 4.模型部署 上节课我们讲了模型设计、特征工程&#xff0c;这节课我们来讲模型构建剩下的三个部分&#xff1a;模型训练、模型验证和模型融合。 1.模型训练 模型训练就是要不断地训练、验证、调优直至让模型达到最优。 那么怎么达…

Python“牵手”京东商品详情接口运营场景,京东商品详情接口调用指南

京东商品详情接口是一种程序化的接口&#xff0c;通过这个接口&#xff0c;商家或开发者可以使用自己的编程技能&#xff0c;获取京东平台上的商品详细信息。这个接口允许商家根据自身的需求&#xff0c;获取商品的标题、价格、促销价、优惠券、库存、销量、详情图片、SKU属性、…

YOLOv5分割训练,从数据集标注到训练一条龙解决

最近进行了分割标注&#xff0c;感觉非常好玩&#xff0c;也遇到了很多坑&#xff0c;来跟大家分享一下&#xff0c;老样子有问题评论区留言&#xff0c;我会的就会回答你。 第一步&#xff1a;准备数据集 1、安装标注软件labelme如果要在计算机视觉领域深入的同学&#xff0…

TC397 EB MCAL开发从0开始系列 之 [15.2] Fee配置 - QsBlock demo

一、Fee配置1、配置目标2、目标依赖2.1 硬件使用2.2 软件使用2.3 新增模块3、EB配置3.1 配置讲解3.2 模块配置3.2.1 MCU配置3.2.2 PORT配置3.2.3 Fls_17_Dmu配置3.2.4 Fee配置3.2.5 Irq配置3.2.6 ResourceM配置4、ADS代码编写及调试4.1 工程编译4.2 测试结果4.3 测例源码->

基于STC12C5A60S2系列1T 8051单片读写掉电保存数据IIC总线器件24C02一字节并显示在液晶显示器LCD1602上应用

基于STC12C5A60S2系列1T 8051单片读写掉电保存数据IIC总线器件24C02一字节并显示在液晶显示器LCD1602上应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍IIC通信简单…

致远M3 反序列化RCE漏洞复现(XVE-2023-24878)

0x01 产品简介 M3移动办公是致远互联打造的一站式智能工作平台&#xff0c;提供全方位的企业移动业务管理&#xff0c;致力于构建以人为中心的智能化移动应用场景&#xff0c;促进人员工作积极性和创造力&#xff0c;提升企业效率和效能&#xff0c;是为企业量身定制的移动智慧…

15.Python 异常处理和程序调试

1. 异常处理 异常就是在程序执行过程中发生的超出预期的事件。一般情况下&#xff0c;当程序无法正常执行时&#xff0c;都会抛出异常。 在开发过程中&#xff0c;由于疏忽或考虑不周&#xff0c;出现的设计错误。因此&#xff0c;在后期程序调试中应该根据错误信息&#xff…

系统高可用设计-有感

文章目录 系统设计原则是 冗余 取舍系统运维的原则是规避线上异常 高可用设计通常从 系统设计和 系统运维 2 个层面来着手突破。 系统设计原则是 冗余 取舍 冗余&#xff1a;指集群部署 故障转移取舍&#xff1a;常见手段包括&#xff1a;超时控制、降级、限流 系统运维…

音视频项目—基于FFmpeg和SDL的音视频播放器解析(二十)

介绍 在本系列&#xff0c;我打算花大篇幅讲解我的 gitee 项目音视频播放器&#xff0c;在这个项目&#xff0c;您可以学到音视频解封装&#xff0c;解码&#xff0c;SDL渲染相关的知识。您对源代码感兴趣的话&#xff0c;请查看基于FFmpeg和SDL的音视频播放器 如果您不理解本…