原创

麒麟子Cocos Creator实用技巧七:方向与角度转换

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://qilinzi.blog.csdn.net/article/details/89645564


麒麟子做了一个Demo给大家,向大家演示了方向转角度,角度转方向的应用。

Demo中有两个坦克,中间的坦克锁定了另一个坦克,始终把自己的炮口对准它,并且会不停地发朝另一个坦克发射炮弹。 

发出来的炮弹会追踪另一个坦克,直到追上另一个坦克才会销毁。

而另一个坦克也不闲着,它会绕着中间的坦克转圈,并且他的移动方向永远是圈的切线方向,且炮口总是保持和自己移动的方向一致。

在线演示:https://qilinzi.ukylin.net?lesson=07


一、在我们的的游戏中,经常会有这样的需求

  1. 让一个对象朝着他的方向移动
  2. 让一个对象朝向另一个对象

Cocos Creator 2.0以后,移除了所有的基于点的计算,统一成了cc.Vec2,cc.Vec3。 这一统一,麒麟子就熟悉多了,这就是3D引擎的味道。(注:麒麟子在做棋牌之前,一直做的是3D游戏引擎方面的工作,对3D游戏引擎相关的内容比较熟悉,2D游戏引擎风格的API反而不是那么熟),

由于目前还没有涉及3D部分,我们今天只来看看cc.Vec2吧

官方在线文档:https://docs.cocos.com/creator/api/zh/classes/Vec2.html

 

注意哦:cc.Vec2是类型, cc.v2是快捷创建一个cc.Vec2变量

var v = cc.v2(1,0) 等价于 var v = new cc.Vec2(1,0);


二、相互转换


1、让一个对象朝着他的方向移动

cc.Node节点的rotation是一个角度,因此,我们为了实现这个目标,首先要根据rotation求出他的dir方向,就好办了。示例代码

update(dt){
    //由于Math函数接受的是孤度,所以我们先节节点的旋转转化为弧度
    var angle = this.node.rotation / 180 * Math.PI;
    //合成基于 X正方向的方向向量
    var dir = cc.v2(Math.cos(angle),Math.sin(angle));
    //单位化向量
    dir.normalizeSelf();

    //根据方向向量移动位置
    var moveSpeed = 100;
    this.node.x += dt * dir.x * moveSpeed;
    this.node.y += dt * dir.y * moveSpeed;
}

 

2、让一个对象朝向另一个对象

通过高中数学我们可以知道, A到B的向量 = B点 - A点。 那我们只需要将目标对象的位置 - 自己的位置,即可得到方向向量。

方向向量转换为角度,需要认清一个隐含变量,就是这个角度的基准是 X 轴正方向。 使用向量来表示就是 (1,0)。

cc.Vec2提供了两个函数  cc.Vec2.angle和cc.Vec2.signAngle, 后者相比前者来说,后者产生的角度是有符号的,而前者会永远为正。 我们使用cc.Vec2.signAngle来将方向向量转换为弧度。 具体操作请看代码。

function lookAtObj(target){
    //计算出朝向
    var dx = target.x - this.node.x;
    var dy = target.y - this.node.y;
    var dir = cc.v2(dx,dy);

    //根据朝向计算出夹角弧度
    var angle = dir.signAngle(cc.v2(1,0));

    //将弧度转换为欧拉角
    var degree = angle / Math.PI * 180;

    //赋值给节点
    this.node.rotation = degree;
}

本DEMO完整地址:https://gitee.com/qilinzi/qlz_ccc_tips   目录  base/assets/07_rotationtodir

在线演示:https://qilinzi.ukylin.net?lesson=07

文章最后发布于: 2019-04-28 21:12:09
展开阅读全文
0 个人打赏
私信求帮助

Cocos Creator 极速入门

10-10

#### **课程亮点** - 紧扣最新版特性解读,比官方文档更详实 - 官方范例源码解析,实战中掌握功能用法 - 实操个人游戏项目,由理论进阶实践应用 - 走通研发完整流程,快速上手 H5、小游戏开发 #### **专家推荐** 该课程对 Cocos Creator 官方实例工程做了详尽解说,并从作者多年引擎开发经验的角度,深入分析了其中的技术要点。对于想要快速掌握 Cocos Creator 功能用法的开发者,这是一个很不错的参考资料。 ——王哲,Cocos 引擎创始人 对于大多数有经验的游戏开发者,本课程能帮助他们快速掌握 Cocos Creator 各大功能用法。内容从入门到实践,有完整的课程体系,在此,推荐给感兴趣的小伙伴。 ——沈大海,Cocos 知名技术专家、区块链创业学院院长 我一直坚持一个学习方法,20% 的探究,80% 的实战,《Cocos Creator 极速入门》以入门为辅,实战为主,不仅仅讲解了 Cocos Creator 的使用,更是对官方教学案例的一个重要补充。 ——凌建风,厦门风领科技 CEO、《Cocos2d-JS 游戏开发》图书作者 #### **课程背景** 游戏引擎封装了开发所需的各类工具,将开发者从底层功能研发中解脱出来,让他们更加专注于业务逻辑的实现。Cocos Creator 由 Cocos 推出,提供了整个游戏研发工作流中所需的全部功能,成为开发者基于 Cocos 引擎开发游戏的核心工具。 学习 Cocos Creator,大家首先想到的是官方文档。它提供了一系列经典实例,但缺乏必要的解读说明,初学者难以掌握。为此,本达人课将以官方案例为切入点,通过对一个个鲜活实例的讲解,带初学者全面体系化了解 Cocos Creator 核心基础知识,实现快速入门。随后,通过两个小型游戏项目的搭建,引导大家将基础知识灵活应用到项目实战开发中,真正达到对 Cocos Creator 的熟练应用,最终独立完成自己的小型休闲游戏。 #### **作者介绍** 卞安,网名红孩儿,CSDN 博客专栏作者,曾担任无限时空网络科技引擎总监、触控科技 Cocos 引擎总监,主持开发过多款自研引擎,在 CSDN 学院已开设多门课程,广受学员好评。 #### **课程大纲** ![](https://images.gitbook.cn/ae0ca6b0-1f20-11e9-ae28-d574dc548e53) #### **适宜人群** - Cocos Creator 初学者 - 希望进入 H5 领域的 Cocos 游戏开发者 - 希望从事小游戏开发的技术人员

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览