cocos creator动画编辑器编辑地图路径

思路

1、利用动画编辑器，设置一个路径，多个路径就编辑多个动画

2、用特定的代码对动画进行处理，获取到路径坐标，大佬已经写好代码， 不用自己重复造轮子了（微元法求曲线长度）

　　获得动画路径的贝塞尔曲线方程

　　求得每一段贝塞尔曲线的长度

　　每隔一小段打一个点

　　最终生成一个路径

3、编写寻路脚本，挂载到物体上，让沿着路径移动

动画编辑

脚本挂载



// gen_map_path.js 动画路径转换坐标的代码 已经升级到2.x

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        is_debug: false,

    },

    // use this for initialization

    onLoad: function() {

        this.anim_com = this.node.getComponent(cc.Animation);

        var clips = this.anim_com.getClips();

        var clip = clips[0];

        var newNode = new cc.Node();

        this.new_draw_node = newNode.getComponent(cc.Graphics);

        if (!this.new_draw_node) {

            this.new_draw_node = this.node.addComponent(cc.Graphics);

        }

        this.node.addChild(newNode);

        // this.draw_node = new cc.DrawNode();

        // this.node._sgNode.addChild(this.draw_node);

        var paths = clip.curveData.paths;

        // console.log(paths);

        this.road_data_set = [];

        var k;

        for (k in paths) {

            var road_data = paths[k].props.position;

            this.gen_path_data(road_data);

        }

    },

    start: function() {

        /*

        // test()

        var actor = cc.find("UI_ROOT/map_root/ememy_gorilla").getComponent("actor");

        // actor.gen_at_road(this.road_data_set[0]);


        actor = cc.find("UI_ROOT/map_root/ememy_small2").getComponent("actor");

        // actor.gen_at_road(this.road_data_set[1]);


        actor = cc.find("UI_ROOT/map_root/ememy_small3").getComponent("actor");

        actor.gen_at_road(this.road_data_set[2]);

        */

        // end 

    },

    get_road_set: function() {

        return this.road_data_set;

    },

    gen_path_data: function(road_data) {

        var ctrl1 = null;

        var start_point = null;

        var end_point = null;

        var ctrl2 = null;

        var road_curve_path = []; // [start_point, ctrl1, ctrl2, end_point],

        for (var i = 0; i < road_data.length; i++) {

            var key_frame = road_data[i];

            if (ctrl1 !== null) {

                road_curve_path.push([start_point, ctrl1, ctrl1, cc.p(key_frame.value[0], key_frame.value[1])]);

            }

            start_point = cc.p(key_frame.value[0], key_frame.value[1]);

            for (var j = 0; j < key_frame.motionPath.length; j++) {

                var end_point = cc.p(key_frame.motionPath[j][0], key_frame.motionPath[j][1]);

                ctrl2 = cc.p(key_frame.motionPath[j][2], key_frame.motionPath[j][3]);

                if (ctrl1 === null) {

                    ctrl1 = ctrl2;

                }

                // 贝塞尔曲线 start_point, ctrl1, ctrl2, end_point,

                road_curve_path.push([start_point, ctrl1, ctrl2, end_point]);

                ctrl1 = cc.p(key_frame.motionPath[j][4], key_frame.motionPath[j][5]);

                start_point = end_point;

            }

        }

        console.log(road_curve_path);

        var one_road = [road_curve_path[0][0]];

        for (var index = 0; index < road_curve_path.length; index++) {

            start_point = road_curve_path[index][0];

            ctrl1 = road_curve_path[index][1];

            ctrl2 = road_curve_path[index][2];

            end_point = road_curve_path[index][3];

            var len = this.bezier_length(start_point, ctrl1, ctrl2, end_point);

            var OFFSET = 16;

            var count = len / OFFSET;

            count = Math.floor(count);

            var t_delta = 1 / count;

            var t = t_delta;

            for (var i = 0; i < count; i++) {

                var x = start_point.x * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.x * t * (1 - t) * (1 - t) + 3 * ctrl2.x * t * t * (1 - t) + end_point.x * t * t * t;

                var y = start_point.y * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.y * t * (1 - t) * (1 - t) + 3 * ctrl2.y * t * t * (1 - t) + end_point.y * t * t * t;

                one_road.push(cc.p(x, y));

                t += t_delta;

            }

        }

        console.log(one_road);

        if (this.is_debug) {

            this.new_draw_node.clear(); // 清除以前的

            for (var i = 0; i < one_road.length; i++) {

                this.new_draw_node.moveTo(one_road[i].x, one_road[i].y);

                this.new_draw_node.lineTo(one_road[i].x + 1, one_road[i].y + 1);

                this.new_draw_node.stroke();

                // this.draw_node.drawSegment(one_road[i],

                //     cc.p(one_road[i].x + 1, one_road[i].y + 1),

                //     1, cc.color(255, 0, 0, 255));

            }

        }

        this.road_data_set.push(one_road);

    },

    bezier_length: function(start_point, ctrl1, ctrl2, end_point) {

            // t [0, 1] t 分成20等分 1 / 20 = 0.05

            var prev_point = start_point;

            var length = 0;

            var t = 0.05;

            for (var i = 0; i < 20; i++) {

                var x = start_point.x * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.x * t * (1 - t) * (1 - t) + 3 * ctrl2.x * t * t * (1 - t) + end_point.x * t * t * t;

                var y = start_point.y * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.y * t * (1 - t) * (1 - t) + 3 * ctrl2.y * t * t * (1 - t) + end_point.y * t * t * t;

                var now_point = cc.p(x, y);

                var dir = now_point.sub(prev_point);

                prev_point = now_point;

                length += dir.mag();

                t += 0.05;

            }

            return length;

        }

        // called every frame, uncomment this function to activate update callback

        // update: function (dt) {

    // },

});

