Cocos Creator | 炮彈發射效果模擬

一、預覽效果

​

 

二、設置物理世界屬性：

1.打開物理系統：

cc.director.getPhysicsManager().enabled = true;

 

2. 配置重力加速度：

cc.director.getPhysicsManager().gravity = cc.v2(0, -980);

 

三、射擊角度調整

1.全局監聽touch事件，事件分為TOUCH_START（開始）、TOUCH_MOVE（移動）、TOUCHCANCEL（取消）、TOUCH_END（結束）四個狀態，方法如下：

this.node.on(cc.Node.EventType.TOUCH_START, this.onEventStart, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onEventMove, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onEventCancel, this);
this.node.on(cc.Node.EventType.TOUCH_END, this.onEventEnd, this);

 

2.當開始觸摸屏幕時，觸發開始的回調onEventStart()，回調中開啟定時器，每隔0.03秒角度加1，並改變炮台的角度，方法如下：

//更新炮管角度
this._curAngle = 0;
this.gunSchedule = function(){
  if (this._curAngle < 90){
    this._curAngle += 1;
    this.myGunImg.angle = this._curAngle;
  }
};
this.schedule(this.gunSchedule, 0.03);

 

3.當結束觸摸時，觸發結束的回調onEventEnd()，回調中關閉定時器，方法如下：

//停止更新炮管
this.unschedule(this.gunSchedule);

 

四、發射子彈

1.先在編輯器中創建一個子彈預制體，並給它綁定好物理組件，組件如下：

​

 

2.給子彈設置沖量，假設固定x方向的沖量是5000，再通過角度計算出y方向的沖量，方法如下：

let x = 5000; 
//通過角度計算力度
let y = x * Math.tan(Math.abs(this._curAngle) * (Math.PI / 180)); 
//給子彈設置沖量
this.bulletNode.getComponent(cc.RigidBody).applyForceToCenter(cc.v2(x, y));

3.此時子彈同時受到重力加速度和沖量的影響，將會發射出去，但是子彈的角度會始終是發射出去時的角度，現在我們通過子彈運行的軌跡計算出正確的旋轉角度。先獲取運行時前后兩個點的坐標，再通過坐標點之間的連線計算出夾角，最后給子彈設置角度即可，方法如下：

let curPos = this.bulletNode.position;
let lastPos = curPos;
this.bulletfun = function(){
  curPos = this.bulletNode.position;
  //計算角度
  let lenX = curPos.x - lastPos.x;
  let lenY = 0;
  let r = 0;
  if(curPos.y < lastPos.y){ //向上運動
     lenY = curPos.y - lastPos.y;
     r = Math.atan2(lenY, lenX) * 180 / Math.PI;
  }
  else{   //向下運動
    lenY = lastPos.y - curPos.y;
    r = -1 * Math.atan2(lenY, lenX) * 180 / Math.PI;
  }
  lastPos = curPos;
  this.bulletNode.angle = r;
};
this.schedule(this.bulletfun, 0.1);

 

4.當子彈落地或打到目標物體時，停止定時器，方法如下：

//停止子彈監聽
this.unschedule(this.bulletfun);

掃一掃，關注微信公眾號，了解更多。

​