今天发现一个比较有用的东西看了一下其他人的博客中有这样一个东西
这个其实在以前开发捕鱼时就有涉及到过只是不是这样生成的路径，较为麻烦，突然想到如果以后在要自定义路径的话这个应该较为有用，嗯，所以就前来试试
首先
建立一个空节点，添加一个sprite节点
在map中添加动画组件，绘图组件
思路
使用动画编辑器对map下的person节点进行position属性进行动画编辑
使用动画片段中position属性（如下图）
这里就是每个点位的基础数据，解析每一个点位信息，进行逐片段化
//文件可以生成将动画中的路径，打点分割生成多段点数据
cc.Class({
extends: cc.Component,
properties: {
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];
this.new_draw_node = this.node.getComponent(cc.Graphics);
//如果没有绘图组件，添加一个以供显示
if (!this.new_draw_node) {
this.new_draw_node = this.node.addComponent(cc.Graphics);
}
var paths = clip.curveData.paths;
this.road_data_set = [];
var k;
for (k in paths) {
var road_data = paths[k].props.position;
//处理所有的关键帧点位置数据
this.gen_path_data(road_data);
}
},
//获取路径数据
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]----起点，杆1，杆2，终点
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 = 20;
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++) {
cc.log("one_road[i].x===",one_road[i].x," one_road[i].y====",one_road[i].y)
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.road_data_set.push(one_road);
var content = JSON.stringify(this.road_data_set);
},
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;
}
});
有了点位信息，使用绘图组件进行绘制点位，如图
下面测试一下这些点位，让person节点在点位上移动
var gen_map_path = require(“Road”);
var State = {
Idle: 0,
Walk: 1,
Attack: 2,
};
cc.Class({
extends: cc.Component,
properties: {
map: {
type: gen_map_path,
default: null,
},
speed: 50,
},
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();
}
},
update: function(dt) {
if (this.state == State.Walk) {
this.walk_update(dt);
}
},
});
当然也可以保存点位信息，到你想要的文件中去。如json文件
个人博客taoqy666.com-http://www.taoqy666.com/find/409023204.html