学习
实践
活动
专区
工具
TVP
写文章
专栏首页Cocos Creator开发Cocos Creator | 炮弹发射效果模拟

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);
文章分享自微信公众号:
一枚小工

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:一枚小工
原始发表时间:2019-10-11
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Cocos Creator模拟射箭效果 | 附代码

    点击屏幕,屏幕出现起始位置标志的圆点,不松开手指,滑动屏幕,控制力度和方向,移动距离越大,弓箭拉伸效果越大,松开以后,箭将沿着结束点到起始点方向射出去。

    一枚小工
  • Cocos Creator 拖动效果

    AnRFDev
  • 折纸效果! Cocos Creator 3.0

    可以发现,触摸方向 与 触摸方向中点指向多边形顶点 的夹角决定了分割后的多边形的点。

    白玉无冰
  • cocos creator探照灯效果实现

    探照灯效果就是指整个场景或者图片都是黑的,只有灯光照射的地方才是亮的。实现方式有很多种,我们这里用shader来实现,主要原因就是用shader来实现,效率更高...

    用户1428723
  • Cocos Creator模拟砸金蛋3d旋转效果 | 附代码

    根据地图,设置要椭圆圆心所在位置和蛋的放置点位置,即显示图片的锚点,比如本例中的放置蛋的盘子。

    一枚小工
  • 用 Cocos Creator 做跑马灯效果!

    简单的实现了功能,没有封装,如果有需要,可以参考代码,实现更多的功能,或者增加更多颜色文字内容的显示。

    一枚小工
  • 如何实现高抛平抛发射?从抛物线说起!Cocos Creator!

    游戏中经常会遇到抛物线轨迹问题,为此研究如何运用数学物理知识,实现高抛平抛效果。文章底部获取完整代码!

    白玉无冰
  • cocos creator 1.x透明渐变效果实现

    用户1428723
  • Cocos Creator 2.x透明渐变效果实现

    之前写了个透明过渡动画实现是基于Cocos Creator 1.x的,鉴于现在大多数开发者都使用2.x了,并且2.x与1.x中shader的使用方式有很大的不同...

    用户1428723
  • 使用卷积实现各种滤镜效果!shader 编程实战!Cocos Creator!

    也可以自定义材质,设计不同的卷积内核。新建材质,选择 effect 为 convolutionFilter ,定义自己的卷积内核。

    白玉无冰
  • Cocos Creator | 开红包小游戏实现翻开效果,有代码!

    ▌游戏开始后,点击开抢,屏幕中会出现9个未开启的红包,点击任一红包,翻开随机金额的红包,直到翻开所有红包,游戏结束,可以照此继续下去。

    一枚小工
  • cocos creator | 用摄像机实现局部缩放的效果

    多摄像机的支持可以让你轻松实现高级的自定义效果,比如双人分屏效果,或者场景小地图的生成。

    白玉无冰
  • 噪声纹理之消融效果! shader 入门精要! Cocos Creator Shader !

    个人理解噪声纹理就是一张图片,每个像素点颜色值(rgba)是按照一定的随机性分布的。

    白玉无冰
  • Cocos Creator 3.0 入门 ! 2D 素材 3D 效果!

    新建场景后,在场景中添加4个四方形(Quad),通过旋转平移缩放,围成长方体的四个面。

    白玉无冰
  • cocos creator | 用摄像机实现残影幻影拖尾效果

    利用摄像机拍摄角色,然后投影到多个显示画布,给画布节点设置不同的透明度,最后让画布节点跟随角色移动。

    张晓衡
  • 需求分析文档

    作为软件系统开发技术协议的参考依据,为双方提供参考。根据游戏特点,对被开发软件系统的主要功能、性能进行完整描述,为软件开发者进行详细设计和编程提供基础。为软件提...

    全栈程序员站长
  • cocos creator | 用摄像机实现残影幻影拖尾效果

    利用摄像机拍摄角色,然后投影到多个显示画布,给画布节点设置不同的透明度,最后让画布节点跟随角色移动。

    白玉无冰
  • 【中英双语教程】桌球小游戏(1)

    桌球小游戏是 BigBear 老师设计、撰写的中英双语的 Cocos Creator 入门教程,面向 Cocos Creator 初学者,但不论你技术如何,相信...

    张晓衡
  • 2D实现背景图3D滚动效果(透视) !Cocos Creator !

    这次的纹理管理仍然是使用 Sprite 组件的渲染模式 Mesh ,需要的可以参考 初探精灵中的网格渲染模式 ! 。

    白玉无冰

扫码关注腾讯云开发者

领取腾讯云代金券