Cocos Creator 中 _worldMatrix 到底是什么(中)

1. 中篇摘要

上篇中主要做了三件事

  • 简单表述了矩阵的基本知识,以及需要涉及到的三角函数知识
  • 推导了图形变换中 位移 、旋转、缩放 对应的变换矩阵。
  • cocos creator 中矩阵存储方式

在本篇中我们将运用推导的变换矩阵,一一验证代码中更新节点变换矩阵的代码背后的逻辑。游戏场景中的节点都成树形的父子关系。当前节点 worldMatrix是通过父级节点对应的矩阵获取,所以当前场景中只有一个节点时,当前节点的 worldMatrix 应该与localMatrix相同(未测试)。所以这里就通过分析 updateLocalMatrix 来了解。

cocos creator 中图形变换采用标记脏数据方式告知渲染流需要更新变换矩阵。采用位运算存储当前需要更新的变换信息。updateLocalMatrix 方法代码行数比较长,也为了方便分析,所以会将代码块拆分。如想整体浏览此代码块,请下载v2.1.3版本的cocos creator。对应的代码在安装文件 \resources\engine\cocos2d\core\CCNode.js

2. updateLocalMatrix函数整体逻辑

从如下代码就可以论证我上边说明的变换过程,判断脏值,有更新无返回。判断是否有图形变换,有更新无返回。这里有必要说明下位运算是如何做到存储多值的。

设某选择题存在ABC三个选项,正确选项为AC。我们设ABC的权值分别是 A=001 B=010 C=100 ,AC的权值 AC=A|B = 101。此时若用户选择 B,程序只需要将 AC & B > 0 就知道是否正确。代码中就刚好利用这一点,在节点变换过程中,不断改变存在变换 localMatDirty 的值。

  1. // author:herbert 公众号:小院不小
  2. // 原文链接 https://www.cnblogs.com/yfrs/p/ccmatrix2.html
  3. _updateLocalMatrix() {
  4. let dirtyFlag = this._localMatDirty;
  5. if (!dirtyFlag) return;
  6. let t = this._matrix;
  7. if (dirtyFlag & (LocalDirtyFlag.RT | LocalDirtyFlag.SKEW)) {
  8. // 旋转 缩放 倾斜
  9. }
  10. t.m12 = this._position.x;
  11. t.m13 = this._position.y;
  12. this._localMatDirty = 0;
  13. this._worldMatDirty = true;
  14. }

代码中(LocalDirtyFlag.RT | LocalDirtyFlag.SKEW) LocalDirtyFlag.RT=LocalDirtyFlag.POSITION | LocalDirtyFlag.SCALE | LocalDirtyFlag.ROTATION 所以代码中if 判断是当前变换中是否存在 位置 、缩放 、旋转、倾斜。虽然判断了位置,并没有放到if代码块中设置,也许还有其他什么变换导致位置变换。最后就是还原标记,以及告诉渲染流得更新worldMatrix了。

3. 旋转 缩放 倾斜代码逻辑

矩阵的乘法是不满足交换律,即 AB <> BA 所以体现在代码中就是判断旋转和倾斜还在设置缩放的原因。复合变换的顺序会影响最终节点的位置。此部分代码逻辑如下

  1. // author:herbert 公众号:小院不小
  2. if (dirtyFlag & (LocalDirtyFlag.RT | LocalDirtyFlag.SKEW)) {
  3. let rotation = -this._eulerAngles.z;
  4. let hasSkew = this._skewX || this._skewY;
  5. let sx = this._scale.x, sy = this._scale.y;
  6. if (rotation || hasSkew) {
  7. // 旋转 倾斜
  8. }
  9. else {
  10. t.m00 = sx;
  11. t.m01 = 0;
  12. t.m04 = 0;
  13. t.m05 = sy;
  14. }
  15. }

代码中,没有旋转或倾斜信息,就只剩下缩放。那么当前矩阵就是缩放矩阵,只需要把矩阵对角线上的值依次设置成sx sy。let rotation = -this._eulerAngles.z;取负值是因为,rotation 顺时针为正,然后欧拉角中,逆时针为正。取z轴旋转角,是因为2d中旋转轴就是z轴。

4. 存在旋转倾斜代码逻辑

从代码中可知,如果存在复合变换。cocos creator 变换顺序为,旋转->缩放->倾斜->位移。这里有两个需要注意地方

  • 传入的旋转角度需要转换成弧度。不经常用math.cos math.sin 可能不知道这些函数的参数是弧度值
  • Math.sin(Math.PI/6)不等于0.5是因为浮点数的原因
  1. // author:herbert 公众号:小院不小 wx:464884492
  2. // 原文链接 https://www.cnblogs.com/yfrs/p/ccmatrix2.html
  3. if (rotation || hasSkew) {
  4. let a = 1, b = 0, c = 0, d = 1;
  5. // rotation
  6. if (rotation) {
  7. let rotationRadians = rotation * ONE_DEGREE;
  8. c = Math.sin(rotationRadians);
  9. d = Math.cos(rotationRadians);
  10. a = d;
  11. b = -c;
  12. }
  13. // scale
  14. t.m00 = a *= sx;
  15. t.m01 = b *= sx;
  16. t.m04 = c *= sy;
  17. t.m05 = d *= sy;
  18. // skew
  19. if (hasSkew) {
  20. // 倾斜
  21. }
  22. }

