CocosCreator之KUOKUO带你做个RTS（一）cc.graphics实现选取框

本次引擎2.0.9

目标

RTS战略游戏中的选取框

实现

利用cc.graphics组件绘制，
确定范围后，children属性遍历。

最终效果

层级

记得绑定绘图组件
controlLayer.js脚本

cc.Class({
  extends: cc.Component,

  properties: {
    // 为了调用playerMng方法
    playerMng : require('playerMng')
  },

  onLoad () {
    // 绘图组件
    this.ctx = this.getComponent(cc.Graphics);
    // 点击起始点
    this.startPoint = cc.v2(0,0);
    // 点击结束点
    this.endPoint = cc.v2(0,0);
  },

  start () {
    // 监听鼠标事件
    this.node.on('mousedown',this.mouseDown,this);
    this.node.on('mousemove',this.mouseMove,this);
    this.node.on('mouseup',this.mouseUP,this);
  },

  mouseDown (event) {
    // 如果是鼠标左键
    if (event.getButton() == cc.Event.EventMouse.BUTTON_LEFT) {
      // 转化为中心坐标系
      let pos = this.node.convertToNodeSpaceAR(event.getLocation());
      // 赋值起始点
      this.startPoint.set(pos);
    }
  },

  mouseMove (event) {
    // 如果是鼠标左键
    if (event.getButton() == cc.Event.EventMouse.BUTTON_LEFT) {
      // 转化为中心坐标系
      let pos = this.node.convertToNodeSpaceAR(event.getLocation());
      let w = pos.x - this.startPoint.x;
      let h = pos.y - this.startPoint.y;
      this.ctx.clear();
      this.ctx.rect(this.startPoint.x,this.startPoint.y,w,h);
      this.ctx.stroke();
    }
  },

  mouseUP (event) {
    this.ctx.clear();
    // 记录结束点
    // 转化为中心坐标系
    let pos = this.node.convertToNodeSpaceAR(event.getLocation());
    this.endPoint.set(pos);
    
    // 对区域内坦克显示
    this.playerMng.mapForSign(this.startPoint,this.endPoint);
  },
  
});

这样，调用playerMng.js中的遍历及控制

playerMng.js脚本

cc.Class({
  extends: cc.Component,

  properties: {
    // 坦克预制体
    tank : cc.Prefab
  },

  start () {
    // 创造3个
    this.createOne(0,0);
    this.createOne(100,100);
    this.createOne(100,-200);
  },

  createOne (x, y) {
    let t = cc.instantiate(this.tank);
    t.parent = this.node;
    t.x = x;
    t.y = y;
  },

  mapForSign (startPoint, endPoint) {
    // 根据两点取框选范围
    let max_X = startPoint.x >= endPoint.x ? startPoint.x : endPoint.x;
    let min_X = startPoint.x < endPoint.x ? startPoint.x : endPoint.x;
    let max_Y = startPoint.y >= endPoint.y ? startPoint.y : endPoint.y;
    let min_Y = startPoint.y < endPoint.y ? startPoint.y : endPoint.y;
    // 遍历子节点
    for (let i = 0; i < this.node.children.length; i++) {
      if (this.node.children[i].x > min_X && this.node.children[i].x < max_X &&
        this.node.children[i].y > min_Y && this.node.children[i].y < max_Y) {
        // 在范围内
        let t = this.node.children[i].getComponent('tank');
        // 未被控制时显示光圈
        if (t.isCtrl == false) {
          t.showSign();
        }
      } else {
        // 不在范围内
        let t = this.node.children[i].getComponent('tank');
        t.isCtrl = false;
        t.closeSign();
      }
    }
  }
});

预制体结构
tank.js脚本

cc.Class({
  extends: cc.Component,

  properties: {
    // 光圈节点绘图组件
    ctx : cc.Graphics,
    // 是否被控制
    isCtrl : false
  },

  showSign () {
    this.ctx.circle(0,0,20);
    this.ctx.stroke();
  },

  closeSign () {
    this.ctx.clear();
  }
});

好了，第一部分完成！！！！
O(∩_∩)O~~

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