CocosCreator塔防

塔防（TowerDefence）

场景搭建

设置CocosCreator布局为经典布局

规范项目资源目录结构

目录	描述
scene	场景目录
script	脚本目录
texture	纹理目录
anim	动画片段

保存当前场景到scene目录下并命名为game.fire

将游戏资源拖拽到texture目录下

• 搭建游戏场景
• 游戏场景中创建路径导航

将地图纹理拖拽到Canvas渲染节点上释放后会在画布节点下生成新的地图节点，修改画布节点的设计分辨率为地图自身的宽高。

创建地图

设置主角hero节点，在其下创建单色渲染精灵节点，并命名为blood血条，调整血条的背景色为红色。设置blood`血条的宽高尺寸为30x3。

在blodd节点下创建子节点，即选择创建节点中的创建渲染下选中Sprite单色节点，同时命名为value。设置value节点中Sprite属性中的Type为FIELD，同时设置Fill Range为1。

制作敌人

制作敌人与血条

制作角色与血条.gif

制作路径

使用动画编辑器创建补间动画完成路径的绘制

制作路径.gif

补间动画

使用自定义的组件类从补间动画中获取所有节点的坐标

贝塞尔曲线

贝塞尔曲线是应用于2D图形的数学曲线，该曲线的定义由4个点组成，分别是起始点p0，终止点p3（又称为锚点），以及两个相互分离的中间点控制点p1和p2。

• p0 起始点
• p1 中间控制点1
• p2 中间控制点2
• p3 终止点

贝塞尔曲线

创建path.js用户脚本组件，用于将路径动画片段中的贝塞尔曲线转化为坐标点。

$ vim /assets/script/path.js

cc.Class({
    extends: cc.Component,
    properties: {
        debug:true
    },
    onLoad () {
        //获取当前节点上的动画组件
        this.anim = this.node.getComponent(cc.Animation);
        //获取动画片段
        const clips = this.anim.getClips();
        //获取当前片段
        const clip = clips[0];

        //获取贝塞尔曲线路径
        this.pathdata = [];
        const paths = clip.curveData.paths;
        for(let k in paths){
            const frames = paths[k].props.position;
            this.genPathData(frames);
        }

        //根据调试模式绘制节点
        if(this.debug){
            //添加绘图组件
            this.graphics = this.node.addComponent(cc.Graphics);
            this.graphics.fillColor = cc.color(255, 0, 0, 255);
            this.graphic();
        }
    },
    graphic(){
        this.graphics.clear();
        for(let i=0; i<this.pathdata.length; i++){
            const path = this.pathdata[i];
            for(let j=0; j<path.length; j++){
                const node = path[j];
                this.graphics.moveTo(node.x - 1, node.y + 1);
                this.graphics.lineTo(node.x -1, node.y - 1);
                this.graphics.lineTo(node.x + 1, node.y - 1);
                this.graphics.lineTo(node.x + 1, node.y + 1);
                this.graphics.close();//封闭路径
            }
        }
        this.graphics.fill();//填充
    },
    genPathData(frames){
        let bezier = [];
        //贝塞尔曲线定义四个点：起点、终点、两个相互分离中间控制点点 [begin, ctrl1, ctrl2, end]
        let begin = null, ctrl1 = null, ctrl2 = null, end = null;
        //遍历关键帧获取贝塞尔曲线
        for(let i=0; i<frames.length; i++){
            const frame = frames[i];
            //获取控制起点
            if(ctrl1 !== null){
                bezier.push([begin, ctrl1, ctrl1, cc.v2(frame.value[0], frame.value[1])]);
            }
            //获取起点坐标
            begin = cc.v2(frame.value[0], frame.value[1]);
            //获取关键帧的运动路径
            const motionPath = frame.motionPath;
            //遍历关键帧运动路径获取贝塞尔曲线的四个点
            for(let j=0; j<motionPath.length; j++){
                const item = motionPath[j];
                //获取终点
                end = cc.v2(item[0], item[1]);
                //获取控制终点
                ctrl2 = cc.v2(item[2], item[3]);
                //判断控制起点是否为空
                if(ctrl1 === null){
                    ctrl1 = ctrl2;
                }
                //添加贝塞尔曲线中各点坐标
                bezier.push([begin, ctrl1, ctrl2, end]);
                //获取控制起点
                ctrl1 = cc.v2(item[4], item[5]);
                //设置下一个节点的起点为上一个节点的终点
                begin = end;
            }
        }
        //将贝塞尔曲线转换为坐标点
        const first = bezier[0][0];//获取起始点坐标
        let data = [first];
        for(let k=0; k<bezier.length; k++){
            const item = bezier[k];
            begin = item[0];
            ctrl1 = item[1];
            ctrl2 = item[2];
            end = item[3];
            //使用微元法获取曲线长度
            const length = this.getBezierLength(begin, ctrl1, ctrl2, end);
            //将每一段贝塞尔曲线转化为16个坐标点
            const count = Math.floor(length / 16);
            const delta = 1 / count;
            let t = delta;
            for(let m=0; m<count; m++){
                const x = begin.x * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.x * t * (1 - t) * (1 - t) + 3 * ctrl2.x * t * t * (1 - t) + end.x * t * t * t;
                const y = begin.y * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.y * t * (1 - t) * (1 - t) + 3 * ctrl2.y * t * t * (1 - t) + end.y * t * t * t;
                data.push(cc.v2(x, y));
                t += delta;
            }
        }
        this.pathdata.push(data);
    },
    //获取贝塞尔曲线节点 t [0, 1] t 分成20等分 1 / 20 = 0.05
    getBezierLength(begin, ctrl1, ctrl2, end) {
        const count = 20;
        const delta = 1 / count;
        //贝塞尔插值
        let length = 0;
        let prev = begin;
        let t = delta;
        for (let i = 0; i < count; i++) {
            let x = begin.x * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.x * t * (1 - t) * (1 - t) + 3 * ctrl2.x * t * t * (1 - t) + end.x * t * t * t;
            let y = begin.y * (1 - t) * (1 - t) * (1 - t) + 3 * ctrl1.y * t * (1 - t) * (1 - t) + 3 * ctrl2.y * t * t * (1 - t) + end.y * t * t * t;
            let point = cc.v2(x, y);
            
            let dir = point.sub(prev);
            prev = point;
            length += dir.mag();
            
            t += delta;
        }
        
        return length;
    },
    getPathData(){
        return this.pathdata;
    }
});

为path路径节点添加自定义的用户脚本组件path.js

设置脚本组件

预览观察调试模式下路径

路径

敌人导航

控制敌人沿着路径移动

$ vim assts/script/enemy.js

/**控制敌人按照路径导航移动 */
const Path = require("./path");
cc.Class({
    extends: cc.Component,
    properties: {
        path:{type:Path, default:null, tooltip:"路径组件"},
    },
    pause(){
        this.walking = false;
    },
    reset(){
        this.walking = true;
    },
    //读取配置文件获取初始化变量
    initConfig(config){
        this.config = config;
        this.speed = config.speed;
        this.index = config.index;//路径索引
    },
    start(){
        this.walking = false;
        //读取配置初始化参数
        this.initConfig({speed:200, min_blood:100, max_blood:1000, index:0});
        //生成路径节点坐标
        this.getPath(this.index);
        //设置敌人验证路径节点移动
        this.walk();
        //行走中的暂停,5秒内走2秒暂停3秒
        this.scheduleOnce(this.pause.bind(this), 3);//3秒后暂停
        this.scheduleOnce(this.reset.bind(this), 5);//移动5秒
    },
    //生成路径节点
    getPath(index){
        //获取目标路径节点的集合
        const pathdata = this.path.getPathData();
        if(index < 0 || index >= pathdata.length){
            return;
        }
        this.pathnode = pathdata[index];
        //cc.log("pathnode", this.pathnode);
    },
    //设置敌人验证路径节点移动
    walk(){
        if(this.pathnode.length < 2){
            return;
        }
        //设置敌人移动到起点位置
        this.node.setPosition(this.pathnode[0].x, this.pathnode[0].y);
        //记录下一步
        this.next = 1;
        //从当前点移动到下一点
        this.walkToNext();
    },
    //从当前点移动到下一步
    walkToNext(){
        //是否走到最后一点
        if(this.next > this.pathnode.length){
            this.walking = false;
            return;
        }
        //获取起点和终点
        const src = this.node.getPosition();
        const dst = this.pathnode[this.next];
        if(dst == undefined){
            return;
        }
        //获取起始点和终止点之间的方向向量
        const dir = dst.sub(src);
        //计算向量长度,取模
        const distance = dir.mag();
        //判断长度是否超出
        if(distance <= 0){
            this.next ++;
            this.walkToNext();//跳入下一步
            return;
        }
        //将速度分解
        this.vx = this.speed * dir.x / distance;
        this.vy = this.speed * dir.y / distance;
        //计算从起点移动到终点所需要耗费的时间长度
        this.walktime = distance / this.speed;

        //定义定时器用于判断行走过程中的累加时间是否大于总消耗时间
        this.timer = 0;

        //设置行走状态
        this.walking = true;
    },
    //敌人移动 dt是每次更新的时间间隔
    update(dt){
        if(!this.walking){
            return;
        }
        //累加时间
        this.timer += dt;
        //重新设置当前节点的坐标
        if(this.timer >= this.walktime){
            dt -= (this.timer - this.walktime);
        }
        this.node.x += this.vx * dt;
        this.node.y += this.vy * dt;
        //判断计时器时间进入下一步
        if(this.timer >= this.walktime){
            this.next ++;
            this.walkToNext();
        }
    }
});

添加脚本组件