代码中将旋转矩阵分块,只提取左上角的四项,得出具体的分块矩阵A为。A此时就应该等于选择矩阵,即 a=cos(b) b=sin(b) c=-sin(b) d=cos(b).从上篇中我们推导旋转矩阵是逆时针旋转推倒。然后代码中rotation为了符合使用习惯是顺时针的。所有对应的旋转矩阵应该乘以-1;

由于cos是偶函数,sin是奇函数,将-1带入矩阵得到

a=cos(b) b=-sin(b) c=sin(b) d=cos(b);接下来处理缩放,将缩放矩阵右乘(cocos 中复合变换矩阵,是左乘还是右乘,没有明确的地方说明。此处是通过代码反推可能有误)变化后的矩阵,如下图所示

根据矩阵乘法规则(行乘列)可知

a=asx b=bsx c=csy d= dsy

5. 倾斜代码逻辑

倾斜其实是两个变换,X轴倾斜和Y轴倾斜。在上篇推导中,得到对应变换矩阵。同上边一样也只取左上角的的分块矩阵A.其中

  1. // author:herbert 公众号:小院不小 wx:464884492
  2. if (hasSkew) {
  3. let a = t.m00, b = t.m01, c = t.m04, d = t.m05;
  4. let skx = Math.tan(this._skewX * ONE_DEGREE);
  5. let sky = Math.tan(this._skewY * ONE_DEGREE);
  6. if (skx === Infinity)
  7. skx = 99999999;
  8. if (sky === Infinity)
  9. sky = 99999999;
  10. t.m00 = a + c * sky;
  11. t.m01 = b + d * sky;
  12. t.m04 = c + a * skx;
  13. t.m05 = d + b * skx;
  14. }

由于 tan(90)趋近无穷大,当计算值为Infinity skx 和 sky 分别做一个值限定。接下来看代码对应的矩阵变换。首先先从y到x的顺序,将Asky和Askx相乘得到一个复合矩阵。再左乘当前变换矩阵p,为了和前边对照,依然采用a b c d

矩阵乘法满足结合率,先将右边的两个矩阵相乘

所以通过矩阵乘法规则得到新的值

m00=a+c*sky m04=c+a*skx

m01=d+b*sky m05=d+b*skx

6. 总结

中篇相对于上篇,中间间隔了一个多月的时间,原创实属不易。这期间一直在恶补图形学和矩阵相关知识。最初分析版本2.0.10,当时代码中存在rotationX rotationY 旋转,当rotationX 和rotationY 不相等时,一直卡在那段代码的分析过程中。后来还去官方论坛提问 https://forum.cocos.com/t/topic/84680/4 ,没有得到满意的结果,也没多少人回复。后来各种查资料,才发现官方将那段代码移除了,采用欧拉角的方式。所有我将本地版本升级成v2.1.3版本。到这个版本后,又卡在了 let rotation = -this._eulerAngles.z这个号问题。越分析越,感觉欠缺的越多,欧拉角,四元数。同时感觉可能写不出中篇了,不过我还是找了一个感觉是对的推导将中篇完成了。当然其中我觉得不清楚的地方还有

  • 在2.0.10 版本中Y轴旋转和X轴选中问题,为啥可以根据Z轴旋转的结果一分为二
  • 在2.1.3 版本中旋转取欧拉角z负号问题,旋转矩阵 b c 值相互取反问题
  • 复合矩阵变换左乘右乘问题,在本文中我通过代码推导应该是左乘
  • 倾斜变换Asky和Askx两个居中相乘顺序问题,本文通过y右乘x得到代码结果

欢迎感兴趣的朋友关注我的微信订阅号"小院不小",或者点击下方的二维码关注。我将多年开发中遇到的难点,以及一些有意思的功能,体会都会一一发布到我的订阅号中。需要本文demo可以在公众号中回复matrix

维护了一个Coscos Creator 的游戏开发群,欢迎喜欢聊技术的朋友加入

闲来无事,采用cocos creator开发了一个小游戏【坦克侠】,感兴趣的朋友一个可以来玩玩

