前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CreatorPrimer|飞机大战(二)

CreatorPrimer|飞机大战(二)

作者头像
张晓衡
发布2019-09-11 18:07:15
6930
发布2019-09-11 18:07:15
举报

之前的飞机大战(一)我们实现了地图场景的滚动和简单的直上直下的子弹的发射,在之前的基础上,对线性发射器做了简单的修改,实现了如下效果:

1、子弹角度计算

这里为子弹发射器增加了一个rotation属性用于控制子弹发射的角度,但是如何计算子弹的飞行终点坐标呢?

不好意思,请允许我重新翻开初中的数学关于三角函数章节,通过直角三角形中,角度与边的关系可以计算出飞行终点,我们根据上图,看下我们已知的参数:

  1. 子弹角度β,是我们的组件属性
  2. 飞行距离r,这里为了简单我使用了常用cc.winSize.height

因此通过三角公式可以得出:

x = r * sin(β) y = r * cos(β)

需要注意的是 JavaScript 中 Math.sin\Math.cos 函数中的参数是弧度单位,每1角度为 Math.PI / 180 弧度,下面看终点的计算代码:

代码语言:javascript
复制
_emmitNode() {
        //创建子弹
        let node = cc.instantiate(this.prefab);
        node.position = this.offset.add(this.node.position);
        node.parent = this.node.parent;
        node.rotation = this.rotation;

        //计算终点
        let endPoint = cc.v2();
        endPoint.x = cc.winSize.height * Math.sin(this.rotation * RADIAN);
        endPoint.y = cc.winSize.height * Math.cos(this.rotation * RADIAN);

        //计算飞行持续时间
        let distance = endPoint.sub(node.position).mag();
        let duration = distance / this.speed;

        //运行动作
        let moveBy = cc.moveBy(duration, endPoint);
        let removeSelf = cc.removeSelf();
        let sequence = cc.sequence(moveBy, removeSelf);
        node.runAction(sequence);
    }

2. 动态旋转

动态旋转很简单,在update每帧调用函数中,不断修改rotation属性值,看下面代码:

代码语言:javascript
复制
update(dt) {
     if (this.spin === 0) {
         return;
    }
    this.rotation += dt * this.spin;
}

spin在这里是一个旋绕速度参数,相同于电风扇上的摇头马达,通过子弹产生速度、飞行速度、旋转速度你可以创造了各种样式花丽的子弹效果,下面是我弄的几张截图:

给飞机挂了两个带spin参数的发射器,一个spin为360顺时针旋转,一个spin值为-360逆时针旋转,像对一凤凰的翅膀。

这个是挂了4个发射器,起始rotation分别为0、90、180、270,飞行速度快一些,spin值都是一样的,像刮起的凤凰旋风。

3. 小结

我们看似复杂的子弹效果,其实每一个都是用的直线动作,通过挂载多个子弹发射器,调节枪口角度、角度动态旋转可以生成出各式花样。

最后还是录制了一个视频,看看实现上面效果到底有多简单

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Creator星球游戏开发社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、子弹角度计算
  • 2. 动态旋转
  • 3. 小结
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档