cocos2dx架构一瞥—Node类、坐标系及UI树

本问是阅读《我所理解的cocos2d-x》第二章——Cocos2dx架构一瞥的2.3小章节后的总结。

（参考书籍《我所理解的cocos2d-x》，秦春林著）

（文中cocos2d-x版本为3.17）

一、Node类

cocos2dx支持在屏幕上绘制精灵、文本、形状、粒子、地图等，所有这些对象都继承自Node类，Node类定义了元素的布局、变换、坐标等系统

二、Position和anchorPoint

1、Node中的position属性表示一个元素在坐标系中的位置。

2、Node类中的anchorPoint属性表示锚点，即用元素的哪个位置来表示对应位置（如position）；锚点的位置取决于元素的本地坐标系，范围时(0,0)至(1,1)之间，比如（0.5,0.5)就表示anchorPoint在这个元素的正中间。

三、坐标系

1、cocos2dx中的坐标系

cocos2dx的坐标系与OpenGL坐标系保持一致，都是“右手坐标系”，即横x，纵y，z朝外。

2、本地坐标系和世界坐标系

cocos2dx中坐标系分为本地坐标系和世界坐标系。

世界坐标系是指整个屏幕的坐标系，屏幕左下角为原点，自左向右是x轴，自下而上是y轴。

本地坐标系也叫相对坐标系，是指相对于父节点的坐标。以父元素的左下角为远点，向右为x，向上为y。

3、相对坐标的目的和优点

相对坐标系简化了UI元素布局，它使我们只需要关心局部，UI树则会帮助我们实现坐标系的转换。

4、本地坐标世界坐标转换方法

如果我们需要用到世界坐标系（不同层级的元素碰撞检测），可以使用以下方法进行转换。

class CC_DLL Node:public Ref
{
public:
	Vec2 convertToNodeSpace(const Vec2& worldPoint) const;
	Vec2 convertToWorldSpace(const Vec2& nodePoint) const;
	Vec2 convertToNodeSpaceAR(const Vec2& worldPoint) const;
	Vec2 convertToWorldSpaceAR(const Vec2& nodePoint) const;
	Vec2 convertTouchToNodeSpace(Touch * touch) const;
	Vec2 convertTouchToNodeSpaceAR(Touch * touch) const;
}

convertToNodeSpace方法是将一个世界坐标转换到该元素的本地坐标系中。

使用方法如下

//计算出node2在node1的本地坐标系中的相对坐标。
auto point = node1->convertToNodeSpace(node2->getPosition());
/*
*使用此方法可以判断两个物体是否相交
*通过计算node2在node1坐标系中的坐标
*node2锚点为（1，1）相对坐标的xy都小于0，那么肯定不相交
*node2锚点为（0，0）相对坐标的xy都大于node1元素的宽高，不相交
*/

convertToWorldSpace方法是将一个本地坐标转换到世界坐标中。

使用方法如下

auto point = node1->convertToWorldSpace(node2->getPosition());
//node1一定要是node2的父节点
//convertToWorldSpace方法是通过父节点，将子节点坐标转换为世界坐标
//注意！！！
//返回值是node2锚点的世界坐标！！！

不依赖父节点直接计算出世界坐标可以实用下面这个方法

Vec2 convertToNodeSpaceAR(const Vec2& worldPoint) const;

四、UI树

1、Node类中的UI树

cocos2dx中的UI树的根节点是Scene类，UI树的每一个节点都是Node实例对象。每一个Node对象都有一个Node*的Vector对象—— _children，以及一个Node指针—— _parent。其中Scene的parent属性为空。