简介这是一份针对 Cocos2d-x 的自定义精灵类示例适合希望实现纹理波动、水波纹或路径动画的游戏开发者。资源以 UVSprite 类为核心演示如何扩展 CCSprite通过时间驱动的 UV 坐标变化画出连续平滑的波动线条。在 Cocos2d-x 中UV 坐标决定纹理在精灵表面的映射方式本示例正是通过不断更新纹理坐标并配合正弦波等数学函数计算偏移量模拟出线条的连续扰动与位移体现了纹理动画在 2D 特效中的典型用法。压缩包共 2 个文件1 个 .h 声明接口、1 个 .cpp 实现核心逻辑体积仅 1KB代码精简无多余依赖方便直接阅读或移植到自己的项目。目前已有 189 人学习下载。阅读这段代码可以学习如何用 setTextureRect:texCoords: 改变纹理区域、如何将时间变量融入渲染循环以及如何通过自定义精灵类管理特效状态对这组逻辑稍作扩展还能做出水波纹、旗帜飘动、扭曲光效等更丰富的动态表现。如果继续结合帧动画、顶点着色器或物理引擎还能在性能与真实感上获得更多提升因此这份代码不仅是 UV 动画的直观范例也是迈向复杂 2D 特效的良好起点。1. 需求拆解连续波动线条到底是什么如果你在cocos2dx里做过音频波形、心跳曲线或者实时监控图大概率会被同一个需求卡住一串数据点源源不断进来要怎么渲染成一条连续顺滑、实时滚动的波动线条同时还不能让游戏帧率掉得离谱。标题里这个“描绘连续波动线条”说白了就是干这件事。这一类需求的本质是把“离散的采样数据”转成“连续的视觉曲线”。听起来简单但实际做的时候会牵扯到数据存储、坐标映射、插值平滑、渲染性能还有不同机型上的适配问题。我最初用最笨的方式——每隔几帧生成一张纹理贴图结果看起来又卡又糊换方案之后才真正跑通。这篇就把我自己在cocos2dx里绘制连续波动线条的完整思路和踩坑经验写出来代码以C为主逻辑同样适用于Lua或者JS绑定工程。1.1 这类需求在游戏和工具里出现在哪些地方连续波动线条不是某一类游戏的专属需求我用过的场景就有不少音频可视化播放背景音乐时界面上出现一条跟随音量起伏的电波线数据来自音频采样每秒几十次更新。角色状态监控战斗 HUD 里显示玩家血量或神识值的变化趋势做成一条动态曲线比单纯数字更直观。触摸轨迹光效玩家滑动屏幕时手指经过的路径出现一条发光的波纹拖尾本质也是采样点连续波动。物理或传感器数值展示比如重力感应数据、网络延迟曲线放在调试面板里实时刷新。这些场景的共性非常明显数据点是动态追加的、有实时性要求、并且视觉上必须是平滑连续的。理解了这一点后面所有设计都会围绕“如何高效处理持续变化的数据流”来展开。1.2 为什么首选引擎渲染而不是贴图方案有人会问在cocos2dx里画一条线直接做几张波动的序列帧贴图不就行了确实如果波动形态是固定的、周期性的贴图动画是最快的方案。但一旦数据是外部输入的、不可预测的比如音频采样、用户触摸轨迹序列帧就完全不可用。用贴图方案至少有三个问题数据不匹配贴图是预先烘焙好的形态无法表达实时变化的数据。内存浪费如果要做大量帧纹理内存会占用很高移动端尤其不划算。可定制性差想要改颜色、改线宽、加发光效果都得重新出图。所以在cocos2dx里最合适的方式是用引擎的渲染能力实时绘制也就是把数据点转化为几何图元提交到渲染管线。具体来说有两条路低成本的DrawNode方案和高性能的自定义渲染方案。前者开发快适合点位数少、刷新频率不高的场景后者适合几百上千个采样点、每帧都要更新的重度使用场景。下面我把两种方案都拆开讲。2. 数据流设计实时波动线的基本盘画线之前先要把数据流的设计想清楚。很多人一上来就在draw方法里写绘制逻辑结果数据存储乱糟糟刷新一快就出问题。实际上连续波动线条的核心难点不只是“画”更是“数据从哪来、存多久、怎么淘汰”。2.1 用环形缓冲保存窗口内的采样点假设音频模块每帧给你一个音量值或者传感器每秒吐几十个数据这些数据不可能无限存下去。最自然的做法是只保留最近N个点比如最近256个超出范围就覆盖最旧的数据。这个需求用环形缓冲区是最合适的。环形缓冲的特点是写入是O(1)的不需要像vector那样频繁搬移数据读取时只需要按顺序遍历一圈。用cocos2dx来写可以这样定义class WaveLineBuffer { public: WaveLineBuffer(int capacity) : _capacity(capacity) { _data.resize(capacity); } void push(float value) { _data[_head] value; _head (_head 1) % _capacity; if (_count _capacity) _count; } float get(int index) const { // index 0 表示最新的数据点返回按时间从新到旧排列 int pos (_head - 1 - index _capacity) % _capacity; return _data[pos]; } int size() const { return _count; } private: std::vectorfloat _data; int _head 0; int _count 0; int _capacity 0; };之所以用环形缓冲而不是直接vector.erase(begin())是因为后者在数据量大时会频繁触发内存拷贝在移动端低端机型上会出现明显的卡顿。环形缓冲简单粗暴性能也更稳定。2.2 模拟波动数据源与坐标映射实际项目中数据来自音频解码、硬件传感器或者网络包但在开发阶段通常需要自己造一个数据源。我一般会用两个正弦波叠加来模拟一个比较自然的波动信号float getWaveValue(float t) { // 低频主波 高频谐波模拟真实信号 return 0.5f * sinf(t * 2.0f * M_PI * 1.2f) 0.3f * sinf(t * 2.0f * M_PI * 4.7f); }有了数据源接下来要考虑怎么把采样值映射到屏幕坐标。映射包括两个维度横向采样点在窗口中的排列顺序。比如最新数据在右侧旧数据往左排列纵向采样值映射到屏幕高度。通常取采样值的范围比如[-1, 1]映射到波形绘制区域的上边缘和下边缘之间。核心映射函数可以这样写Vec2 mapPoint(int index, const Vec2 origin, float width, float height, float minVal, float maxVal) { // index 0 为最新数据 float t (float)index / (_buffer-size() - 1); // 0~10表示最新1表示最旧 float x origin.x width * (1.0f - t); float val _buffer-get(index); float normalized (val - minVal) / (maxVal - minVal); float y origin.y height * normalized; return Vec2(x, y); }这里有一个细节容易被忽略原始采样值可能有突变直接把原始值映射到坐标会导致线条出现剧烈的毛刺。通常需要先做一次低通滤波把突变抹平一点视觉上才像“连续波动”。2.3 按时间戳还是按序列索引绘制连续波动线条时横轴到底用什么来定位这是我在实际开发里纠结过的问题。如果数据源是均匀采样的比如每秒钟固定60个点那直接用序列索引映射横向位置就行。但如果采样间隔不均匀比如网络延迟忽高忽低再按序列索引排列就会出现严重的视觉扭曲——两个真实时间相差很大的点在图上却只隔了一个像素。更稳妥的做法是每个采样点额外记录一个时间戳坐标映射时按时间差算横轴位置struct SamplePoint { float value; float timestamp; };然后横向位置由(timestamp - startTime) / duration决定。不过这样实现复杂度会高一些如果是游戏内的音频波形、触摸轨迹这类均匀采样的场景直接用索引就够了性能也更好。判断标准很简单数据源是不是固定频率是就按索引不是就按时间戳。3. 从折线到平滑曲线绘图核心算法数据层准备好以后真正的重头戏就是怎么把一串点变成视觉上连贯的曲线。这里我先从最简单的DrawNode折线方案说起再引入插值算法让线条变平滑。3.1 DrawNode快速实现连续折线cocos2dx自带的DrawNode是新手最友好的绘制入口。它的API很简单drawSegment就能画一条有宽度的线段auto drawNode DrawNode::create(); this-addChild(drawNode, 10); // 每帧update时重新绘制 void update(float delta) { drawNode-clear(); for (int i 0; i buffer-size() - 1; i) { Vec2 p1 mapPoint(i); Vec2 p2 mapPoint(i 1); drawNode-drawSegment(p1, p2, 2.0f, Color4F(0.1f, 0.8f, 0.9f, 1.0f)); } }这套代码跑起来一个最基础的连续波动折线就出现了。DrawNode内部会把所有图元打包成一个批次提交因此在数据点不多比如50个以内的情况下性能尚可。但是它有明显的缺陷折线连接处会有棱角看起来不够“波动顺滑”。3.2 Catmull-Rom插值让线条更丝滑要让折线变成曲线我见过不少人直接用贝塞尔曲线每两个点之间拉一条二次贝塞尔但控制点计算比较绕。我更推荐Catmull-Rom插值它最大的优势是通过所有控制点并且只需要相邻点就能算出平滑的过渡。Catmull-Rom的核心公式如下Vec2 catmullRom(const Vec2 p0, const Vec2 p1, const Vec2 p2, const Vec2 p3, float t) { float t2 t * t; float t3 t2 * t; return 0.5f * ( 2.0f * p1 (-p0 p2) * t (2.0f * p0 - 5.0f * p1 4.0f * p2 - p3) * t2 (-p0 3.0f * p1 - 3.0f * p2 p3) * t3 ); }在p1和p2之间插值时需要提供前后各一个点也就是p0、p1、p2、p3四个点。然后在p1到p2之间细分成若干小段每段用drawSegment画出for (int i 0; i buffer-size() - 1; i) { Vec2 p0 (i 0) ? mapPoint(i - 1) : mapPoint(i); Vec2 p1 mapPoint(i); Vec2 p2 mapPoint(i 1); Vec2 p3 (i 2 buffer-size()) ? mapPoint(i 2) : mapPoint(i 1); Vec2 prev p1; for (int j 1; j 10; j) { float t j / 10.0f; Vec2 cur catmullRom(p0, p1, p2, p3, t); drawNode-drawSegment(prev, cur, 2.0f, color); prev cur; } }这里细分10份是我常用的值。画质要求高的可以细分到16份或者20份但要注意点数翻倍后DrawNode的顶点数量也会翻倍不是越大越好。3.3 首尾处理、动效和“呼吸”效果首尾数据是最容易出问题的。缓冲区刚开始填充时前几个点不够四个直接拿去算Catmull-Rom就会越界。我的处理思路是当索引超出范围时直接用边界点的值代替保证插值算式不越界。窗口只有前两个点时就退化成普通折线绘制这也是合理的降级策略。另外一个提升观感的小技巧是加“呼吸”效果。所谓呼吸就是让波形在原有数据基础上轻微起伏好像在缓缓上下浮动。通常有两种做法横向波浪偏移把整条线的x坐标叠加一个很小的sin(时间)偏移让线条微微左右流动纵向振幅调制把y坐标的振幅乘上0.95 0.05 * sin(时间)让波形整体有轻微的幅度变化。呼吸效果的幅度一定不能大不然会让人觉得是数据本身出了问题。我做的时候偏移量一般控制在2个像素以内。4. 高频刷新下的性能优化用DrawNode实现平滑曲线在波点数比较少时一切安好。但如果波点数到了256个每个点又细分10段DrawNode每帧需要提交几千条线段这时候性能问题立刻暴露出来。4.1 DrawNode的瓶颈在哪里DrawNode的每个drawSegment实际上会生成两个三角形6个顶点用来模拟带圆角或方形端点的线。假如你有200个采样点每条线段细分10段那就是2000条小线段每帧顶点数接近12000个。对移动端GPU来说顶点数倒还好真正的问题是CPU端在每次更新时都要反复调用clear()再重新添加顶点这个过程中有大量的内存分配和对象构造。我实测过在低端安卓机上如果每帧重建12000个顶点帧率会从60掉到35左右。所以后来我放弃了每帧clear的方案改成按需刷新只有在新数据到达时才重绘并且给重绘逻辑加一个最短时间间隔防止同一帧内多次触发。4.2 自定义三角带渲染宽线条如果性能要求再高就要绕开DrawNode用更底层的渲染方式。cocos2dx的Renderer支持CustomCommand可以让我们提交自己的顶点数据用三角形带TRIANGLE_STRIP绘制一整条连续的宽线条。三角形带的核心思想是把中轴线上的每个点沿法线方向扩展成上下两个顶点再依次排列成顶点数组渲染器会自动把顶点连接成连续的面片。这个做法比大量drawSegment高效得多因为整条线只有一个批次而且顶点数量大约只有线段方案的一半。下面是我简化后的顶点构造逻辑void buildVertices(const std::vectorVec2 linePoints, float lineWidth, const Color4F color, std::vectorV3F_C4B_T2F vertices) { int count (int)linePoints.size(); if (count 2) return; for (int i 0; i count; i) { Vec2 tangent; if (i 0) tangent linePoints[1] - linePoints[0]; else if (i count - 1) tangent linePoints[count - 1] - linePoints[count - 2]; else tangent linePoints[i 1] - linePoints[i - 1]; tangent.normalize(); Vec2 normal(-tangent.y, tangent.x); float halfWidth lineWidth * 0.5f; V3F_C4B_T2F upper { Vec3(linePoints[i].x normal.x * halfWidth, linePoints[i].y normal.y * halfWidth, 0), Color4B(color), Vec2(0, 0) }; V3F_C4B_T2F lower { Vec3(linePoints[i].x - normal.x * halfWidth, linePoints[i].y - normal.y * halfWidth, 0), Color4B(color), Vec2(0, 0) }; vertices.push_back(upper); vertices.push_back(lower); } }顶点构建完成后把vertices传给CustomCommand设置PrimitiveType::TRIANGLE_STRIP即可。由于三角形带顶点顺序的原因索引为0的顶点会对应线条起点上侧索引为1对应起点下侧索引2对应第二个采样点上侧依此类推。渲染器会把它们连成一条首尾贯通、宽度一致的连续带状图形。这个方案的另一个优势是构建一次顶点可以反复使用。只有数据变化时才需要更新缓冲区如果只是UI层级移动顶点都不用重建。4.3 脏标记、顶点上限与内存控制就算用了自定义渲染也不建议每帧无脑重建顶点。我引入了一个简单的脏标记机制数据缓冲区有新数据进来时把_dirty true渲染回调里检查到脏标记才重新构建顶点并上传然后置回false。没有新数据时渲染直接用旧顶点这样既省CPU也省带宽。顶点上限同样重要。为了防止缓冲区数据过多导致顶点数组无限膨胀我会在环形缓冲满了以后宁可丢弃旧数据也不增加顶点数。通常上限控制在512个采样点再配合Catmull-Rom细分已经能覆盖绝大多数“连续波动线条”的视觉需求。还有个细节很多人会忽略cocos2dx的CustomCommand在移动端要尽量走缓存材质ID避免频繁切换渲染状态。如果线和UI在同一层绘制要确认渲染顺序不然会出现画线被UI控件盖住或者闪烁的问题。5. 避坑与适配半透明接缝、尺寸与层级连续波动线条看着不难但实际调起来坑比想象的多。下面这几个问题我基本都在项目里踩过一遍。5.1 半透明线条的接缝问题我第一次用半透明颜色画曲线时发现线条边缘出现一段一段的深色接缝看起来像虚线。原因是drawSegment绘制的是独立的线段相邻线段在连接处会有几像素的重叠半透明颜色叠加之后就出现了变深的效果。解决办法有三个方向放弃半透明如果不需要特别炫的效果直接用不透明颜色最省心减少重叠区域把drawSegment的端点改成方形让前后线段紧密贴合而不是互相重叠用自定义三角带整条线是一块连续的面片不存在多段重叠半透明效果也很自然。如果只是简单遮丑可以用不透明底色垫底、半透明高光叠加的方式接缝问题基本看不出来。5.2 不同分辨率下的线宽控制在cocos2dx里DrawNode的线宽单位是逻辑坐标不是物理像素。同样的线宽在Retina屏和非Retina屏上物理粗细差异很大。我的做法是根据设计分辨率来设置线宽并且配合Director::getInstance()-getContentScaleFactor()换算float lineWidth 2.0f * Director::getInstance()-getContentScaleFactor();但要注意如果项目用的是固定设计分辨率加等比缩放直接乘scale factor可能导致高分辨率设备上线条过粗。更稳妥的做法是先看需求上想要多粗的视觉线宽再在真机上多测几个分辨率微调别指望一劳永逸的公式。5.3 渲染层级与触摸拦截最后说层级问题。连续波动线条通常放在UI层但如果你在它上面加了按钮、滑条要小心两点渲染顺序DrawNode的setLocalZOrder要设置正确否则波形会盖住按钮文字触摸事件DrawNode本身不会拦截触摸但如果你在DrawNode所在的Node上开启了setSwallowsTouches(true)触摸就会被吞掉按钮就点不到了。我在做音频波形界面时就把波形放在一个单独的Layer里关闭触摸监听UI按钮放另外一个Layer从那以后再也没有出现按钮失灵的情况。这个绘制连续波动线条的方案我已经在多个项目里复用过了从音频波形到触摸轨迹都适用。最后分享一个小细节如果你发现Catmull-Rom插值后的曲线在数据剧烈变化时出现小环圈那通常是因为细分段数太少把细分从10提高到12到16之间基本能解决。只要把数据缓冲、插值平滑、性能优化这三层做好连续波动线条的体验就不会差。本文还有配套的精品资源点击获取