CocosCreator自制贝塞尔曲线工具

在做游戏的时候，时常会遇到一些动画需要通过贝塞尔曲线来完成，于是打算做一个小工具便于以后快速的制作Bezier曲线

功能：
1.可视化，便于调节参数，可以在编辑器环境显示出曲线
2.易用，开箱即用，Bezier预制体可以随便的拖，不依赖任何层级节点父节点，总之就是随便，所见即所得
3.随机，随机生成控制点c1和c2，算法是根据起点和终点确定一条直线，找到c1的镜像点mc1，然后在c1和mc1的线段上随机找到一个点作为随机的控制点c1

延申：
可以在这个基础上，在结合自定义的prefab，做出各种飞行特效
1.从A点爆出大量金币，随机飞到B点，金币自身旋转可以通过prefab控制
2.飞行类游戏射出的随机子弹
3.可以改进成多个控制点，绘制出更复杂的曲线
4.可以用来做捕鱼游戏的鱼游动轨迹生成器

所见即所得展示：

随机轨迹展示：

Demo地址：
https://github.com/wuyutaott/beziertools.git

补充C在AB向量上的镜像点D的求法

// 已知AB构成一个向量，求点C在AB上的投影向量
let A = this.A.position;                   // A点坐标
let B = this.B.position;                   // B点坐标
let C = this.C.position;                   // C点坐标
let AB = B.sub(A);                         // AB向量
let AC = C.sub(A);                         // AC向量
let NAB = AB.normalize();                  // AB单位向量
let NAC = AC.normalize();                  // AC单位向量
let cT = NAB.dot(NAC);                      // cosθ，通过向量点乘得到
let tyLen = AC.len() * cT;                  // AC在AB上的投影长度 = AC的长度 * cosθ
let AE = AB.normalize().mul(tyLen);         // AB单位向量 * 投影长度 = 投影向量
// 已知投影向量AE求E点的世界坐标
let E = A.add(AE);                          // E点的世界坐标
// 已知ABC三个点，和C在AB上的投影点E，求C在向量AB上的镜像点D
// 思路向量CE扩大2倍之后的向量CE2，向量C+CE2=D
let CE = E.sub(C);                         // CE向量
let CE2 = CE.mul(2);                       // 将CE向量扩大2倍
// 求出D点的世界坐标
let D = C.add(CE2);                        // 得到D的世界坐标

CocosCreator自制贝塞尔曲线工具相关推荐

贝塞尔曲线工具css,如何反转CSS中的贝塞尔曲线的实现方法
首先来看一看我之前写的一个CSS轮播动画效果,为了让切换时动画的过渡更加的平滑我在animation-timing-function属性中并没有使用CSS提供的各种关键词,而使用了cubic-bezi ...
贝塞尔曲线工具css,贝塞尔曲线以及css动画 | Soo Smart!
参考文档:http://www.cnblogs.com/dolphinX/p/4087817.html CSS3的动画:http://www.w3school.com.cn/css3/css3_ani ...
mysql 工具图形学_[计算机图形学]贝塞尔曲线
一. 贝塞尔曲线简介摘抄自某度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线. 一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与 ...
教你直白的理解贝塞尔曲线???
序言这是第一篇在掘金写的文章,写的不对的或者不好的地方希望友人能够指出便于修改与其他人分享. =.= 实在不善于表达啊阿西吧... 一.什么是贝塞尔曲线? (百度百科你就知道) 贝塞尔曲线(Béz ...
WPF将点列连接成光滑曲线——贝塞尔曲线
背景最近在写一个游戏场景编辑器,虽然很水,但是还是遇到了不少问题.连接离散个点列成为光滑曲线就是一个问题.主要是为了通过关键点产生2D的赛道场景.总之马路不可能是直线相连的,当然需要曲线光滑相连.现 ...
Unity之使用贝塞尔曲线制作图片轮播
一.效果图 1.效果1 2.效果2 二.贝塞尔曲线关于贝塞尔曲线的学习大家可以看这个文章进行学习https://blog.csdn.net/qq_39162826/article/details/1 ...
贝塞尔曲线（Bezier Curve）原理及公式推导
1. 定义贝塞尔曲线(Bezier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点, ...
对贝塞尔曲线的完全诠释！高手必备！
对贝塞尔曲线的完全诠释!高手必备! 关键词: 贝塞尔曲线 "贝塞尔工具" 是所有绘图类软件中最为重要的工具之一."贝塞尔工具"可以创建比手绘工具更为精确的直线和 ...
过三点的二次贝塞尔曲线及其升阶
贝塞尔曲线(Bézier curve)是计算机图形学中相当重要的参数曲线,Photoshop 中的钢笔效果,Flash5 的贝塞尔曲线工具都是它在计算机图形学中的具体应用. 贝塞尔曲线由法国雷诺汽车公 ...

CocosCreator自制贝塞尔曲线工具

CocosCreator自制贝塞尔曲线工具相关推荐

最新文章

热门文章