画线纹理之连接优化

对转角处加一层处理，就可以更加平滑了。。。。

先看看效果。

在 画线纹理的一种简单实现！ 中介绍了可以使用 Sprite 渲染模式 Mesh 和 cc.Graphics ，实现画线纹理。

不过在连接处存在缝隙。

那么怎么处理这个缝隙呢？

只需要在连接点画一个圆，这样缝隙就能去掉了。

那么怎么画圆呢？可以把圆看成是正多边形，根据半径和圆心的关系，可以确认位置坐标。可参考 shader 动画之 loading 特效!这篇文章。

半径刚好就是画线宽度的一半，某个圆上的坐标转成代码如下。

// 角度
const r = 2 * Math.PI * index3 / count;
// 先算方向向量，再加上圆心坐标就是，圆上的点。
const pos_circle = cc.v2(w / 2 * Math.cos(r), w / 2 * Math.sin(r)).addSelf(p);

怎么确定顶点索引呢？

其实可以按照圆心走，画一个个三角形就行了。

当然这是其中一种索引方式，转成代码如下。

//画圆
const count = 12;
i_offset = vertices.x.length;
vertices.x.push(p.x);
vertices.y.push(p.y);
vertices.nu.push(p.x / uv_mul);
vertices.nv.push(p.y / uv_mul);
for (let index3 = 0; index3 < count; index3++) {
    const r = 2 * Math.PI * index3 / count;
    const pos_circle = cc.v2(w / 2 * Math.cos(r), w / 2 * Math.sin(r)).addSelf(p);
    vertices.x.push(pos_circle.x);
    vertices.y.push(pos_circle.y);
    vertices.nu.push(pos_circle.x / uv_mul);
    vertices.nv.push(pos_circle.y / uv_mul);
    if (index3 === 0) {
        // 0 - count -1
        vertices.triangles.push(i_offset, i_offset + 1 + index3, i_offset + count);
    } else {
        // 0 - index3 - (index3-1)
        vertices.triangles.push(i_offset, i_offset + 1 + index3, i_offset + index3);
    }
}

以上只是实现简单画线纹理的效果，如果要实现绳子这种效果，那就需要重新计算纹理坐标，和位置/方向/长度等有关系。

这个暂时还没想好，留给大家讨论吧哈哈～

以上为白玉无冰使用 Cocos Creator v2.3.3 关于 "画线纹理之连接优化！" 的技术分享。如果对你有点帮助，欢迎分享给身边的朋友。

可能有些小伙伴对顶点索引等概念不太清楚，这边推荐一个学习网站，带你更好理解这些概念。

https://webglfundamentals.org/

预告

文字/图片渐变色的实现，关注【白玉无冰】获取最新进展～

更多精彩

转载请保留文末二维码和完整代码获取方式！

完整代码(详见readme): 

https://github.com/baiyuwubing

点击“阅读原文”查看精选导航

“在看”是最大的鼓励▼