专栏首页白玉无冰画线纹理之连接优化

画线纹理之连接优化

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

先看看效果。

画线纹理的一种简单实现! 中介绍了可以使用 Sprite 渲染模式 Meshcc.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/

本文分享自微信公众号 - 白玉无冰(lamyoung-com),作者:lamyoung

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 画线纹理之绳子!

    这次的纹理是使用 Sprite 组件的渲染模式 Mesh ,前文 初探精灵中的网格渲染模式 ! 介绍了这个用法。

    白玉无冰
  • 欢乐水杯(happy glass)的流体实现! Cocos Creator!

    整体思路是参考论坛中的一个帖子。(链接:https://forum.cocos.org/t/happy-glass/72468 )

    白玉无冰
  • 遇到的坑 | 物理刚体挖洞新方案

    前一篇物理刚体挖洞!另一种实现!的整体思路是,先用 Clipper 去计算多边形,接着用 poly2tri 将多边形分割成多个三角形,最后用多边形刚体填充。

    白玉无冰
  • 老板让你抗住千万级流量,如何做架构设计?

    随着互联网的发展,各项软件的客户量日益增多,当客户量达到一定峰值时,当数以万计的流量来临时,程序的顺利运行以及即时响应则显得尤为重要,就像双11那天的淘宝一样。...

    Java技术栈
  • 老板让你抗住千万级流量,如何做架构设计?

    随着互联网的发展,各项软件的客户量日益增多,当客户量达到一定峰值时,当数以万计的流量来临时,程序的顺利运行以及即时响应则显得尤为重要,就像双11那天的淘宝一样。...

    lyb-geek
  • Photoshop保存ICO格式插件 ICOFormat.8bi

    Photoshop 一直不支持导入导出ico格式图标文件,不过还好有一款插件可以让photoshop支持打开和保存 ico 图标格式,这款插件就是 ICOFor...

    德顺
  • redis web查询工具

    1、默认不带登录鉴权功能(改进:在前面接一道nginx或者其它支持统一登录的工具)

    二狗不要跑
  • spring boot 项目如何在 linux 上部署启动?

    待完善。以下方法基于:CentOS Linux release 7.2.1511 (Core) 1打包部署,在spring boot 项目中 添加打包插件依...

    爱明依
  • 如何选择正确的Node框架:Express,Koa还是Hapi?

    Node.js是10年前首次推出的,目前它已经成为世界上最大的开源项目,在GitHub上有+59,000颗星,下载次数超过10亿。流行度快速增长的部分原因是No...

    Fundebug
  • 数据结构与算法(二)-线性表之单链表顺序存储和链式存储

    前言:前面已经介绍过数据结构和算法的基本概念,下面就开始总结一下数据结构中逻辑结构下的分支——线性结构线性表

扫码关注云+社区

领取腾讯云代金券