Cocos游戏开发中的倒水游戏效果

点击上方亿元程序员+关注和★星标

Cocos游戏开发中的倒水游戏效果

引言

Cocos游戏开发中的倒水游戏效果

近日，笔者看到小伙伴正在推广他的小游戏，深入游玩了一波，这游戏不仅体验非常好、界面精美，据说活跃、留存等数据都很不错。

言归正传，游戏体验过之后，非常感兴趣这个游戏中的倒水游戏效果是如何实现的呢？

今天给大家介绍一下如何在Cocos游戏开发中实现倒水游戏效果，非常感谢小伙伴的投稿。

本文源工程在文末获取，小伙伴们自行前往。

1. 分析一下游戏

我们先来分析一下实现这个游戏有哪些关键点：

杯子：杯子的属性有它的容量，杯子倒水时的点以及倾斜倒水的动作。
水：水的分层显示，跟随着杯子倒水时倾斜而倾斜，还有倒水过程中的水的波纹。
水流：倒水过程中一束水流的效果。

Cocos游戏开发中的倒水游戏效果

2. 水的效果

本游戏最大的实现难度应该是水的波纹、倾斜、以及倒水效果。

在这里有几个关键的数学判断和参数，主要用于模拟倾斜容器中水的动态和波纹效果。

下面是这些判断和参数的简要解释以及相关的数学公式：

1. 倾斜角度判断与模拟水面倾斜

着色器通过检查倾斜角度来决定水面的倾斜方式和范围。

水的倾斜效果是通过计算水面与容器边界交互的结果来实现的。

角度计算公式：

Cocos游戏开发中的倒水游戏效果

这个公式将倾斜角度从度转换为弧度，以便使用三角函数。
倾斜的处理：
根据水的高度与容器的比例和倾斜角度，确定水面的中心点和倾斜程度。使用 tan 函数来判断水面是否会接触到容器的上底或下底。这个计算涉及到容器的宽高比和水的当前高度。

2. 水面波纹的模拟

水面波纹是通过正弦函数来模拟的，这在视觉上表示为水面随时间波动。

这部分使用的数学公式包括振幅、角速度和频率，以创建动态波浪的效果。

波纹公式：

Cocos游戏开发中的倒水游戏效果

其中，amplitude 控制波浪的高度，angularVelocity 控制波的周期，frequency 控制波浪的速度。cc_time.x 用于根据时间动态改变波的位置，实现动态效果。

// 波纹计算
bool hasWave = curIdx==arrSize-1;//只有最上面一层有波浪
hasWave = hasWave;
if(hasWave){
  // 代入正弦曲线公式计算模拟水面波浪 y = Asin(ωx ± φ)
  float amplitude = 0.0;// 振幅（控制波浪顶端和底端的高度）
  float angularVelocity = 0.0;// 角速度（控制波浪的周期）
  float frequency = 0.0;// 频率（控制波浪移动的速度）
  if(abs(corrugationType-1.0)<0.01){//往里倒水
    amplitude = 0.08;
    angularVelocity = 10.0;
    frequency = 10.0;
  }else if(abs(corrugationType-2.0)<0.01){//往外倒水
    amplitude = 0.03;
    angularVelocity = 5.0;
    frequency = 6.0;
  }
  y = amplitude * sin((angularVelocity * uv1.x) + (frequency * cc_time.x)*(toLeft ? 1. : -1.));
}

3. 颜色和透明度处理

片段着色器最终将计算的水面透明度（alpha）与纹理颜色和顶点颜色相结合来决定最终像素的颜色。

颜色混合公式：

Cocos游戏开发中的倒水游戏效果

如果水面的某部分完全透明，则使用 discard 指令跳过这些像素，优化性能。

//从最下面一层开始绘制
for(int i=0;i<MAX_ARR_LEN;i++){
  if(heights[i].x<0.001){
    continue;
  }
  _height+=heights[i].x;
  a += drawWater(uv,angle,_height,size,i);
  if(a>0.0){//绘制过的，跳过
      ret *= a*colors[i]; 
      break;
  }
}
if(a<0.001){
  discard;
}
// 输出颜色
gl_FragColor = ret;