引言
哈喽大家好，我是亿元程序员。
笔者的《亿元Cocos小游戏实战合集》，从更新的第一天开始，就有许多小伙伴问到，什么时候更新一期倒水解谜的游戏实战？
其实笔者早有计划，再加上小伙伴们的强烈需求，这一期，小伙伴们心心念念的倒水解谜游戏实战，终于来了...
言归正传，本期带大家一起来看看，在Cocos游戏开发中，倒水解谜游戏的核心部分，并加入到我的《亿元Cocos小游戏实战合集》中去。
本文源工程可在文末获取，小伙伴们自行前往。
什么是倒水解谜游戏？
可能有很多小伙伴还不知道这类游戏，简单介绍一下:
倒水解谜游戏是一类以 “倒水 / 液体转移” 为核心玩法的休闲益智游戏。
玩家需通过容器间的倾倒操作达成特定目标（如液体颜色统一、精确容量分配），核心考验逻辑推理与步骤规划能力。
通俗的理解，和我们在学校时，通过水杯倒来倒去得到指定毫升数的水相类似(瞎掰的)。
既然是倒水游戏，水是重要的一个游戏元素，那它是怎么实现的呢？
水的效果
关于水的效果，其实有比较多的实现方法，既可以通过美术妹子实现，也可以通过Shader实现，甚至还能用Graphics组件画！
美术妹子: “一边凉快去。”
既然上面的方法行不通，我们只能通过Shader来实现了，至于Graphics，小伙伴们可以自行挑战一下。
1. 资源准备
简单准备一张杯子形状的图片和对应杯子形状纯白Mask。
简单拼一下UI。
通过资源管理器通过右键->创建->传统无光照着色器(Effect)创建一个Shader。
和上面一样创建一个材质，将对应的Effect改成我们自己创建的并且勾选USE_TEXTURE。
然后把材质拖到我们杯子的Mask的Sprite上，实际要在代码中动态创建，不然会共用同一个材质。
2. 水的颜色
搜索sprite找到builtin-sprite，双击打开把内容复制到我们创建的Shader中去当做模板。
想要修改水的颜色，我们可以找到最下面的片段着色器，将color改成红色vec4(1,0,0,1);，分别对应RGBA。
效果如下：
3. 水的分层
想要实现水的分层，我们可以通过简单UV划分，下半部分为蓝色，上半部分为红色，实际项目可以通过实际水的高度去划分。
效果如下：
4. 水的波纹
水倒下时，会在杯子中形成波纹，我们可以通过下面的公式来实现。
测试Shader如下，当UV高于指定高度时，形成波纹。使用cc_time时，需要在片段开始时引入#include <cc-global>。
效果如下：
5. 水的倾斜
水的倾斜可以通过下面的函数进行。
效果如下：
相信通过上面的内容，大家都已经学会了如何在Shader中模拟水的效果。
那我们要怎么样在实际游戏中进行通过代码控制动态结合呢？
动态传值到Shader
想要通过代码动态传值到Shader，我们通常要通过以下几个步骤。
1.Properties
properties用于将
Shader中定义的uniform进行别名映射。这个映射可以是某个
uniform的完整映射，也可以是具体某个分量的映射（使用target参数）。
代码示例如下，colors和heights可以传vec4数组，iResult是vec2，其余是数值。
2.uniform
uniform是GLSL中的关键字，声明的变量表示全局统一变量:
-
它的值在一次绘制调用中保持不变（对所有像素 / 顶点都相同）。
-
可以从
CPU端（游戏逻辑代码）直接赋值，GPU端（着色器）只读。 -
常用于传递动态参数（如颜色、角度、纹理等）。
3.setProperty
在TypeScript中可以使用Material类的setProperty方法进行设置，代码示例如下：
4.使用
完成上述步骤后，可以直接使用，非常简单。
以上就是倒水解谜游戏的核心部分，其余简单的代码逻辑由于篇幅问题就不再赘述，可以通过源码查看。
相信小伙伴们学废之后，可以完成到下面的效果。
效果演示
结语
**那么问题来了，**倒水解谜类游戏已经过去了这么久，其变种依旧非常火爆。
小伙伴们知道为什么吗？
本文实战完整源码已集成到亿元Cocos小游戏实战合集（6/10），内含体验链接，有疑问笔者手把手讲解。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《打螺丝闯关》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》《方块掌机经典》大家可以自行点击搜索体验。
实不相瞒，想要个赞和爱心！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：
