cocos倒水

效果

功能

水

    /**
     * 渲染水的函数
     */
    render(obj = { color: "" }) {        
        const color = this.hexToColor(obj.color || Enums.colorEnums.RED)

        this.createTriangleWater(color) // 创建三角形形状的水
        this.createParallelogramWater(color) // 创建平行四边形形状的水
        this.createRectangleWater(color) // 创建矩形形状的水
        this.createWave(color) // 创建波纹

        this.changeWaterType('rectangle')
    }

• 通过传入颜色来修改水的颜色

    /**
     * 创建三角形形状的水
     */
    createTriangleWater(color) {
        // 获取 triangle 子节点的 Graphics 组件
        const triangleNode = this.node.getChildByName('triangle');
        const graphics = triangleNode.getComponent(cc.Graphics);

        // 设置线段填充颜色
        graphics.fillColor = color;
        // 设置线段宽度
        graphics.lineWidth = 0;
        // 设置线段末端样式
        graphics.lineCap = cc.Graphics.LineCap.ROUND;

        graphics.moveTo(-50, -50); // 移动到三角形的顶点
        graphics.lineTo(50, -50); // 绘制三角形的底边
        graphics.lineTo(50, 50); // 绘制三角形的斜边
        graphics.close(); // 闭合路径
        graphics.fill() // 填充
        // 绘制
        graphics.stroke();
    }

    /**
     * 创建平行四边形形状的水
     */
    createParallelogramWater(color) {
        // 获取 parallelogram 子节点的 Graphics 组件
        const parallelogramNode = this.node.getChildByName('parallelogram');
        const graphics = parallelogramNode.getComponent(cc.Graphics);

        // 设置线段填充颜色
        graphics.fillColor = color;
        // 设置线段宽度
        graphics.lineWidth = 0;
        // 设置线段末端样式
        graphics.lineCap = cc.Graphics.LineCap.ROUND;

        // 移动到平行四边形的左上角顶点
        graphics.moveTo(-50, -50);
        // 绘制平行四边形的右上角顶点
        graphics.lineTo(50, 50);
        // 绘制平行四边形的右下角顶点
        graphics.lineTo(50, -50);
        // 绘制平行四边形的左下角顶点
        graphics.lineTo(-50, -150);
        graphics.close(); // 闭合路径
        graphics.fill() // 填充

        // 绘制
        graphics.stroke();
    }

    /**
     * 创建矩形形状的水
     */
    createRectangleWater(color) {
        this.node.getChildByName('rectangle').color = color;
    }

    /**
     * 创建波纹
     */
    createWave(color) {
        // 获取 wave 子节点的 Graphics 组件
        const waveNode = this.node.getChildByName('wave');
        const graphics = waveNode.getComponent(cc.Graphics);

        // 设置波浪的样式
        graphics.lineWidth = 20;
        graphics.strokeColor = color;

        // 初始化波浪参数
        const width = waveNode.width;
        const height = waveNode.height;
        const amplitude = 10; // 振幅
        const frequency = 0.1; // 频率
        let phase = 0; // 相位

        // 更新波浪路径的方法
        function updateWavePath() {
            graphics.clear();
            const startX = -40; // 起点 x 坐标
            const startY = 24; // 起点 y 坐标
            const waveLength = width - 10; // 波长为当前宽度
            graphics.moveTo(startX, startY);
            for (let x = 0; x <= waveLength; x += 2) {
                const y = startY + amplitude * Math.sin(frequency * x + phase);
                graphics.lineTo(x + startX, y + startY);
            }
            graphics.stroke();
            phase += 0.1; // 控制波浪移动速度的参数
        }

        // 使用定时器不断更新波浪路径
        this.schedule(updateWavePath, 0.03); // 每隔0.03秒更新一次波浪路径

        // 波纹下面的矩形
        // const rect = new cc.Node('rect');
        // rect.parent = waveNode;
        // const rectGraphics = rect.addComponent(cc.Graphics);
        // rectGraphics.fillColor = color;
        // rectGraphics.fillRect(-width / 2, -height / 2, width, height);
        // rect.opacity = 128;
    }

• 通过Graphics组件来创建不同形状的水