Cocos Creator 中 _worldMatrix 到底是什么(中)的更多相关文章

  1. Cocos Creator 中 _worldMatrix 到底是什么(上)

    Cocos Creator 中 _worldMatrix 到底是什么(上) 1. (矩阵)Matrix是什么,有什么用 (矩阵)Matrix一个神奇的存在?在开发过程中对里边各项值的含义是不是抓耳挠腮 ...

  2. CocosCreator中_worldMatrix到底是什么(下)

    Cocos Creator 中 _worldMatrix 到底是什么(下) 1. 摘要 上篇介绍了矩阵的基本知识以及对应图形变换矩阵推倒.中篇具体介介绍了对应矩阵转换成cocos creator代码的 ...

  3. Cocos Creator 通用框架设计 —— 资源管理

    如果你想使用Cocos Creator制作一些规模稍大的游戏,那么资源管理是必须解决的问题,随着游戏的进行,你可能会发现游戏的内存占用只升不降,哪怕你当前只用到了极少的资源,并且有使用cc.loade ...

  4. kbengine_js_plugins 在Cocos Creator中适配

    kbengine_js_plugins 改动(2017/7/6) 由于Cocos Creator使用严格模式的js,而原本的kbengine_js_plugins是非严格模式的,因此为了兼容和方 便C ...

  5. 在 Cocos Creator 中使用 Protobufjs(一)

    一. 环境准备 我一直在探索Cocos H5正确的开发姿势,目前做javascript项目已经离不开 nodejs.npm或grunt等脚手架工具了. 1.初始化package.json文件 npm ...

  6. Cocos Creator 中的动作系统那些事儿

    动作系统就是可以在一定的时间内实现位移.旋转.缩放.跳动等各种动作. 需要注意的是,动作系统跟 Cocos Creator 编译器的动画系统不同,动作系统是面向程序员的API接口,而动画系统是通过编译 ...

  7. Cocos Creator中按钮组件数组的使用

    Cocos Creator游戏开发中经常使用到按钮,特别是大量按钮的情况,此时使用数组来管理这些按钮就显得更具通用性.我大致走了一下官方的示例,好像没有发现有这个小内容(或者有,但我却是没有找到),于 ...

  8. 欢乐水杯(happy glass)中流体的一种实现!图文视频讲解 ! Cocos Creator!

    使用cocos creator v2.2.2 实现流体效果 ! 图文+视频讲解! 效果预览 实现原理 整体思路是参考论坛中的一个帖子 这款游戏中水的粘连效果在Construct3中利用图层很容易实现, ...

  9. JS中new到底发生了什么

    outline prototype 与 __proto__ function 与 object new 到底发生了什么 prototype 与 __proto__ 首先说下在JS中比较容易让人困惑的  ...

随机推荐

  1. 自定义JDBC工具类

    因为数据库的连接代码都是固定的,为了将减少重复的代码的书写,可以将这些代码封装为一个工具类,获取数据库的连接对象. import java.sql.Connection; import java.sq ...

  2. 【全网首创】修改 Ext.ux.UploadDialog.Dialog 源码支持多选添加文件,批量上传文件

    公司老框架的一个页面需要用到文件上传,本以为修改一个配置参数即可解决,百度一番发现都在说这个第三方插件不支持文件多选功能,还有各种各样缺点,暂且不讨论这些吧.先完成领导安排下来的任务. 任务一:支持多 ...

  3. Vue学习之todolist删除功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. C#操作SQLServer的一个简单封装

    class DBHandler { //SqlConnection数据库连接对象 private SqlConnection localConnection = null; //构造函数中初始化连接对 ...

  5. 【面试】我是如何在面试别人Redis相关知识时“软怼”他的

    事出有因 Redis是一个分布式NoSQL数据库,因其数据都存储在内存中,所以访问速度极快,因此几乎所有公司都拿它做缓存使用,所以Redis常被称为分布式缓存. 一次我的一个同事让我帮他看Redis相 ...

  6. 【译】Kubernetes监控实践(2):可行监控方案之Prometheus和Sensu

    本文介绍两个可行的K8s监控方案:Prometheus和Sensu.两个方案都能全面提供系统级的监控数据,帮助开发人员跟踪K8s关键组件的性能.定位故障.接收预警. 拓展阅读:Kubernetes监控 ...

  7. 第六届蓝桥杯java b组第二题

    立方变自身 观察下面的现象,某个数字的立方,按位累加仍然等于自身. 1^3 = 1 8^3 = 512 5+1+2=8 17^3 = 4913 4+9+1+3=17 … 请你计算包括1,8,17在内, ...

  8. 抓住那只牛!Catch That Cow POJ-3278 BFS

    题目链接:Catch That Cow 题目大意 FJ丢了一头牛,FJ在数轴上位置为n的点,牛在数轴上位置为k的点.FJ一分钟能进行以下三种操作:前进一个单位,后退一个单位,或者传送到坐标为当前位置两 ...

  9. Hadoop-1,web页面调用报无hbase.jar包【以解决】 2,报java.lang.NoSuchMethodError: org.eclipse.jdt.internal.compiler.CompilationResult.getProblems()[Lorg/eclipse/jdt/core/compiler/IProblem;【以解决】

    1:web页面调用报无hbase.jar包 本来java文件就没有问题,但是jsp一调用那个java文件里的方法就报错,报的无hadoop/hbase相关报的问题. 主要解决方法是: 复制hbase/ ...

  10. Cocos Creator实现左右跳游戏

    ​1. 玩法说明 游戏开始后,点击屏幕左右两侧,机器人朝左上方或右上方跳一步,如果下一步有石块,成功得1分,否则游戏结束. 2. 模块介绍 游戏场景分为2个:主页场景(home).游戏场景(game) ...