Cocos Creator 3.8 开发2D水面波纹Shader

使用cocos Creator 3.8做了一个游戏开中常用的2D的波浪水面,把技术点给记录一下,并提供完整的Shader代码。先上效果:

添加图片注释,不超过 140 字(可选)

2D 波浪的基本技术原理

2D 水面波纹的主要原理就是给定一个正选波的边界,在范围内的片元uv就显示,在范围外的片元uv就不显示。同时利用正弦波表达式:

y = A * sin(w * t+offset)

将片元的uv坐标uv.x 带入上面的公式offset,算出y0值。Cocos 的uv 左上角为(0, 0),我们要在图片的上方做水波纹,那么片元的uv.y < y0的片元就丢弃, uv.y >= y0的就正常显示。

对啦!这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的零基础小白,也有一些正在从事游戏开发的技术大佬,欢迎你来交流学习。

添加图片注释,不超过 140 字(可选)

为了让水波能动起来,我们就要不断的改变同一个位置offset, 对应的y0的值,那么我们加一个 w * t, 角速度*时间。这样随着时间的推移同一个uv(x, y),会得到不同的y0的值。有了不同的边界,这样就会决定不同的片元的显示和丢弃。

具体编写Shader

第001步: 新建一个标准2D Shader 模板,能正常显示图片

Cocos Creator的版本不一样,可能导致以前编写的Shader无法正常运行,这种其实很好解决,我们在开发Shader的时候,基于现在Cocos Creator的版本先创建一个现有的模板出来,然后再将关键代码移植过去。我们做一个2D的Shader,所以复制一个buildin-sprite的Shader模板。然后创建一个材质选好我们新创建的Shader文件,将材质设置到Sprite组件上,能正常显示图片。

添加图片注释,不超过 140 字(可选)

第002步: 定义好uniform给用户的控制参数:

baseLine: 基准线,该参数用于控制波浪在图片的位置(波形的基准线);

A: 振幅,该参数用于控制波浪线的高度;

wSpeed:角速度,该参数用来控制一个波形的长度;

添加图片注释,不超过 140 字(可选)

第003步: 修改Frag片元着色的Shader代码

完成基准线功能,编写代码基准线以上的片元直接丢弃,基准线一下的片元保留,代码如下:

 
 

float value = 0;

 

if(uv0.y < baseLine + value) {

 

discard;

 

}

这样基准线baseLine以上的,就不显示,baseLine以下的显示。

第004步:基于A*sin(offset)来将基准线做正弦波处理

基准线确定好后,还需给基准线加上正弦波,offset为uv.x, value = A*sin(offset), baseLine + value, 这样就把baseLine做成了正弦波的分界线。

 
 

float value = A * sin(uv0.x * 30.0);

 

if(uv0.y < baseLine + value) {

 

discard;

 

}

第005步:让正弦波动起来

为了让正弦波动起来,我们在sin加上w*t, 在cocos ccreator里面cc_time是一个vec4的向量, cc_time.x是从启动后到现在的时间,随着时间不断地变化,value = A * sin(uv0.x * 30.0 + wSpeed * cc_time.x); value地值也成周期变化,这样波形就动起来了。

 
 

float value = A * sin(uv0.x * 30.0 + wSpeed * cc_time.x);

 

if(uv0.y < baseLine + value) {

 

discard;

 

}

完整Shader代码

最后上代码(Cocos Creator 3.8.0):

 
 

// Copyright (c) 2017-2020 Xiamen Yaji Software Co., Ltd.

 

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 }

 

baseLine: { value: 0.5}

 

wSpeed: { value: 10.0 }

 

A: { value: 0.01}

 

}%

 

CCProgram sprite-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 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

 

color = a_color;

 

return pos;

 

}

 

}%

 

