CocosCreator之KUOKUO带你做个RTS（二）让坦克动起来！

本次引擎2.0.9

目标

RTS中选中的单位移动

实现

cc.graphics实现小箭头
runAction运动到点

最终效果

单选

多选

如何实现？

坦克脚本中加入移动到点的方法

cc.Class({
    extends: cc.Component,

    properties: {
        // 光圈节点绘图组件
        ctx : cc.Graphics,
        // 是否被控制
        isCtrl : false,
        // 转一周的时间
        rotateTime : 2,
        // 移动速度
        speed : 100
    },

    // 显示光圈
    showSign () {
        this.isCtrl = true;
        this.ctx.circle(0,0,20);
        this.ctx.stroke();
    },

    // 关闭光圈
    closeSign () {
        this.isCtrl = false;
        this.ctx.clear();
    },

    // 移动到点，角度要进行计算处理
    moveToPos (pos) {
        // 先停止所以动作
        this.node.stopAllActions();
        // 计算角度以及距离
        let rad = Math.atan2(pos.y - this.node.y, pos.x - this.node.x);
        let ang = cc.misc.radiansToDegrees(rad);
        // 真实旋转度
        let rotation = 0;
        if (ang >= -180 && ang <= 90) {
            rotation = 90 - ang;
        } else if (ang > 90 && ang <= 180) {
            rotation = 450 - ang;
        }
        // 求角度差值,要注意转换以及左半边到右半边角度差
        while(this.node.rotation > 360) {
            this.node.rotation -= 360;
        }
        while(this.node.rotation < 0) {
            this.node.rotation += 360;
        }
        let d = Math.abs(this.node.rotation - rotation);
        if (d >= 180) {
            d = 360 - d;
        }
        let t1 = (d / 360) * this.rotateTime;
        console.log(t1)
        let act1 = cc.rotateTo(t1,rotation);
        let t2 = this.node.position.sub(pos).mag() / this.speed;
        let act2 = cc.moveTo(t2,pos);
        this.node.runAction(cc.sequence(act1,act2));
    }
});

在管理器中

allMoveToPos (pos) {
        // 遍历子节点
        for (let i = 0; i < this.node.children.length; i++) {
            let t = this.node.children[i].getComponent('tank');
            // 被控制时运动过去
            if (t.isCtrl == true) {
                t.moveToPos(pos);
            }
        }
    }

鼠标右键小箭头
再加入个子节点用于绘图
脚本实现

onLoad () {
        // ......
        // 子节点绘图组件
        this.child_ctx = this.getComponentInChildren(cc.Graphics);
        // ......
    },
    
// ......

mouseDown (event) {
        // 如果是鼠标左键
        if (event.getButton() == cc.Event.EventMouse.BUTTON_LEFT) {
            // ......
        } else if (event.getButton() == cc.Event.EventMouse.BUTTON_RIGHT) {
            // 右键绘制小箭头
            // 转化为中心坐标系
            let pos = this.node.convertToNodeSpaceAR(event.getLocation());
            // 该点作图,箭头
            this.child_ctx.moveTo(pos.x - 10,pos.y + 10);
            this.child_ctx.lineTo(pos.x,pos.y);
            this.child_ctx.lineTo(pos.x + 10,pos.y + 10);
            this.child_ctx.moveTo(pos.x,pos.y);
            this.child_ctx.lineTo(pos.x,pos.y + 30);
            this.child_ctx.stroke();

            // 受控对象运动到该点
            this.playerMng.allMoveToPos(pos);
        }
    },

mouseUP (event) {
        // 如果是鼠标左键
        if (event.getButton() == cc.Event.EventMouse.BUTTON_LEFT) {
            // ......
        } else if (event.getButton() == cc.Event.EventMouse.BUTTON_RIGHT) {
            // 如果右键
            this.child_ctx.clear();
        }
    },

O(∩_∩)O~~

加我QQ群：（博客里面的项目，群文件里都有哦）
706176551
我们一起学习！
O(∩_∩)O~~