// actor.js 角色沿路径行走代码

var gen_map_path = require("gen_map_path");

var State = {

    Idle: 0,

    Walk: 1,

    Attack: 2,

    Dead: 3,

};

cc.Class({

    extends: cc.Component,

    properties: {

        // foo: {

        //    default: null,      // The default value will be used only when the component attaching

        //                           to a node for the first time

        //    url: cc.Texture2D,  // optional, default is typeof default

        //    serializable: true, // optional, default is true

        //    visible: true,      // optional, default is true

        //    displayName: 'Foo', // optional

        //    readonly: false,    // optional, default is false

        // },

        // ...

        map: {

            type: gen_map_path,

            default: null,

        },

        speed: 100,

    },

    // use this for initialization

    onLoad: function() {

    },

    start: function() {

        var road_set = this.map.get_road_set();

        this.cur_road = road_set[0];

        if (this.cur_road < 2) {

            return;

        }

        this.state = State.Idle;

        var pos = this.cur_road[0];

        this.node.setPosition(pos);

        this.walk_to_next = 1;

        this.start_walk();

    },

    start_walk: function() {

        if (this.walk_to_next >= this.cur_road.length) {

            // 攻击逻辑

            this.state = State.Attack;

            // 

            return;

        }

        var src = this.node.getPosition();

        var dst = this.cur_road[this.walk_to_next];

        var dir = dst.sub(src);

        var len = dir.mag();

        this.vx = this.speed * dir.x / len;

        this.vy = this.speed * dir.y / len;

        this.walk_total_time = len / this.speed;

        this.walked_time = 0;

        this.state = State.Walk;

    },

    walk_update: function(dt) {

        if (this.state != State.Walk) {

            return;

        }

        this.walked_time += dt;

        if (this.walked_time > this.walk_total_time) {

            dt -= (this.walked_time - this.walk_total_time);

        }

        var sx = this.vx * dt;

        var sy = this.vy * dt;

        this.node.x += sx;

        this.node.y += sy;

        if (this.walked_time >= this.walk_total_time) {

            this.walk_to_next++;

            this.start_walk();

        }

    },

    // called every frame, uncomment this function to activate update callback

    update: function(dt) {

        if (this.state == State.Walk) {

            this.walk_update(dt);

        }

    },

});点击链接加入群聊【cocos/unity交流群】

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,928评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,192评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,468评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,186评论 1赞 286
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,295评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,374评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,403评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,186评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,610评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,755评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,393评论 3赞 320
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2赞 351

推荐阅读更多精彩内容