CocosCreator - Bezier曲线插件

2021-05-19 13:03:10 阅读：244 来源： 互联网

标签：插件曲线 cc Bezier param CocosCreator Vec3 new

自己用业余时间写的第一款CocosCreator小插件。

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”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-09WzJWfu-1621399961675)(https://i.loli.net/2021/04/24/5oHUk92fGgPQrwF.gif)]

3.编辑曲线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9fiJM1w-1621399961677)(https://i.loli.net/2021/05/03/2vceKfSHNG5Wm61.gif)]

4.运行曲线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Knh3Jcru-1621399961680)(https://i.loli.net/2021/05/03/bDYrk5ZzNOt6nIR.gif)]

5.缓动动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVmhYquK-1621399961683)(https://i.loli.net/2021/05/03/Io6ArRxJz8Yi43O.gif)]

6.多段曲线

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVBS8Ql5-1621399961684)(https://i.loli.net/2021/05/03/5LvEOcuZj8FTdn4.gif)]

7.暂停与恢复

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5eHpbDSp-1621399961685)(https://i.loli.net/2021/05/09/CtcBL1PO8usgJn4.gif)]

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
}

标签：插件,曲线,cc,Bezier,param,CocosCreator,Vec3,new
来源： https://blog.csdn.net/qq_28299311/article/details/117024575

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9