CCProgram sprite-fs %{

 

precision highp float;

 

#include <builtin/uniforms/cc-global>

 

#include <builtin/internal/embedded-alpha>

 

#include <builtin/internal/alpha-test>

 

in vec4 color;

 

#if USE_TEXTURE

 

in vec2 uv0;

 

#pragma builtin(local)

 

layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;

 

#endif

 

uniform MyUniform {

 

float baseLine;

 

float wSpeed;

 

float A;

 

};

 

vec4 frag () {

 

vec4 o = vec4(1, 1, 1, 1);

 

#if USE_TEXTURE

 

o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);

 

#endif

 

float value = A * sin(uv0.x * 30.0 + wSpeed * cc_time.x);

 

if(uv0.y < baseLine + value) {

 

discard;

 

}

 

o *= color;

 

return o;

 

}

 

}%

关注我们,可以获取这个项目工程地源码。

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

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

相关文章

基于 SpringBoot + magic-api + Vue3 + Element Plus + amis3.0 快速开发管理系统

Tansci-Boot 基于 SpringBoot2 magic-api Vue3 Element Plus amis3.0 快速开发管理系统 Tansci-Boot 是一个前后端分离后台管理系统&#xff0c; 前端集成 amis 低代码前端框架&#xff0c;后端集成 magic-api 的接口快速开发框架。包含基础权限、安全认证、以及常用的一…

2020年认证杯SPSSPRO杯数学建模D题(第二阶段)让电脑桌面飞起来全过程文档及程序

2020年认证杯SPSSPRO杯数学建模 D题 让电脑桌面飞起来 原题再现&#xff1a; 对于一些必须每天使用电脑工作的白领来说&#xff0c;电脑桌面有着非常特殊的意义&#xff0c;通常一些频繁使用或者比较重要的图标会一直保留在桌面上&#xff0c;但是随着时间的推移&#xff0c;…

搭建LNMP网站平台并部署Web应用

本章主要介绍&#xff1a; 安装Nginx安装MySQL安装PHP在LNMP平台中部署 Web 应用 构建LNMP网站平台就像构建LAMP平台一样&#xff0c;构建LNMP平台也需要Linux服务器&#xff0c;MySQL数据库&#xff0c;PHP解析环境&#xff0c;区别主要在Nginx 与 PHP的协作配置上&#xff0…

Spring 应用上下文探秘:生命周期解析与最佳实践

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Spring 应用上下文探秘&#xff1a;生命周期解析与最佳实践 前言应用上下文的初始化过程1. 应用上下文的初始化过程&#xff1a;2. 不同类型的 ApplicationContext 初始化流程&#xff1a;2.1 Annotat…

湖南大学-数据库系统-2018期末考试解析

【写在前面】 这是2018年的卷子&#xff0c;复习备考的时候做了并与同学校对了答案。答案仅供参考。这张难度不大&#xff0c;同样的&#xff0c;跟前几张差不了太多。但是从这一年开始&#xff0c;选择题变成了15道&#xff0c;越来越贴切近几年的考试了。 一、单选题&#xf…

HTML JavaScript 康威生命游戏

