【Unity】利用三角函数曲线模拟2D水面波动效果(RwaImage像素点波动)

原创已于 2022-03-07 10:49:36 修改 · 2.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#unity

于 2019-01-08 21:02:33 首次发布

功能Demo 同时被 2 个专栏收录

32 篇文章

订阅专栏

数学

13 篇文章

订阅专栏

本文介绍如何在Unity中使用正弦曲线实现水波纹效果。通过调整振幅、角速度、初相和偏距参数，动态改变RawImage的像素颜色，形成波动的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里用的是正弦曲线：y=Asin(ωx+φ)+k

A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2
(ωx+φ)——相位，反映变量y所处的状态
φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动
k——偏距，反映在坐标系上则为图像的上移或下移
ω——角速度，控制正弦周期(单位弧度内震动的次数)

如图，利用正弦曲线将RawImage且分为上下两部分，去掉上半部分像素点颜色，形成波纹形状，动态横向移动正弦曲线，达到波纹波动效果。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

[RequireComponent(typeof(RawImage))]
public class RawImageWaterWave : MonoBehaviour
{
    //初始波浪高度(偏距)
    [SerializeField, Range(0, 1)] float heightPercent = 0.5f;
    //波浪高度(值越接近于0,波浪越矮)(振幅)
    [SerializeField] float waveHeightParame = 0.1f;
    //波浪宽度(值越接近于0,波浪越宽)(角速度)
    [SerializeField] float waveWidthParame = 7;
    //波动速度(初相)
    [SerializeField] float speed = 1;
    //默认颜色
    [SerializeField] Color32 defaultColor;

    //RawImage组件
    RawImage waveImage;
    //待显示图片
    Texture2D showTexture;
    //像素点
    Color32[] pixelsBaseArr;
    Color32[] pixelsDrawArr;

    void Start()
    {
        //获取组件
        waveImage = GetComponent<RawImage>();
        //备份贴图
        showTexture = waveImage.texture as Texture2D;
        showTexture = Instantiate(showTexture);
        waveImage.texture = showTexture;
        //初始像素点
        pixelsBaseArr = showTexture.GetPixels32();
        //变化像素点
        pixelsDrawArr = new Color32[pixelsBaseArr.Length];
    }

    void Update()
    {
        Wave();
    }

    public void Wave()
    {
        //拷贝初始像素点
        System.Array.Copy(pixelsBaseArr, pixelsDrawArr, pixelsBaseArr.Length);
        //遍历所有Texture像素点
        for (int x = 0; x < showTexture.width; x++)
        {
            //偏移系数
            float tmpOffectParame = waveHeightParame * Mathf.Sin(waveWidthParame * x / showTexture.width + Time.time * speed);
            //限制极值
            float tmpHeightParame = Mathf.Clamp(heightPercent + tmpOffectParame, 0, 1);
            //计算高度
            int tmpHeight = (int)(tmpHeightParame * showTexture.height);
            //高度大于指定高度的像素点,显示默认色值
            for (int y = tmpHeight; y < showTexture.height; y++)
            {
                //将showTexture的width与height转化为pixelsDrawArr像素点数组的下标
                pixelsDrawArr[y * showTexture.width + x] = defaultColor;
            }
        }
        //Texture赋值
        showTexture.SetPixels32(pixelsDrawArr);
        showTexture.Apply();
    }

}

1. 设置图片为可读写，

2. 如果有报错"SetPixels32 can only be called on a RGBA32 or BGRA32 texture but is being called on GraphicsFormat RGBA Compressed ETC2 UNorm"，按照报错提示，修改图片格式即可。