Bezier曲线插件(支持可视化编辑、匀速、缓动、多曲线运行)

自己用业余时间写的第一款小插件,希望各位能多多捧场,嘿嘿。

Bezier插件链接

Bezier曲线插件说明

Bezier曲线是一款方便开发者做路径规划以及曲线运动的插件,支持可视化编辑、匀速曲线运动、支持各种缓动(InSine、OutSine等等)、支持多段曲线运动、绘制路径。方便开发者在项目组快速的实现曲线运动,不再为贝塞尔曲线不能匀速而烦恼。

注意:该插件仅支持Creator 2.2.0 - 2.4.4 版本,其他版本的需要手动拷贝 Packages/bezier/Bezier 文件夹到项目中,并且需要微调一下代码才能使用(非常简单,例如1.x.x 版本的仅需把cc.Vec3 类型改为cc.Vec2; 2.4.5版本的只需手动拷贝文件就行了)

Bezier曲线插件使用教程

1.导入组件:

2.添加组件:

添加组件的方式主要有两种:
1.选中节点,点击鼠标右键,点击 “添加Bezier组件”。
2.在inspector面板,点击添加组件,选择“Bezier”

3.编辑曲线

4.运行曲线

5.缓动动画

6.多段曲线

7.暂停与恢复

BezierCurve组件:

可以在代码中通过API直接调用组件的方法实现播放、暂停、恢复、停止等操作。

例如:

let bezierCurve = this.player.getComponent(BezierCurve)
if (bezierCurve) {
    // 播放
    bezierCurve.Play()
    // 暂停
    bezierCurve.Pause()
    // 恢复
    bezierCurve.Resume()
    // 停止
    bezierCurve.Stop()
}

BezierCurve组件API:

export class BezierCurve{
    /**
     * 添加曲线
     * @param curve 曲线
     */
    public AddCurve(curve: Curve) : void

    /**
    * 删除曲线
    * @param curve 曲线
    */
    public DeleteCurve(curve: Curve): void;
    /**
     * 删除曲线
     * @param index 索引
     */
    public DeleteCurve(index: number): void;

    /**
     * 设置完成回调
     * @param callBack 回调
     */
    public void SetCompleteCallBack(callBack?: () => void) : void

    /**
     * 播放
     */
    public Play(): void 

     /**
     * 停止
     */
    public Stop(): void

    /**
     * 暂停
     */
    public Pause(): void 

    /**
     * 恢复
     */
    public Resume(): void
}


Bezier类:

如果我们不想在每个node 上都挂载`BezierCurve组件`怎么办? 此时我们也可以通过`Bezier`类来快速简单的实现曲线运动。

代码如下:


//  Example1:

// 曲线控制点
let posArr = [new cc.Vec3(-400, 0, 0), new cc.Vec3(0, 500, 0), new cc.Vec3(400, 0, 0)]
// 移动(返回一个Bezier对象, 通过该对象可以暂停、恢复、停止)
let bezier = Bezier.Move(this.player, posArr, 2, EaseType.Linear,  () => {
        console.log("play complete")
    })

// 暂停
bezier.Pause()
// 恢复
bezier.Resume()
// 停止
bezier.Stop()


//  Example2: 也可以自己构建一个Curve对象
let curve = new Curve();
curve.duration = 1
curve.points = [new cc.Vec3(-400, 0, 0), new cc.Vec3(0, 500, 0), new cc.Vec3(400, 0, 0)]
curve.ease = EaseType.Constant
let bezier = Bezier.Move(this.playerB,curve);
...

// Example3: 移动多个曲线(每个曲线都拥有自己独立的duration和ease)
let curve1 = new Curve();
curve1.duration = 1
curve1.points = [new cc.Vec3(-400, 0, 0), new cc.Vec3(0, 500, 0), new cc.Vec3(400, 0, 0)]
curve1.ease = EaseType.Constant

let curve2 = new Curve();
curve2.duration = 1
curve2.points = [new cc.Vec3(400, 0, 0), new cc.Vec3(0, -500, 0), new cc.Vec3(-400, 0, 0)]
curve2.ease = EaseType.Constant

Bezier.MoveQuenue(this.playerB,[curve1,curve2]);

// Example4: 移动多个曲线(所有曲线都共享同一个duration和ease)
let curve1 = new Curve();
curve1.points = [new cc.Vec3(-400, 0, 0), new cc.Vec3(0, 500, 0), new cc.Vec3(400, 0, 0)]

let curve2 = new Curve();
curve2.points = [new cc.Vec3(-400, 0, 0), new cc.Vec3(0, 500, 0), new cc.Vec3(400, 0, 0)]

Bezier.MoveList(this.playerB,[curve1,curve2],2,EaseType.Linear);

Bezier API:

export class BezierCurve{
    /**
     * Bezier曲线移动
     * @param target 目标节点
     * @param points 控制点
     * @param duration 持续时长
     * @param ease 缓动
     * @param callBack 完成回调
     * @returns Bezier
     */
    public static Move(target: cc.Node, points: cc.Vec3[], duration: number, ease?: EaseType, callBack?: () => void): Bezier;
    /**
     * Bezier曲线移动
     * @param target 目标节点
     * @param curve 曲线对象
     * @param callBack 完成回调
     */
    public static Move(target: cc.Node, curve: Curve, callBack?: () => void): Bezier;

    
    /**
     * 移动队列, 需要传入一个曲线列表, 顺序执行每个曲线。每个曲线的duration(生命周期)和ease(缓动)都是独立的
     * @param target 目标节点
     * @param curveList 曲线列表
     * @param callBack 回调
     * @returns Bezier
     */
    public static MoveQuenue(target: cc.Node, curveList: Curve[], callBack = () => { }): Bezier 


    /**
     * 曲线列表整体以ease缓动移动,共享duration(生命周期),ease(缓动)。
     * @param target 目标节点
     * @param curveList 曲线列表
     * @param duration 生命周期
     * @param ease 缓动
     * @param callBack 回调
     * @returns Bezier
     */
    public static MoveList(target: cc.Node, curveList: Curve[], duration: number, ease: EaseType = EaseType.Linear, callBack = () => { }): Bezier
}
30赞

坐个沙发,mark

哇,好厉害 :6:

需要匀速的话,缓动类型选择 Constant 即可。而且匀速比较特殊,可以设置曲线 smoothness smoothness 值越高,曲线越平滑,计算量越大。 具体取值多少,需要自己根据项目情况平衡,默认值200

666 mark

看起来很牛,先战术插眼

你确定“插件连接”没毛病?

很赞啊!!!

厉害 :grinning:

是我眼花了嘛,架上哪有插件

-.- 不好意思,给错了。。https://store.cocos.com/app/detail/2681

-.- 不好意思,这个。。https://store.cocos.com/app/detail/2681

6666 666!

mark!!!

:2: :2:

版本更新:
版本号:v1.0.1
更新时间:2021.05.29
更新内容:1. 修复了编译成js文件后,Move方法执行失败bug

1赞

已经升级到 “version”: "1.0.1"了,导出web-mobile还是不行啊,不仅没有绘制出线条,而且物体也不沿着路径移动了。我的cocoscreator是2.4.0版本的

调试看看什么情况,进Move函数里面,应该是哪儿return了。我晚上回去看看什么情况

该问题修复了,更新到1.0.2版本

ok,感谢感谢作者大大不辞辛劳,太棒了,我看了那个Bezier.Move()函数,还是没看出来,能透露下是啥问题嘛,哈哈哈。估计说了我也不太懂!