<!DOCTYPE html> <html> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>康威生命游戏</title><style>body {font-family: Arial, sa…

JS-基础语法(一)

JavaScript简单介绍 变量 常量 数据类型 类型转换 案例 1.JavaScript简单介绍 JavaScript 是什么&#xff1f; 是一种运行在客户端&#xff08;浏览器&#xff09;的编程语言&#xff0c;可以实现人机交互效果。 JS的作用 JavaScript的组成 JSECMAScript( 基础语法 )…

每日算法打卡:分巧克力 day 9

文章目录 原题链接题目描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 题目分析示例代码 原题链接 1227. 分巧克力 题目难度&#xff1a;简单 题目来源&#xff1a;第八届蓝桥杯省赛C A/B组,第八届蓝桥杯省赛Java A/B/C组 题目描述 儿童节那天有 …

流程挖掘在优化核心业务、增强可见性和提升自动化方面的三重效应

在过去二十年里&#xff0c;流程挖掘技术已由最初的学术理念演变成一种成熟的软件基础工具&#xff0c;它致力于流程的可视化、深度分析及其优化。传统的手动流程改进方法往往会受到主观偏见和误差的干扰&#xff0c;而流程挖掘技术则通过结合流程建模与数据挖掘手段&#xff0…

mysql 优化工具 EXPLAIN详解

EXPLAIN 是 MySQL 中用于查看查询执行计划的关键字&#xff0c;通过 EXPLAIN 可以了解 MySQL 优化器是如何选择执行查询的。EXPLAIN 的输出信息包括了许多字段&#xff0c;其中一些关键的字段和类别如下&#xff1a; id&#xff1a; 查询的标识符&#xff0c;用于标识查询执行计…

【2024系统架构设计】 系统架构设计师第二版-嵌入式系统架构设计理论与实践

目录 一 嵌入式系统软件架构的原理 二 嵌入式系统软件架构的设计方法 三 案例分析 一 嵌入式系统软件架构的原理 🚀嵌入式系统的典型架构可以分为

java.lang.ClassNotFoundException: jakarta.servlet.Servlet

联系servlet的使用时&#xff0c;编写了servlet的处理器&#xff0c;但是浏览器报500错误&#xff0c;有时候是404错误 WebServlet("/mayikt") public class Servlet1 implements Servlet {Overridepublic void init(ServletConfig servletConfig) throws ServletExc…

MySQL5.7 InnoDB 磁盘结构之索引Index

官网地址&#xff1a;MySQL :: MySQL 5.7 Reference Manual :: 14.6.2.1 Clustered and Secondary Indexes 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. MySQL 5.7 参考手册 / ... / 聚集索引和二级索引 14…

C++实现简单贪吃蛇游戏

文章目录 1 开发历程2 开发思路3 使用介绍4 源文件代码5 游戏截图6 小结 1 开发历程 游戏使用C语言开发&#xff0c;是博主某个下午心血来潮的结果&#xff0c;后面又花了点时间加了计分&#xff0c;记录历史得分的功能。 2 开发思路 其实贪吃蛇主要难在蛇身的移动上&#x…

AWS IoT Core 实战指南

Amazon Web Services (AWS) 提供了全球范围内的托管服务,其中包括 AWS IoT Core,专为连接和管理物联网设备而设计。这个实战指南将带你一步步了解如何使用 AWS IoT Core 来注册设备、提高安全性、进行通信以及利用设备影子功能。 设备注册 1. 创建 Thing(设备) 在 AWS I…

cocos creator 如何绑定参数到编辑器

很多cocos creator同学不知道如何绑定组件属性到编辑器上&#xff0c;今天我们来教大家如何绑定 1: 基本数据属性绑定到编辑器 这个非常简单&#xff0c;模板是属性名字: 默认的值; Is_debug: false, speed: 100, 2: 系统组件类型与节点绑定到编辑器 属性名字: { type: 组件…

App更换图标

App更换图标 京东淘宝的每到618或者双十一的时候&#xff0c;app图标都会贴合相关主题更换一下&#xff0c;但是那个时间段app也没有升级&#xff0c;所以说肯定是有一个配置能够更改app的图标。 查了一些文档&#xff0c;发现了如下的方法。 准备图片 准备120x120和180x18…

带着股票转户——转托管流程分享

前一阵子&#xff0c;有部分朋友说想换掉原来的券商&#xff0c;但又不想卖出股票&#xff0c;这时候就可以通过券商的“转托管”功能&#xff0c;把股票从原来的券商账户&#xff0c;转移到新的券商账户中。 转托管的好处显而易见&#xff0c;不需要卖出股票/重新买入股票&am…

什么是宏任务与微任务以及它们的执行顺序

文章目录 宏任务微任务 微任务和宏任务是指在 JavaScript 中执行异步任务的两种不同的队列。 宏任务 宏任务&#xff1a; 宏任务是指由浏览器发起的、在事件循环中执行的异步任务。常见的宏任务包括&#xff1a; setTimeoutsetIntervalI/O 操作UI 渲染 宏任务的执行顺序是在每…

Ubuntu20.04扩展磁盘后系统无法启动

z​​​​​​Ubuntu20.04虚拟机扩展磁盘后系统无法启动 - 黑夫和惊 - 博客园 (cnblogs.com) 找了半天的解决方法&#xff0c;这个人的最好用。 只不过进入BOOT那个地方&#xff0c;不需要狂按F2&#xff0c;直接在虚拟机的开机键边上的小三角&#xff0c;选择&#xff0c;“…